解决鼠标快速移入柱状图不停止滚动问题

echartsTwo(val).then(response => {
        if (response.success) {
          const data = response.data;
          const codeData = data.codes;
          const xAxisData = data.name; // 获取count数组
          const seriesData = data.count; // 获取name数组
          const chartDom = document.getElementById('echartsContainer');
          chartDom.removeAttribute('_echarts_instance_');
          const myChart = this.$echarts.init(chartDom, null);
// 初始展示数据个数
          const initialDataCount = 15;
          let startIndex = 0;
          let endIndex = initialDataCount - 1;

          const option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow',
              },
            },
            grid: {
              width: '80%', // 设置宽度为容器宽度的 80%
              height: '70%', // 设置高度为容器高度的 60%
              top: '16%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              data: xAxisData,
              axisTick: {
                show: false
              },
              axisLabel: { // 坐标轴刻度标签的相关设置。
                formatter: function(params) {
                  let newParamsName = '';// 最终拼接成的字符串
                  let paramsNameNumber = params.length;// 实际标签的个数
                  let provideNumber = 3;// 每行能显示的字的个数
                  let rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
                  /**
                   * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                   */
                  // 条件等同于rowNumber>1
                  if (paramsNameNumber > provideNumber) {
                    /** 循环每一行,p表示行 */
                    for (let p = 0; p < rowNumber; p++) {
                      let tempStr = '';// 表示每一次截取的字符串
                      let start = p * provideNumber;// 开始截取的位置
                      let end = start + provideNumber;// 结束截取的位置
                      // 此处特殊处理最后一行的索引值
                      if (p === rowNumber - 1) {
                        // 最后一次不换行
                        tempStr = params.substring(start, paramsNameNumber);
                      } else {
                        // 每一次拼接字符串并换行
                        tempStr = params.substring(start, end) + '\n';
                      }
                      newParamsName += tempStr;// 最终拼成的字符串
                    }
                  } else {
                    // 将旧标签的值赋给新标签
                    newParamsName = params;
                  }
                  // 将最终的字符串返回
                  return newParamsName
                },
                textStyle: {
                  fontSize: 14,
                  color: '#000'
                }
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#000',
                  width: 1,
                  type: 'solid'
                }
              }
            },
            yAxis: {
              type: 'value',
            },
            series: [
              {
                name: '登录数量',
                type: 'bar',
                data: seriesData,
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#000'
                  }
                },
                barWidth: '30px',
                itemStyle: {
                  normal: {
                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: '#6aa4fc',
                    }, {
                      offset: 1,
                      color: '#FF9C6A'
                    }]),
                  },
                },
              },
            ],
            dataZoom: {
              show: true, // 是否显示滑动条
              xAxisIndex: 0, // 这里是从X轴的0刻度开始
              startValue: 0, // 数据窗口范围的起始数值
              endValue: initialDataCount // 数据窗口范围的结束数值(一次性展示几个)
            }
          };
          myChart.setOption(option);
          // 更新数据区域范围
          function updateDataZoom() {
            myChart.setOption({
              dataZoom: [{
                startValue: startIndex,
                endValue: endIndex,
              }],
            });
          }
// 定时器，每隔一定时间更新数据区域范围
          let interval;
          function startInterval() {
            interval = setInterval(() => {
              // 每次更新移动一个数据项的范围
              startIndex++;
              endIndex++;
              // 当达到数据末尾时，循环重置到起点
              if (endIndex >= xAxisData.length) {
                startIndex = 0;
                endIndex = initialDataCount - 1;
              }
              // 更新数据区域范围
              updateDataZoom();
            }, 1000); // 每隔1秒更新一次
          }
          startInterval(); // 初始启动定时器
// 添加鼠标悬停事件监听器
          let zRender = myChart.getZr();
          myChart.on('mouseover', function () {
            clearInterval(interval);
          });
          myChart.on('mouseout', function () {
            startInterval();
          });
          zRender.on('mousemove', () => {
            clearInterval(interval);
          });
          zRender.on('globalout', () => {
            startInterval();
          });
          myChart.on('click', (params) => {
            const clickedIndex = params.dataIndex;
            this.queryVO.innerCode= codeData[clickedIndex];
            clickEcharts(this.queryVO).then(response => {
              this.yddlData=response.data.dataTwo;
              this.total2=response.data.count
            })
            this.recordVisible = true;
            this.loading = false;
          });
          window.addEventListener('resize', function() {
            myChart.resize();
          })
        }else {
          this.text = '暂无数据';
        }
      }).catch(error => {