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); 
    }
    
});
原文地址:https://www.cnblogs.com/1rookie/p/12410662.html