echarts柱状图实现自动滚动

methods: {
    
    
  initChart() {
    
    
    this.chart = echarts.init(this.$refs.chart);
    const option = {
    
    
      // ...其他配置项省略
      // dataList就是柱状图数据
      dataZoom: {
    
    
        type: "slider",
        show: this.dataList.length > 7 ? true : false,
        startValue: 0,
        endValue: 6,
        height: 10,
        bottom: 5,
        showDetail: false,
        showDataShadow: false,
        fillerColor: "rgba(0, 75, 177, 0.8)",
        borderColor: "transparent",
        zoomLock: true,
        brushSelect: false,
        handleStyle: {
    
    
          opacity: 0,
        },
        animation: true,
        animationDurationUpdate: 1000,
      },
    };
    this.chart.setOption(option);
    this.currentIndex = 0;
    this.clearAutoScroll();
    this.startAutoScroll();
  },
  startAutoScroll() {
    
    
    if (this.dataList.length <= 7) return;
    this.timer = setInterval(() => {
    
    
      const totalLength = this.dataList.length;
      this.currentIndex = (this.currentIndex + 1) % (totalLength - 6);
      this.chart.dispatchAction({
    
    
        type: "dataZoom",
        startValue: this.currentIndex,
        endValue: this.currentIndex + 6,
        animation: {
    
    
          duration: 1000,
          easing: "cubicInOut",
        },
      });
    }, 3000);
  },
  clearAutoScroll() {
    
    
    clearInterval(this.timer);
    this.timer = null;
  },
},