echarts饼图同时展示数量和百分比
要在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}%) 作为标签文本的格式,这样标签也会同时显示数据值和百分比。
本文来自博客园,作者:根号三先生,转载请注明原文链接:https://www.cnblogs.com/sin3degree/p/17144325.html

浙公网安备 33010602011771号