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 = ‘任务完成情况’）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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，和已完成任务的值相加为任务总数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
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)"
                        }
                    }
                },

            ]
        },

    ]
};