饼状图 自动轮巡展示

getMsg() {
      var myChart = echarts.init(document.getElementById("left"));
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)"
        },
        legend: {
          bottom: 10,
          left: "center",
          data: this.topInfo.list,
          textStyle: {
            color: "#333333",
            fontSize: "10",
            fontWeight: 400
          },
          type: "scroll"
        },
        series: [
          {
            type: "pie",
            radius: "65%",
            center: ["50%", "45%"],
            selectedMode: "single",
            data: this.topInfo.details,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      console.log(myChart);
      myChart.setOption(option);
      const selectPie = () => {
        var dataLen = option.series[0].data.length;
        currentIndex = (currentIndex + 1) % dataLen;
        highlightPie();
      };
      let currentIndex = -1; // 当前高亮图形在饼图数据中的下标
      let changePieInterval = setInterval(selectPie, 2000); // 设置自动切换高亮图形的定时器
      const highlightPie = () => {
        // 取消所有高亮并高亮当前图形
        // 遍历饼图数据,取消所有图形的高亮效果
        for (var idx in option.series[0].data)
          myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: idx
          });
        // 高亮当前图形
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: currentIndex
        });
        // 提示
        myChart.dispatchAction({
         type: 'showTip',
         seriesIndex: 0,
         dataIndex: currentIndex
     });
      };
      myChart.on("mouseover", params => {
        // 用户鼠标悬浮到某一图形时,停止自动切换并高亮鼠标悬浮的图形
        clearInterval(changePieInterval);
        currentIndex = params.dataIndex;
        highlightPie();
      });

      myChart.on("mouseout", () => {
        // 用户鼠标移出时,重新开始自动切换
        if (changePieInterval) clearInterval(changePieInterval);
        changePieInterval = setInterval(selectPie, 2000);
      });
    },

你可能感兴趣的:(echarts,javascript)