echarts饼图标签formatter使用及饼图自定义标签
1. formatter使用
在echarts中,饼图的标签可以通过formatter属性来进行自定义。formatter是一个回调函数,用于控制标签的显示格式。
1.1 格式化函数的语法
formatter: function(param) {
// param为当前标签的数据项
// 返回需要展示的标签内容
}
1.2 参数说明
- param: 当前标签的数据项对象,包含各种属性,如
param.name
表示标签名称,param.percent
表示所占比例等。
1.3 示例
option = {
series: [
{
type: 'pie',
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' }
],
label: {
show: true,
position: 'outside',
formatter: function(param) {
return param.percent + '%'; // 显示百分比
}
}
}
]
};
在上述示例中,formatter函数将标签内容设置为所占比例的百分比。
2. 饼图自定义标签
除了使用formatter来自定义标签内容外,还可以通过悬浮框样式和富文本格式来实现更复杂的标签效果。
2.1 悬浮框样式
使用textStyle
属性来设置文本样式,如字体大小、颜色等。
option = {
series: [
{
type: 'pie',
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' }
],
label: {
show: true,
position: 'outside',
textStyle: {
fontSize: 14,
color: '#333'
},
formatter: '{b}: {c}'
}
}
]
};
在上述示例中,formatter: '{b}: {c}'
表示将标签设置为名称和对应数值的组合。
2.2 富文本格式
使用rich
属性可以实现更复杂的标签样式,如分行显示、不同文本样式等。
option = {
series: [
{
type: 'pie',
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' }
],
label: {
show: true,
position: 'outside',
textStyle: {
fontSize: 14,
color: '#333'
},
formatter: function(param) {
return `{a|${param.name}}\n{b|${param.percent}%}`;
},
rich: {
a: {
color: '#666',
fontSize: 12
},
b: {
color: '#EE0000',
fontSize: 14
}
}
}
}
]
};
在上述示例中,通过rich属性定义了两个样式,a
用于标签名称,b
用于所占比例的百分比。通过使用{a|}
和{b|}
表示使用对应的样式。
以上就是关于echarts饼图标签formatter使用及饼图自定义标签的完整攻略。通过使用formatter属性和悬浮框样式、富文本格式等技巧,可以灵活地定制饼图标签的显示效果。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:echarts饼图标签formatter使用及饼图自定义标签 - Python技术站