要在ECharts中同时展示饼图数据的数量和百分比,可以使用ECharts中的formatter功能。下面是一个简单的示例,演示如何在饼图中显示数量和百分比:
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}%)
作为标签文本的格式,这样标签也会同时显示数据值和百分比。