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

直播平台源代码，数字化大屏地图轮播的实现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);
 
      });

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