Echarts dataZome 横向移动动态显示数据
let times = 0 let a = 1 option = { xAxis: { type: 'category', data: ['2020-01', '2020-02', '2020-03', '2020-04', '2020-05', '2020-06', '2020-07'], }, yAxis: { type: 'value' }, dataZoom: [{ show: false, realtime: true, y: 36, height: 20, start: 3, end: 98, zoomLock:false, }, { type: 'inside' } ], series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', moveOnMouseMove:true }] }; myChart.on('dataZoom', function (params) { console.log('触发') times=times+1; if(times>=2){ console.log(params.batch[0],times,123) if(params.batch[0].end==95){ console.log('向下滑') }else{ console.log('向上滑') } //触发横坐标数据更新前将之前数据清空,后面逻辑进行数据处理 option.xAxis.data = []; if(a==1){ option.xAxis.data.push('2020-1', '2020-2', '2020-3', '2020-4', '2020-5', '2020-6', '2020-7') }else if(a==2){ option.xAxis.data.push('2020-8', '2020-9', '2020-10', '2020-11', '2020-12', '2020-13', '2020-14'); }else if(a==3){ option.xAxis.data.push('2020-15', '2020-166', '2020-17', '2020-18', '2020-19', '2020-20', '2020-21') }else if(a==4){ option.xAxis.data.push('2020-22', '2020-23', '2020-24', '2020-4', '2020-25', '2020-26', '2020-27') }else if(a==5){ option.xAxis.data.push('2020-1', '2020-2', '2020-3', '2020-4', '2020-5', '2020-6', '2020-7') }else if(a==6){ option.xAxis.data.push('2020-8', '2020-9', '2020-10', '2020-11', '2020-12', '2020-13', '2020-14'); }else if(a==7){ option.xAxis.data.push('2020-15', '2020-166', '2020-17', '2020-18', '2020-19', '2020-20', '2020-21') }else if(a>7){ option.xAxis.data.push('2020-15', '2020-166', '2020-17', '2020-18', '2020-19', '2020-20', '2020-21') } //触发纵坐标数据更新前将之前数据清空,后面逻辑进行数据处理 option.series[0].data = [] option.series[0].data.push(820*Math.random(), 932*Math.random(), 901*Math.random(), 934*Math.random(), 1290*Math.random(), 1330*Math.random(), 1320*Math.random()) //自定义标识 a = a+1; //拿到最新option 触发视图更新 myChart.setOption(option); //自定义标识 times=0 }else{ //没达到更新条件时,要set之前的option,不然影响后续操作 myChart.setOption(option); } });
FUCKING FRONT-END DEVELOPMENT