饼状图 自动轮巡展示

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);
      });
    },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值