echarts饼图同时展示数量和百分比
要在ECharts中同时展示饼图数据的数量和百分比,可以使用ECharts中的formatter功能。下面是一个简单的示例,演示如何在饼图中显示数量和百分比:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | option = { tooltip: { trigger: 'item' , formatter: "{a} <br/>{b}: {c} ({d}%)" }, series: [ { name: '访问来源' , type: 'pie' , radius: [ '50%' , '70%' ], avoidLabelOverlap: false , label: { show: true , formatter: '{b}: {c} ({d}%)' }, emphasis: { label: { show: true , fontSize: '30' , fontWeight: 'bold' } }, labelLine: { show: true }, data: [ {value: 335, name: '直接访问' }, {value: 310, name: '邮件营销' }, {value: 234, name: '联盟广告' }, {value: 135, name: '视频广告' }, {value: 1548, name: '搜索引擎' } ] } ] }; |
在这个示例中,formatter函数用于设置鼠标悬停时显示的文本内容。{a}
表示系列名, {b}
表示数据项名称, {c}
表示数据值, {d}
表示百分比。通过设置 formatter: "{a} <br/>{b}: {c} ({d}%)"
,我们可以在饼图上同时显示数据值和百分比。
同时,在 series
中的 label
属性中,我们设置了 {b}: {c} ({d}%)
作为标签文本的格式,这样标签也会同时显示数据值和百分比。
本文来自博客园,作者:根号三先生,转载请注明原文链接:https://www.cnblogs.com/sin3degree/p/17144325.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步