学习使用echarts在饼图上设置显示百分比、内容、字体及大小、位置
关键属性position
series: [
{
name: '访问来源',
type: 'pie',
radius: '50%',
label: {
//饼图图形上的文本标签
normal: {
show: true,
position: 'inner', //标签的位置
textStyle: {
fontWeight: 300,
fontSize: 16 //文字的字体大小
},
formatter: '{b}{c}人占比{d}%'
}
},
data: [
{
value: 1048, name: '搜索引擎'},
{
value: 735, name: '直接访问'},
{
value: 580, name: '邮件营销'},
{
value: 484, name: '联盟广告'},
{
value: 300, name: '视频广告'}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
修改前效果图:
修改后效果图:
修改百分比位数
自带的{d}%默认保留两位小数,如需修改小数位数,需要自己写一