Echarts 饼状图实现自动高亮扇面

最新推荐文章于 2025-05-28 11:15:14 发布

罗胖胖

最新推荐文章于 2025-05-28 11:15:14 发布

阅读量6.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Echarts 文章标签： Echarts

本文链接：https://blog.youkuaiyun.com/luoyali/article/details/79291717

Echarts 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用ECharts实现的动态效果——定时高亮饼状图中的不同扇区。通过设置定时器，每隔几秒自动切换图表中的高亮区域，并展示相应的提示信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在网上找了很多案例，基本上都不太符合自己想要的，这里想要饼状图中的每一个区域在定时器的作用下，每隔几秒高亮其中一个扇面，代码思路如下：

1、引用echarts.min.js版本号以3.x.为例

# 饼状图容器
<div id="twoEchart" style="width: 210px;height: 100%"></div>

2、饼状图详情实例

var myChart1 = echarts.init(document.getElementById('twoEchart'));

var option1 = {
            color: ['#1e33ff', '#008fff', '#552de1', '#4f1577', '#50befe', '#c95be9', '#1221b4'],
            tooltip: {
                trigger: 'item',
                backgroundColor: 'none',
                textStyle: {
                    fontSize: 12,
                    fontFamily: 'Microsoft YaHei'
                },
                position: function (point, params, dom, rect, size) {
                    $(dom).html('<div class="tip">\n' +
                        '        <span class="name">' + params.name + '</span>\n' +
                        '        <div class="num">' + params.value + '<span class="name">家</span></div>\n' +
                        '    </div>');

                    return 'inside'
                }
            },
            series: [
                {
                    type: 'pie',
                    radius: '80%',
                    center: ['50%', '50%'],
                    label: {
                        normal: {
                            show: false
                        }
                    },
                    hoverOffset: 20,
                    startAngle: 90,
                    data: [
                        {value: 335, name: '小型企业'},
                        {value: 310, name: '一般工业企业'},
                        {value: 234, name: '第三产业'},
                        {value: 135, name: '建筑施工'},
                        {value: 1548, name: '畜禽养殖业'},
                        {value: 580, name: '污水处理厂'},
                        {value: 400, name: '固废处置单位'}
                    ]
                }
            ]
        };
myChart1.setOption(option1);

 var app = {
     currentIndex: -1
 };

 setInterval(function () {
     var dataLen = option1.series[0].data.length;
     // 取消之前高亮的图形
     myChart1.dispatchAction({
         type: 'downplay',
         seriesIndex: 0,
         dataIndex: app.currentIndex
     });
     app.currentIndex = (app.currentIndex + 1) % dataLen;
     // 高亮当前图形
     myChart1.dispatchAction({
         type: 'highlight',
         seriesIndex: 0,
         dataIndex: app.currentIndex
     });
     // 显示 tooltip
     myChart1.dispatchAction({
         type: 'showTip',
         seriesIndex: 0,
         dataIndex: app.currentIndex
     });
 }, 3000);

3、echarts中tooltip的dom样式文件

 .tip{
    width: 100%;
    height: 100%;
    display:flex;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
.name{
     font-size: 12px;
   }
   .num{
     font-size: 18px;
   }

4、效果图如下

这里写图片描述