• 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); 
        }
        
    });
  • 相关阅读:
    代码
    怎么创建scrollview
    tcp/Ip http
    游戏道具
    FPS interv
    调整音乐
    插入排序
    冒泡排序
    JSON详解
    设计模式系列(2) 工厂模式之简单工厂模式
  • 原文地址:https://www.cnblogs.com/1rookie/p/12410662.html
Copyright © 2020-2023  润新知