Echarts | 饼图引导线周围文字位置的改变

默认样式：

image.png

需求样式：

image.png

可以看到，二图中文字和线的相对位置是不一样的。需求的样式，可通过设置label > padding和labelLine > length / length2来实现。关键点在于设置一个负的padding。以下为参考代码：

app.title = '环形图';

option = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} 
{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        show: false,
        x: 'left',
        data: ['视频广告', '百度', '谷歌', '必应', '其他']
    },
    series: [
 
        {
            name: '访问来源',
            type: 'pie',
            radius: ['30%', '55%'],
            labelLine: {
                normal: {
                    length: 20,
                    length2: 70,
                    lineStyle: {
                        color: '#333'
                    }
                }
 
            },
            label: {
                normal: {
                    formatter: '{b|{b}}{a|{d}%}\n\n',
                    borderWidth: 20,
                    borderRadius: 4,
                    padding: [0, -70],
                    rich: {
                        a: {
                            color: '#333',
                            fontSize: 12,
                            lineHeight: 20
                        },
                        b: {
                            fontSize: 12,
                            lineHeight: 20,
                            color: '#333'
                        }
                    }
                }
            },
            data: [{
                value: 135,
                name: '视频广告'
            }, {
                value: 1048,
                name: '百度'
            }, {
                value: 251,
                name: '谷歌'
            }, {
                value: 147,
                name: '必应'
            }, {
                value: 102,
                name: '其他'
            }]
        }
    ]

};