饼图引导线末端加点echarts 饼配置项内容和展示

饼图引导线末端加点,并引导线与饼图有一定距离

配置项如下
      //职称结构取数
var getsjjg = ['小说', '辅助教材', '期刊', '其他'];
var getsjjgrs = [30, 200, 20, 50];
//职称结构图表
var colorList = ['#507AFF', '#51D9A2', '#FFC371', '#797AFF'];
var syjgdata = [];
var list = [];
for (var i = 0; i < getsjjg.length; i++) {
    syjgdata.push({
        name: getsjjg[i],
        value: getsjjgrs[i]
    })
    list.push({
        name: getsjjg[i],
        value: getsjjgrs[i],
        labelLine: {
            lineStyle: {
                color: colorList[i]
            }
        },
        label: {
            color: colorList[i]
        }
    })
}
var rich = {
    cir: {
        padding: 0,
        align: "center",
        verticalAlign: "middle",
        fontSize: 20,
    }
}

option = {
    series: [{
        itemStyle: {
            normal: {
                color: function(params) {
                    return colorList[params.dataIndex]
                }
            }
        },
        type: 'pie',
        radius: ['0%', '50%'],
        center: ["50%", "50%"],
        label: {
            normal: {
                show: false

            }
        },
        data: syjgdata
    }, {
        itemStyle: {
            normal: {
                color: function(params) {
                    return colorList[params.dataIndex]
                }
            }
        },
        type: 'pie',
        silent: true, //取消高亮
        radius: ['0%', '50%'],
        center: ["50%", "50%"],
        labelLine: {
            normal: {
                length: 30,
                length2: 0,
                lineStyle: {
                    color: 'transparent'
                }
            }
        },
        label: {
            normal: {
                padding: [-6, -6, -6, -6],
                formatter: params => {
                    return '{cir|●}';
                },
                rich: rich,
            }
        },

        data: syjgdata,
        z: -1
    }, {
        itemStyle: {
            normal: {
                color: 'transparent'
            }
        },
        type: 'pie',
        silent: true, //取消高亮
        radius: ['0%', '57%'],
        center: ["50%", "50%"],
        hoverAnimation: false, //取消动画效果
        data: list,
        label: {
            normal: {
                show: true,
                alignTo: 'labelLine',
                color: "inherit"
            }
        },
        labelLine: {
            show: true,
            length: 20,
            length2: 100,
            // color: "inherit",
            showAbove: true
        },
        z: -1
    }]
};
    
截图如下