1、业务需求
将数据显示在饼图内部,格式化百分比显示,鼠标放上去显示具体名称和数值
原样式如下
2、业务实现
调整代码如下,核心语句已标记注释
option = {
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [{
value: 1048,
name: 'Search Engine'
},
{
value: 735,
name: 'Direct'
},
{
value: 580,
name: 'Email'
},
{
value: 484,
name: 'Union Ads'
},
{
value: 300,
name: 'Video Ads'
}],
radius: '50%',
center: ['50%', '50%'], // 这个属性可以调整图像的位置,左面所示为中心
label: {
normal: {
show: true,
position: 'inner', // 数值显示在内部
formatter: '{d}%', // 格式化数值百分比输出
},
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
更改后效果如下图所示
3)附录
ECharts 提示框组件Tooltip属性大全(包含文本注释)