直播平台源代码，数字化大屏地图轮播的实现echarts

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

<br> //高亮轮播展示<br> <br>      var hourIndex = 0; //声明要显示的区域<br> <br>      this.carouselTime = null;  每次触发设置定时器为null<br> <br>      //setInterval() 可在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除<br> <br>      this.carouselTime = setInterval(() => {<br> <br>        //dispatchAction echarts的API：触发图表行为<br> <br>        myChart.dispatchAction({<br> <br>          type: "downplay", //downplay 取消高亮指定的数据图形<br> <br>          seriesIndex: 0,<br> <br>        });<br> <br>        myChart.dispatchAction({<br> <br>          type: "highlight", //highLight 高亮指定的数据图形<br> <br>          seriesIndex: 0, //系列index<br> <br>          dataIndex: hourIndex, //数据index,要显示的区域<br> <br>        });<br> <br>        myChart.dispatchAction({<br> <br>          type: "showTip", //showTip 显示提示框<br> <br>          seriesIndex: 0,<br> <br>          dataIndex: hourIndex,//数据index,要显示的区域<br> <br>        });<br> <br>        hourIndex++; //区域显示随时间叠加<br> <br>        //当循环到数组当中的最后一条数据后，重新进行循环<br> <br>        if (hourIndex > 32) {  //数据满足之后重新进行轮播<br> <br>          hourIndex = 0;<br> <br>        }<br> <br>      }, 3000);

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

<br>//鼠标移入组件时停止轮播<br> <br>      myChart.on("mousemove", (e) => {<br> <br>        clearInterval(this.carouselTime); //清除循环<br> <br>        myChart.dispatchAction({<br> <br>          type: "downplay",<br> <br>          seriesIndex: 0,<br> <br>        });<br> <br>        myChart.dispatchAction({<br> <br>          type: "highlight",<br> <br>          seriesIndex: 0,<br> <br>          dataIndex: e.dataIndex,<br> <br>        });<br> <br>        myChart.dispatchAction({<br> <br>          type: "showTip",<br> <br>          seriesIndex: 0,<br> <br>          dataIndex: e.dataIndex,<br> <br>        });<br> <br>      });<br> <br>      //鼠标移出组件时恢复轮播<br> <br>      myChart.on("mouseout", () => {<br> <br>        this.carouselTime = setInterval(() => {<br> <br>          myChart.dispatchAction({<br> <br>            type: "downplay",<br> <br>            seriesIndex: 0,<br> <br>          });<br> <br>          myChart.dispatchAction({<br> <br>            type: "highlight",<br> <br>            seriesIndex: 0,<br> <br>            dataIndex: hourIndex,<br> <br>          });<br> <br>          myChart.dispatchAction({<br> <br>            type: "showTip",<br> <br>            seriesIndex: 0,<br> <br>            dataIndex: hourIndex,<br> <br>          });<br> <br>          hourIndex++;<br> <br>          if (hourIndex > 32) {<br> <br>            hourIndex = 0;<br> <br>          }<br> <br>        }, 2000);<br> <br>      });<br> <br>// 鼠标点击区域时执行的操作<br> <br>      myChart.on("click", () => {<br> <br>        // console.log(this.name);<br> <br>        //this.$emit("pulldata", this.name);<br> <br>      });

以上就是直播平台源代码，数字化大屏地图轮播的实现echarts，更多内容欢迎关注之后的文章