echarts 饼图指引线加原点

### 实现 ECharts 饼图中的指引线和原点

在 ECharts 中配置饼图的指引线（即指示线），可以通过 `itemStyle` 和 `emphasis.lineStyle` 属性来调整线条样式，并通过自定义图形元素的方式添加圆点。为了使圆点颜色与指示线保持一致，可以在强调状态下的 `lineStyle.color` 设置相同的颜色。

#### 添加指引线和原点的具体方法如下：

对于饼图而言，在 `series` 的配置项里加入 `labelLine.emphasis.show = true; labelLine.emphasis.length2 = 10;` 可以让鼠标悬停时显示更长的引导线[^1]。而要实现在这些线上加上一个小圆圈，则可以利用 `markPoint` 或者借助于事件监听机制动态创建 SVG 圆形节点附着到画布上；不过更为简便的做法是在 CSS 中定义伪类 ::after 来模拟这个效果[^3]。

下面是一个简单的例子展示如何做到这一点:

// 初始化图表实例
var myChart = echarts.init(document.getElementById('main'));

option = {
    series: [{
        name: '访问来源',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
        },
        emphasis: { // 当鼠标悬浮上去之后的效果
            scale: true,
            focus: 'self'
        },
        labelLine: {
            normal: {},
            emphasis: {
                show: true,
                length2: 10 // 增大长度使得有空间放置圆点
            }
        },
        data:[
            {value:335, name:'直接访问'},
            {value:310, name:'邮件营销'}
        ]
    }]
};

myChart.setOption(option);

在此基础上，如果想要进一步美化并真正意义上添加一个跟随指示线末端移动的小圆点，可能还需要结合 JavaScript 动态计算坐标位置以及操作 DOM 节点完成此功能。