echarts饼图显示百分比

最新推荐文章于 2025-04-17 14:18:46 发布

L_WalkingPig

最新推荐文章于 2025-04-17 14:18:46 发布

阅读量1.7w

点赞数 2

分类专栏： echarts Vue

本文链接：https://blog.youkuaiyun.com/L_WalkingPig/article/details/109054638

版权

Vue 同时被 2 个专栏收录

27 篇文章

订阅专栏

echarts

5 篇文章

订阅专栏

本文介绍了如何使用Echarts创建饼图，并详细讲解了图表的样式配置，包括emphasis和normal状态下的阴影效果、标签显示和连接线设置。通过实例展示了如何自定义百分比显示格式，为数据可视化提供了实用的参考。

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

如图：

series : [{
                name: '类型',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:valuearray,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    normal:{ 
                        label:{ 
                            show: true, 
                            //formatter: '{b} : {c} ({d}%)' //带当前图例名 + 百分比
                            formatter: '{d}%' //只要百分比
                        }, 
                        labelLine :{show:true} 
                    } 
                }
            }
        ]

官方文档：https://echarts.apache.org/zh/option.html#tooltip.formatter

个人记录，仅供参考~