echarts map地图自动高亮 轮播高亮状态，鼠标移入取消轮播

用dispatchAction修改地图当前状态，绘制地图后调用myChartChange

....
      this.myChart = echarts.init(document.getElementById("hzChart"));
      this.myChart.setOption(option);
      this.myChartChange();
},
myChartChange() {
      clearInterval(this.toolTipTimers);
      let index = this.index;
      this.toolTipTimers = setInterval(() => {
      // downplay取消上一个
        this.myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: index == 0 ? this.mapData.length - 1 : index - 1, // 取消高亮
        });
        // highlight高亮下一个
        this.myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: index, // 第几高亮
        });
        //showTip展示相应提示框
        this.myChart.dispatchAction({
          type: "showTip", // 提示框
          seriesIndex: 0,
          name: this.mapData[index]?.name, // 第几高亮
        });
        //如果是最后一个了就从头开始
        if (index == this.mapData.length - 1) index = 0;
        else index++;
        this.index = index;
      }, 3000);
    },

以上可以自动轮播地图高亮，但是鼠标移入后会出现两个高亮，所以要在鼠标移入后取消以上的操作
主要用mouseover和mouseout事件配合

 // 鼠标移入的时候 取消高亮 并且取消定时器
     this.myChart.on("mouseover", (params) => {
        this.myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: this.index == 0 ? this.mapData.length - 1 : this.index - 1, // 取消高亮
        });
        clearInterval(this.toolTipTimers);
      });
      
      //鼠标移出继续轮播高亮
      this.myChart.on("mouseout", (params) => {
        this.myChartChange();
      });

提示：离开页面取消定时器

beforeDestroy() {
    if (this.toolTipTimers) {
      clearInterval(this.toolTipTimers); // 在Vue实例销毁前，清除我们的定时器
    }
  },