直播平臺原始碼，數字化大屏地圖輪播的實現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， 更多內容歡迎關注之後的文章