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

修改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)' } } }] };

運行效果圖：