目标效果(连接线与饼图存在间隔):
Echarts饼图label配置为outside时,默认连接线与图形直接相连:
实现方案:绘制时,同时绘制两个半径不同的饼图。一个只显示饼图(半径较小),不显示label;另一个饼图(半径较大),设置为透明,只显示label和连接线。
Echarts series的配置:
option.series = [
// 只显示饼图,不显示label和连接线
{
type: 'pie',
startAngle: 180,
minAngle: 15,
radius: ['30%', '65%'],
label: {
show: false,
},
animationTypeUpdate: 'expansion',
animationDurationUpdate: 1000,
data: res.data.series.filter((item) => {
return item.value != 0
})
},
// 饼图设置为透明,只显示label和连接线
{
type: 'pie',
startAngle: 180,
minAngle: 15,
radius: ['65%', '70%'],
avoidLabelOverlap: true,
label: {
position: 'outer',
alignTo: 'edge',
margin: 10,
show: true,
},
labelLine: {
normal: {
length2: 250,
length: 10,
lineStyle: {
color: 'rgba(255, 255, 255, 0.45)'
}
},
},
// 设置为透明
itemStyle: {
opacity: 0,
},
data: res.data.series.filter((item) => {
return item.value != 0
}),
}
]