ECharts饼图指引线如何添加自定义圆点？

在ECharts中，饼图的指引线（label line）可以通过配置 labelLine 属性来自定义样式。如果你想在指引线的末端添加自定义圆点，可以通过以下步骤实现：

1. 使用 labelLine 配置指引线

首先，你需要在饼图的 series 配置中启用 labelLine，并设置其样式。

option = {
    series: [
        {
            type: 'pie',
            data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
            ],
            label: {
                show: true,
                formatter: '{b}: {c}'
            },
            labelLine: {
                show: true,
                length: 20,  // 指引线第一段的长度
                length2: 30, // 指引线第二段的长度
                lineStyle: {
                    color: '#999', // 指引线颜色
                    width: 1,     // 指引线宽度
                    type: 'solid'  // 指引线类型
                }
            }
        }
    ]
};

2. 使用 graphic 添加自定义圆点

ECharts 提供了 graphic 组件，可以用来在图表中添加自定义的图形元素。你可以使用 graphic 在指引线的末端添加圆点。

option = {
    graphic: [
        {
            type: 'circle',
            shape: {
                cx: 0, // 圆点的x坐标
                cy: 0, // 圆点的y坐标
                r: 5  // 圆点的半径
            },
            style: {
                fill: '#ff0000' // 圆点的填充颜色
            },
            // 使用 `position` 属性将圆点定位到指引线的末端
            position: [chartWidth / 2, chartHeight / 2] // 这里需要根据实际情况计算位置
        }
    ],
    series: [
        {
            type: 'pie',
            data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
            ],
            label: {
                show: true,
                formatter: '{b}: {c}'
            },
            labelLine: {
                show: true,
                length: 20,
                length2: 30,
                lineStyle: {
                    color: '#999',
                    width: 1,
                    type: 'solid'
                }
            }
        }
    ]
};

3. 动态计算圆点位置

由于饼图的指引线位置是动态生成的，因此你需要根据指引线的实际位置动态计算圆点的位置。你可以通过 ECharts 的 API 获取指引线的坐标，然后根据这些坐标来设置圆点的位置。

myChart.on('rendered', function (params) {
    var series = myChart.getModel().getSeries()[0];
    var data = series.getData();
    var points = [];

    data.each(function (idx) {
        var labelLinePoints = data.getItemLayout(idx).labelLinePoints;
        if (labelLinePoints) {
            points.push({
                x: labelLinePoints[2][0],
                y: labelLinePoints[2][1]
            });
        }
    });

    var graphics = points.map(function (point) {
        return {
            type: 'circle',
            shape: {
                cx: point.x,
                cy: point.y,
                r: 5
            },
            style: {
                fill: '#ff0000'
            }
        };
    });

    myChart.setOption({
        graphic: graphics
    });
});

4. 完整示例

以下是一个完整的示例，展示了如何在饼图的指引线末端添加自定义圆点：

var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: [
        {
            type: 'pie',
            data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
            ],
            label: {
                show: true,
                formatter: '{b}: {c}'
            },
            labelLine: {
                show: true,
                length: 20,
                length2: 30,
                lineStyle: {
                    color: '#999',
                    width: 1,
                    type: 'solid'
                }
            }
        }
    ]
};

myChart.setOption(option);

myChart.on('rendered', function (params) {
    var series = myChart.getModel().getSeries()[0];
    var data = series.getData();
    var points = [];

    data.each(function (idx) {
        var labelLinePoints = data.getItemLayout(idx).labelLinePoints;
        if (labelLinePoints) {
            points.push({
                x: labelLinePoints[2][0],
                y: labelLinePoints[2][1]
            });
        }
    });

    var graphics = points.map(function (point) {
        return {
            type: 'circle',
            shape: {
                cx: point.x,
                cy: point.y,
                r: 5
            },
            style: {
                fill: '#ff0000'
            }
        };
    });

    myChart.setOption({
        graphic: graphics
    });
});

总结

通过结合 labelLine 和 graphic 组件，你可以在 ECharts 饼图的指引线末端添加自定义圆点。需要注意的是，圆点的位置需要根据指引线的实际位置动态计算，以确保圆点能够准确地显示在指引线的末端。