ECharts饼图指引线自定义圆点详解
本文将详细介绍如何在ECharts饼图的指引线末端添加自定义圆点，并提供一种高效简洁的解决方案。 假设您已具备ECharts的基本使用经验。
许多开发者尝试在饼图指引线末端添加圆点时，会遇到一些挑战。例如，直接在label.formatter中添加圆点，会导致圆点位置与指引线末端错位，通常出现在文字右侧。 使用两个饼图叠加的方法虽然可行，但由于标签重叠和hover事件处理的复杂性，容易导致圆点显示不稳定。
本文提供了一种更优的方案：利用label.formatter和label.rich属性的组合。无需创建额外的饼图，即可轻松实现目标效果。
以下代码片段展示了如何通过配置label属性来实现指引线末端自定义圆点：
let echartData = [
{ name: 'A类', value: '3720' },
{ name: 'B类', value: '2920' },
// ... 其他数据
];
option = {
series: [{
name: '下月应收件保费占比最高的产品',
type: 'pie',
radius: ['43%', '73.4%'],
center: ['50%', '50%'],
hoverAnimation: false,
data: echartData,
label: {
normal: {
formatter: (params) => `{icon|●}{name|${params.name}}\n{value|${params.value}}`,
rich: {
icon: { fontSize: 16, color: 'inherit' },
name: { fontSize: 18, padding: [0, 0, 0, 10], color: '#000' },
value: { fontSize: 14, fontWeight: 'bolder', padding: [10, 0, 0, 20], color: 'inherit' }
}
}
}
}]
};
代码的关键在于label.formatter和label.rich的协同工作。formatter函数将自定义圆点图标{icon|●}放置在标签文本的最前面。label.rich属性则分别定义了圆点和文本的样式，确保圆点与指引线末端精确对齐，并与文本内容清晰区分。 通过调整padding属性，您可以微调圆点和文本在标签中的位置，以获得最佳的视觉效果。 这种方法避免了叠加饼图的复杂性，并提供了一个更简洁、更稳定的解决方案。 请根据您的实际数据调整字体大小等属性以获得最佳显示效果。
