数字化大屏地图轮播的实现echarts

地图轮播实现需要随着时间的推移，图中的阴影部分轮播，一开始拿到这个需求的时候我是毫无头绪，这是公司大佬实现的，这里我拿来进行学习和总结，希望能帮到有需要的伙伴。

echarts地图组件的基本配置我就不拿出来了，轮播的核心原理就是手动的给地图进行高亮的显示，配合定时器进行，主要是用到了echarts原生api方法，myChart.dispatchAction，这个方法可以对地图组件的高亮行为进行修改，在设定一个定时器进行地图区域的随机显示，地图轮播的行为就实现了。以下是轮播的主要的代码逻辑：

 //高亮轮播展示

      var hourIndex = 0; //声明要显示的区域

      this.carouselTime = null;  每次触发设置定时器为null

      //setInterval() 可在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除

      this.carouselTime = setInterval(() => {

        //dispatchAction echarts的API：触发图表行为

        myChart.dispatchAction({

          type: "downplay", //downplay 取消高亮指定的数据图形

          seriesIndex: 0,

        });

        myChart.dispatchAction({

          type: "highlight", //highLight 高亮指定的数据图形

          seriesIndex: 0, //系列index

          dataIndex: hourIndex, //数据index,要显示的区域

        });

        myChart.dispatchAction({

          type: "showTip", //showTip 显示提示框

          seriesIndex: 0,

          dataIndex: hourIndex,//数据index,要显示的区域

        });

        hourIndex++; //区域显示随时间叠加

        //当循环到数组当中的最后一条数据后，重新进行循环

        if (hourIndex > 32) {  //数据满足之后重新进行轮播

          hourIndex = 0;

        }

      }, 3000);

除此之外，对一些鼠行为进行处理：

//鼠标移入组件时停止轮播

      myChart.on("mousemove", (e) => {

        clearInterval(this.carouselTime); //清除循环

        myChart.dispatchAction({

          type: "downplay",

          seriesIndex: 0,

        });

        myChart.dispatchAction({

          type: "highlight",

          seriesIndex: 0,

          dataIndex: e.dataIndex,

        });

        myChart.dispatchAction({

          type: "showTip",

          seriesIndex: 0,

          dataIndex: e.dataIndex,

        });

      });

      //鼠标移出组件时恢复轮播

      myChart.on("mouseout", () => {

        this.carouselTime = setInterval(() => {

          myChart.dispatchAction({

            type: "downplay",

            seriesIndex: 0,

          });

          myChart.dispatchAction({

            type: "highlight",

            seriesIndex: 0,

            dataIndex: hourIndex,

          });

          myChart.dispatchAction({

            type: "showTip",

            seriesIndex: 0,

            dataIndex: hourIndex,

          });

          hourIndex++;

          if (hourIndex > 32) {

            hourIndex = 0;

          }

        }, 2000);

      });

// 鼠标点击区域时执行的操作

      myChart.on("click", () => {

        // console.log(this.name);

        //this.$emit("pulldata", this.name);

      });

切记：定时器在不用时记得清除，clearInterval（），否则会造成内存泄漏。