echarts饼图自动显示数据

最新推荐文章于 2026-03-25 11:47:50 发布

原创最新推荐文章于 2026-03-25 11:47:50 发布 · 2.4w 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#echarts饼图自动显示数据

收录于

echarts 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在ECharts饼图中直接显示数据值及百分比。通过设置itemStyle.normal.label.show为true，并使用formatter参数定义显示格式，可以实现在饼图上直观地展示各部分数据的具体数值和所占比例。

在做echarts饼图的时候，默认是不显示数据，现在要直接把数据显示在上面，代码如下：

  series: [
        {
            name: '处理状态',
            type: 'pie',
            radius: ['50%', '70%'],
            itemStyle: {
                normal: {label:{
            		show:true,
            		formatter:'{b} : {c} ({d}%)'
            	},
            	labelLine:{show:true}},
                emphasis: {
                    label: {
                        show: true,
                        formatter: "{b}\n{c} ({d}%)",
                        position: 'center',
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                }
            },
            data: pie_data
        }
    ]

主要是在normal中加了里面的代码，就可以显示了，效果如下：