实现柱状图滚动效果

首先配置dataZoom

dataZoom: [
          {
            show: true,
            width: 6,
            orient: 'vertical', // 设置为垂直滚动条
            yAxisIndex: [0, 5], // 控制y轴滚动的对象
            startValue: 0, // 从哪里开始
            endValue: 4, //一次显示几个
            backgroundColor: "#cfcfcf", // 两边未选中的滑动条区域的颜色
            handleSize: 0, // 两边手柄尺寸
            showDataShadow: false, // 是否显示数据阴影 默认auto
            showDetail: false, // 拖拽时是否展示滚动条两侧的文字
          }
        ],

 如果需要滚动我们只需要使用定时器（setInterval），不断改变dataZoom中的startValue和endValue即可

setInterval(() => {
      // 当已经到达底部，重新回到顶部
      if (this.option.dataZoom[0].endValue === this.data.categories.length - 1) {
        this.option.dataZoom[0].startValue = 0 // 数据窗口范围的起始数值
        this.option.dataZoom[0].endValue = 4 // 数据窗口范围的结束数值
      } else {
      // 依次向下滚动
        this.option.dataZoom[0].startValue = this.option.dataZoom[0].startValue + 1 // 数据窗口范围的起始数值
        this.option.dataZoom[0].endValue = this.option.dataZoom[0].endValue + 1 // 数据窗口范围的结束数值
      }
    }, 3000)