echarts 柱状图横轴自动滚动

一 用echarts自动datazoom，配合定时器实现横轴柱状图滚动。

打开链接， 替换对应代码显示。
如引入echarts为在线定制版，注意datazooom去掉就没效果了。

image.png

https://echarts.apache.org/examples/zh/editor.html?c=mix-zoom-on-value

myChart.showLoading();
$.get(
  ROOT_PATH + '/data/asset/data/obama_budget_proposal_2012.list.json',
  function (obama_budget_2012) {
    myChart.hideLoading();
    let timeOut 
  
   
    
    let x= ["1","2","3","4","5","6","7","8","9",'']
    let y  =[{"value":"3.64","join":42,"label":{"show":true}},{"value":"3.85","join":99,"label":{"show":true}},{"value":"5.61","join":70,"label":{"show":true}},{"value":"5.78","join":143,"label":{"show":true}},{"value":"8.03","join":219,"label":{"show":true}},{"value":"12.74","join":294,"label":{"show":true}},{"value":"15.41","join":208,"label":{"show":true}},{"value":"28.24","join":486,"label":{"show":true}},{"value":"41.59","join":507,"label":{"show":true}},{"value":"49.55","join":500,"label":{"show":true}}]
    
    option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
          label: {
            show: true
          }
        }
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      calculable: true,
      legend: {
        data: ['Growth', 'Budget 2011', 'Budget 2012'],
        itemGap: 5
      },
      grid: {
        top: '12%',
        left: '1%',
        right: '10%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'value',
        
        }
      ],
      yAxis: [
        {
         
          type: 'category',
           data: x,
         axisLabel: {
                //x轴文字的配置
                show: true,
                interval: 0,
                textStyle: {
                  color: '#7E97CC'
                }
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#ffffff0f'
                }
              },
              axisTick: {
                show: false
              },
              splitLine: {
                //网格线
                show: true,
                lineStyle: {
                  color: '#ffffff0f',
                  type: 'dashed'
                }
              
        }
        }
      ],
  
      dataZoom: [
      {
            type: 'slider',
              // 隐藏右侧改为false
            show: true,
            // zoomLock: false,
            startvalue: 0,
      
            yAxisIndex: [0],
            // height: '10',
            left: '97%', // 滑动条位置
            start: 100, // 默认为0
            end:50 , // 默认为100
     
           
          },
          {
            type: 'inside', // 内置滑动，随鼠标滚轮展示
            yAxisIndex: [0],
            start: 1, // 初始化时，滑动条宽度开始标度
            end: 100, // 初始化时，滑动条宽度结束标度
            zoomOnMouseWheel: false, // 如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。。
            moveOnMouseMove: true,
            moveOnMouseWheel: true, // 鼠标滚轮实现移动
          },

       
      ],
      series: [
        {
           radius: ['100%', 90],
                type: 'bar',
          data: y,
          label: {
                  normal: {
                    lineHeight: 10,
                    // formatter: '{c}%',
                    formatter: function (e) {
                      let data = e.data
                      if (data.value == 0) {
                        // data.labelLine.show=false;
                        // data.label.show=false;
                        return ''
                      } else {
                        return `${data.value}%/${data.join}人`
                      }
                    },
                    position: 'insideBottomRight',
                    offset: [0, 5, 0, 0],
                    textStyle: {
                      color: '#fff',
                      fontSize: 10
                    }
                  }
                }
     
        },
     
      ]
    };
    myChart.setOption(option);
      // return
        //this.dataList.seriesData为柱形图数据
        timeOut=setInterval(()=>{
        // clearInterval(this.timeOut)
        // 每次向后滚动一个，最后一个从头开始。
        // if(this.stopMove){ return }
        var option=myChart.getOption();
        if (option.dataZoom[0].end==50) {
             option.dataZoom[0].end = 100;
             option.dataZoom[0].start = 50;
        } else {
            option.dataZoom[0].end -= 10;
            option.dataZoom[0].start -= 10;
        }
        myChart.setOption(option)
    },2000);
  }
);

二 js动态计算数组，渲染图表

setOption可以局部更新图表

 get5 () {
                // 少于5条不动态 
                if(this.data.length<=5) {
                    this.dataMap=this.data;
                    return
                }
                let result = [];
                for (let i = this.index; result.length < 5; i = (i + 1) % this.data.length) {
                    result.push(this.data[i]);
                }
                this.dataMap=result;
            }
                // 局部更新
               // pie1 为初始化获取元素
                     var option =pie1.getOption()
                        option.yAxis[0].data= this.dataMap.map(item=>{
                            return item.venue_name
                        })
                        option.series[0].data= xx
                        option.series[1].data= xx

                        this.$nextTick(()=>{
                                let timer
                                timer =setTimeout(()=>{
                                    clearTimeout(timer)
                                    pie1.setOption(option)
                                },1000)
                        })