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)"
                        }
                    }
                },

            ]
        },

    ]
};
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页