设置多个x轴,每个x轴对应多根曲线,设置dataZoom属性,然后设置toolbox属性,缩放时曲线数据消失
配置项如下
var base = +new Date(1968, 9, 3);
var oneDay = 24 * 3600 * 1000;
var date = [];
var data = [Math.random()*300];
for (var i = 1; i < 20000; i++) {
var now = new Date(base += oneDay);
date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
}
var a = [[1524549242072, 49],[1524549242634, 46],[1524549243195, 48],[1524549243757, 48],[1524549244053, 50],[1524549244615, 53],[1524549245176, 54],[1524549245738, 52],[1524549246300, 54]];
var base1 = +new Date(1999, 9, 3);
var date1 = [];
var data1 = [Math.random()*200];
for (var i = 1; i < 20000; i++) {
var now1 = new Date(base1 += oneDay);
date1.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
data1.push(Math.round((Math.random() - 0.5) * 20 + data1[i - 1]));
}
option = {
title: {
left: 'auto',
text: '999'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['Crown_25','Crown_40','Wedge_25','Crown_25(2)','Crown_40(2)','Wedge_25(2)']
},
toolbox: {
itemSize: 15,
orient: 'horizontal',
right:150,
top:15,
feature: {
dataZoom:{
},
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
restore:{},
saveAsImage: {},
}
}, dataZoom: [
{
type: 'inside',
xAxisIndex: [0,1],
start: 0,
end: 100,
},{
type: 'slider',
xAxisIndex: [0,1],
start: 0,
end: 100,
},{
type: 'inside',
yAxisIndex: [0],
start:0,
end: 100,
},{
type: 'slider',
yAxisIndex: [0],
start: 0,
end: 100,
},{
type: 'inside',
xAxisIndex: [1],
start: 0,
end: 100,
},{
type: 'slider',
xAxisIndex: [1],
start: 0,
end: 100,
}],
xAxis : [
{
name: 'T/秒',
type:'category',
data:date,
},
{
name: 'T/秒',
position: 'top',
/*data:date,*/
type:'time',
}
],
yAxis : [
{
name: '555',
type : 'value',
}
],
series : [
{
name:'Crown_25',
type:'line',
data:data
},{
name:'Crown_40',
type:'line',
},{
name:'Wedge_25',
type:'line',
}, {
name:'Crown_25(2)',
type:'line',
xAxisIndex:'1',
data:a
},{
name:'Crown_40(2)',
type:'line',
xAxisIndex:'1',
},{
name:'Wedge_25(2)',
type:'line',
xAxisIndex:'1',
}
]
};