echarts pie chart label and adjust the position of labelLine

 

principle

Using a default color is transparent, and only the display of the pie chart labelLine

Then by adjusting the transparency to achieve a position of the pie chart is modified labelLine

echarts address

https://gallery.echartsjs.com/editor.html?c=x6VnXPfxlx

 

echarts Source:

option = {
    backgroundColor: "#03141c",
    title: {
        text: "84%",
        subtext: '完成部门占比',
        x: 'center',
        y: 'center',
        textStyle: {
            color: "#fff",
            fontSize: 30,
            fontWeight: 'normal'
        },
        subtextStyle: {
            color: "rgba(255,255,255,.45)",
            fontSize: 14,
            fontWeight: 'normal'
        }
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        x: 'center',
        y: 'bottom',
        data: ['rose3', 'rose5', 'rose6', 'rose7', 'rose8']
    },
    calculable: true,
    series: [
        {
            type: 'pie',
            radius: [80, 120],
            center: ['50%', '50%'],
            data: [
                {
                    value: 10,
                    name: '吴际帅\n牛亚莉',
                    itemStyle: {
                        color: "transparent"
                    }
                },
                {
                    value: 90,
                    name: 'rose2',
                    itemStyle: {

                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                            offset: 0,
                            color: '#0ce4da'
                        }, {
                            offset: 1,
                            color: '#f6fb08'
                        }])
                    },
                    labelLine: {
                      show: false,
                      length: 200,
                      length2: 100
                    },
                    label: {
                        color: "rgba(255,255,255,.45)",
                        fontSize: 14,
                        Show: to false, 
                        position: 'Outside', 
                        Formatter: 'customer satisfaction \ n {a | 52} a', 
                        Rich: { 
                            A: { 
                                Color: "#fff", 
                                the fontSize: 20 is, 
                                the lineHeight: 30 
                            }, 
                        } 
                    } 
                } 
            ] 
        }, 
        {// indication line 
            // value of the value adjusted by the position lableLine 
            type: 'PIE', 
            RADIUS: [80, 100], 
            Data: [ 
                { 
                    value: 100,
                    itemStyle: {
                        color: 'transparent'
                    }
                    
                },
                {
                    value: 50,
                    itemStyle: {
                        color: "transparent"
                    },
                    labelLine: {
                      show: true,
                      length: 2,
                      length2: 240,
                      color: 'orange',
                      lineStyle: {
                          color: 'orange'
                      }
                    },
                    label: {
                        color: "rgba(255,255,255,.45)",
                        fontSize: 14,
                        position: 'outside',
                        formatter: '客户满意度\n{a|52}个',
                        rich: {
                            a: {
                                color: "#fff",
                                fontSize: 20,
                                lineHeight: 30
                            },
                        }
                    }
                }
            ]
        },
        {
            type: 'pie',
            radius: [80, 100],
            center: ['50%', '50%'],
            data: [{
                    value: 10,
                    itemStyle: {
                        color: '#06d3cd'
                    },
                    labelLine: {
                        show: false
                    }
                },
                {
                    value: 90,
                    itemStyle: {
                        color: "transparent"
                    }
                }
            ]
        }
        
    ]
};