需求
项目开发中，产品经理绘制的原型图中，需要前端实现一个饼状图，且既在饼图内部中 显示 百分比，又显示 外部指示线及数值，效果如下图所示：
查了下 Echarts 官网文档，需要配置 series 下的 label 配置项，如下所示：
series: [
label: {
normal: {
position: 'inside' // 在内部显示，outseide 是在外部显示
show: true,
formatter: '{c} // formatter 是标签内容的格式器，用于转换格式。支持 字符串和回调函数两种形式。
}
}
]
其中，formatter 是标签内容的格式器，用于转换格式。支持 字符串和回调函数两种形式。
{c} 代办字符串模板变量，表示数据值，常用的模板变量有：
{ a }：系列名{ b }：数据名{ c }：数据值{ d }：百分比
不过问题来了，echarts 好像没法直接配置成 内部+外部 同时展示的情况。，因为在单个的 series 中（即其中的一个对象中），只能设置一个label。
不过也好解决，通过查看 echarts 官网 series 配置项，可以看出，series 是一个数组（如上图所示），既然单个中只能出现一个，那么我配置成 2个（多个）相同的对象，让他们重合，就会出现两个 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 为 回调函数的写法如上面的代码实例，该回调函数接收一个参数，该参数的值包含了 模板字符串变量所拥有的值，如下图打印的所示：
参考阅读
您阅读本篇文章共花了：
发表评论