echarts 饼图循环高亮展示

最新推荐文章于 2024-05-14 16:17:58 发布

不想上班只想要钱

最新推荐文章于 2024-05-14 16:17:58 发布

阅读量608

点赞数 4

分类专栏： css echarts 前端文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/Aa12364567/article/details/135979440

版权

前端同时被 3 个专栏收录

177 篇文章 3 订阅

订阅专栏

css

84 篇文章 1 订阅

订阅专栏

echarts

8 篇文章 0 订阅

订阅专栏

echarts 饼图循环高亮展示

在这里插入图片描述

 this.categorychart.setOption(option);
      let currentIndex = 0; // 当前高亮图形在饼图数据中的下标
      selectPie()
      if (this.changePieInterval)
        clearInterval(this.changePieInterval);
      this.changePieInterval = setInterval(selectPie, 5000); // 设置自动切换高亮图形的定时器

      function highlightPie() { // 取消所有高亮并高亮当前图形
        for (var idx in option.series[0].data)
          // 遍历饼图数据，取消所有图形的高亮效果
          that.categorychart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: idx
          });
        // 高亮当前图形
        that.categorychart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: currentIndex
        });
      }

      that.categorychart.on('mouseover', (params) => { // 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形
        if (this.changePieInterval)
          clearInterval(this.changePieInterval);
        currentIndex = params.dataIndex;
        highlightPie();
      });

      that.categorychart.on('mouseout', (params) => { // 用户鼠标移出时，重新开始自动切换
        if (this.changePieInterval)
          clearInterval(this.changePieInterval);
        this.changePieInterval = setInterval(selectPie, 5000);
      });

      function selectPie() { // 高亮效果切换到下一个图形
        var dataLen = option.series[0].data.length;
        currentIndex = (currentIndex + 1) % dataLen;
        highlightPie();
      }