echarts實現弧形（環形）進度條的具體配置

完成效果圖如下：

簡單例子說明：任務總數爲3，已完成1，未完成2。
弧形進度條實現data值：
data[0]:標題佔固定位置爲環形的25%，計算：(1+2)4/30.25=1，
data[1]:已完成任務數，具體值爲1
data[2]:未完成任務數，具體值爲2
注：
1、startAngle值設爲315，是爲了讓弧形圖看起來對稱且標題說明佔25%。
2、此處用data[0]中name的值作爲data[1]中具體的值來實現圖示效果，即：用標題佔位的name值來模仿已完成任務的具體值進行說明。
3、如果title值的字數是固定的，用padding: [15,70,15,70]來進行限制還可以，動態的title更適合固定寬度而不是由padding撐開達到的寬度，這樣需要用到title的富文本樣式，padding需要做相應的修改，具體實現如下
（name就是title的變量名：let name = ‘任務完成情況’）：

text:[
    `{a|${name}}`
].join(''),
textStyle:{
    fontSize:14,
    rich:{
       a: {
          backgroundColor:'#1E4695',
          fontSize: 20,
          color: '#fff',
          height:40,
          align:'center',
          width:250,
       }
    }
},

4、建議把series內的radius: [‘50%’, ‘60%’],這個改爲radius: [‘90%’, ‘100%’],這樣比較容易控制環形圖的大小（直接通過控制標籤的寬度來控制環形的大小，算是佔滿標籤）。

隨機例子說明：任務總數爲10，已完成1，未完成9，用弧形進度條完成如下展示：
說明：
title爲進度條說明值的標題，可以自定義樣式，
series中的data的三個值：
第一個爲下方的標題所佔的位置，且固定所佔比例爲整個環形圖的25%，即四分之一，此值需要進行具體的計算，相當於任務總數爲環形圖的75%，具體值爲10，可算出整個環形圖的總值爲10/0.75,即40/3(三分之四十)，標題說明所佔的具體值爲40/3*0.25，約爲3.3，第一個的value爲3.3。
第二個爲實際上已完成任務的值，即爲1。
第三個爲實際上未完成任務的值，即爲9，和已完成任務的值相加爲任務總數。

option = {
    backgroundColor: '#000',
    title: {
        text: "任務完成情況",
        textStyle: {
            color: '#fff',
            fontSize: 20,
            fontWeight: 'bold',
        },
        left: 'center',
        bottom: '23%',
        borderWidth: 1,
        borderColor: '#2FB6D9',
        backgroundColor: '#1E4695',
        borderRadius: 200,
        padding: [15,70,15,70]
    },
    series: [
        {
            name: '數據',
            type: 'pie',
            startAngle: 315,
            radius: ['50%', '60%'],
            legendHoverLink: false,
            hoverAnimation: false,
            avoidLabelOverlap: false,
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [
                {
                    value: 3.3,
                    name: '23(實際值)',//其實就是data[1].value
                    label:{
                        position:'center',
                        color:"#fff",
                        fontSize: 32
                    },
                    itemStyle: {
                        normal: {
                            color: "rgba(55,244,255,0)"
                        }
                    }
                },
                {
                    value:1,
                    //name: '直接訪問2(實際)',
                    itemStyle: {
                        normal: {
                            color: "rgba(255,255,249,1)"
                        }
                    }
                },
                {
                    value: 9,
                    //name: '直接訪問3（總共）',
                    itemStyle: {
                        normal: {
                            color: "rgba(122,40,50,1)"
                        }
                    }
                },

            ]
        },

    ]
};