echart柱状图过多滚动，动态滚动

内容过多，页面太小展示不全可以用option.dataZoom，按住鼠标前后拖动柱状图

    dataZoom: [
          // 滑动条
          {
            xAxisIndex: 0, // 这里是从X轴的0刻度开始
            show: false, // 是否显示滑动条，不影响使用 滚动条样式调不好很丑
            type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 4, // 一次性展示几个。
            moveHandleSize: 6, // 高度
            fillerColor: "#023661", // 选中范围的填充颜色
            borderColor: "#023661", // 边框颜色。
            backgroundColor: "#023661", // 组件的背景颜色
            left: "10%", // 左边的距离
            right: "10%", // 右边的距离
            textStyle: {
              color: "#fff", // 滚动条两边字体样式
            },
            height: "1%",
          },
          {
            type: "inside",
            show: true,
            xAxisIndex: [0],
            start: 0, // 默认为1
            end: 100, // 默认为100
            moveOnMouseWheel: false,
            preventDefaultMouseMove: false,
          },
        ],

动态滚动需要用到setInterval

 clearInterval(this.timers); 
 this.timers = setInterval(() => {
        // 每次向后滚动一个，最后一个从头开始。 arr是柱状图原始数据数组
        if (option.dataZoom[0].endValue == arr.length + 1) {
          option.dataZoom[0].endValue = 4; // 跟上面endValue配置一样
          option.dataZoom[0].startValue = 0;
        } else {
          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
        }
        myChartCategory.setOption(option);
      }, 5000);
      ...
      
// 记住离开页面销毁定时器
 beforeDestroy() {
    if (this.timers) {
      clearInterval(this.timers); // 在Vue实例销毁前，清除我们的定时器
    }
  },