修改echarts環形圖的牽引線及文字位置

轉自：https://www.cnblogs.com/wangmaoling/p/10207555.html

修改echarts環形圖的牽引線及文字位置，下面代碼及效果不僅如此，也包含了其它的效果哦。有問題可以留言。

根據echarts官方示例修改效果：

官方示例圖：

修改效果圖：

直接上代碼：其它不多說。

app.title = '嵌套環形圖';
option = {
    legend: {
        itemWidth: 15, //圖例的寬度
        itemHeight: 15, //圖例的高度
        itemGap: 25,
        orient: 'vertical',
        right: 'right',
        top:'center',
        icon: "rect",
        selectedMode: false, //取消圖例上的點擊事件
        data: ['4~18歲', '18<X≤80歲', '>80歲']
    },
    color: ['#33C6F7','#FFA700','#FF9090'],//扇形區域以及列表顏色
    // 設置環形中間的數據。默認center爲中間，如果圖表位置變化了，中間文字是不變的。
    graphic:[{
        type:'text',
        left:'center',
        top:'40%',
        style:{
            fill:'#686868',
            text:'總患者數'
        }
    },{
        type:'text',
        left:'center',
        top:'50%',
        z:10,
        style:{
            text:'3231',
            font: '30px Microsoft YaHei'
        }
    }],
    series: [{
        type: 'pie',
        radius: ['60%', '75%'],//兩個表示環
        center: ['50%', '55%'],
        labelLine: {//設置延長線的長度
            normal: {
                length: 5,//設置延長線的長度
                // length2: 10,//設置第二段延長線的長度
            }
        },
        label: {
            normal: {
                // formatter: '{d}%, {c} \n\n',
                formatter: '{per|{d}%} , {c|{c}}\n{hr|}\n{a|}',//這裏最後另一行設置了一個空數據是爲了能讓延長線與hr線對接起來
                padding: [0, -10],//取消hr線跟延長線之間的間隙
                rich: {
                    a: {
                        color: '#999',
                        lineHeight: 20,//設置最後一行空數據高度，爲了能讓延長線與hr線對接起來
                        align: 'center'
                    },
                    hr: {//設置hr是爲了讓中間線能夠自適應長度
                        borderColor: 'auto',//hr的顏色爲auto時候會主動顯示顏色的
                        width: '105%',
                        borderWidth: 0.5,
                        height: 0.5,
                    },
                    per: {//用百分比數據來調整下數字位置，顯的好看些。如果不設置，formatter最後一行的空數據就不需要
                        padding: [4, 0],
                    }
                }
            }
        },
        data: [{
                value: 311,
                name: '4~18歲'
            },
            {
                value: 1311,
                name: '18<X≤80歲'
            },
            {
                value: 9112,
                name: '>80歲'
            }
        ],
        itemStyle: {
            emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }]
};

運行效果圖：