本文介绍如何在ECharts中实现饼图同时显示内部百分比和外部指示线。通过配置series数组，利用两个重合的series对象分别设置label的position为inside和outside，并结合formatter回调函数，完美解决单series无法同时展示内外标签的问题。
需求
在开发过程中，根据产品经理的原型设计，前端需要实现一个饼状图，要求该图表既能显示内部的百分比数值，又能展示外部的指示线及对应数值。
最终效果如下图所示：
查阅Echarts官方文档后
发现需要配置series下的label配置项
具体配置如下所示：
series: [
label: {
normal: {
position: 'inside' // 在内部显示，outseide 是在外部显示
show: true,
formatter: '{c} // formatter 是标签内容的格式器，用于转换格式。支持 字符串和回调函数两种形式。
}
}
]
其中，formatter参数用于定义标签内容的格式，支持字符串模板和回调函数两种形式。
字符串模板中常用的变量包括：
{c} 表示数据值的字符串模板变量，常用的模板变量包括：
- {a}：系列名称
- {b}：数据名称
- {c}：数据值
- {d}：百分比
问题所在
ECharts似乎无法直接在单个series中同时配置内部和外部的label显示。
因为在一个series对象中，只能设置一个label属性。
不过这个问题很容易解决
通过查看Echarts官网series配置项可知，series是一个数组。既然单个对象只能设置一个label，我们可以配置两个（或多个）相同的series对象，使它们重合。这样就能同时显示两个label：一个在内部展示，另一个在外部展示，从而完美解决该需求。
代码实例如下所示：
series: [
{
type: 'pie',
radius: '90%',
data: [
{ value: data?.winBidNumber || 0, name: '中标数量' },
{ value: data?.loseBidNumber || 0, name: '未中标数量' },
{ value: data?.abandonBidNumber || 0, name: '弃标数量' }
],
labelLine: {
show: true,
position: 'outside',
length: 10,
length2: 50
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
label: {
normal: {
position: 'outside',
show: true,
formatter: (d: any) => {
console.log(222, d);
return d.name + '（' + d.value + '次' +'）'
}
}
}
},
{
type: 'pie',
radius: '90%',
data: [
{ value: data?.winBidNumber || 0, name: '中标数量' },
{ value: data?.loseBidNumber || 0, name: '未中标数量' },
{ value: data?.abandonBidNumber || 0, name: '弃标数量' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
label: {
normal: {
position: 'inside',
show: true,
formatter: (d: any) => {
return d.percent + '%'
}
}
}
}
]
其中，labelLine属性用于配置外部指示线（第一段、第二段）的长度及样式。
formatter采用回调函数写法，如上述代码实例所示。该回调函数接收一个参数，该参数包含了模板字符串变量所对应的值。
打印结果如下图所示：
总结
以上为个人经验分享，希望能给大家提供参考，也希望大家多多支持本站。