echarts圆环进度条效果

最终效果图

类似这种效果的图形，一般都是多种图形堆叠的效果，比如这个图就是：多个环形饼图和一个坐标轴叠加而成

多种图形叠加

一、首先获取到需要展示的数据，根据需求，格式化出需要的数据格式：

    // 需要展示的数据
    let resData = [{name:'数据1',value:80},{name:'数据2',value:40},{name:'数据3',value:60}]
    let name = resData.map((item)=>item.name) // 获取名称
    let value = resData.map((item)=>item.value) // 获取数值
    let sum = value.reduce((pre,cur)=>pre+=cur,0) // 总和
    let color = [ // 颜色
        ['#6fc1fb','#1971e7'],
        ['#983fff','#2c23ff'],
        ['#fff582','#59f9d2']
    ]

二、遍历生成图形配置所需的配置项

    let series = []
    let yAxis = []
    for(let i=0;i<resData.length;i++){
        series.push({
            type: 'pie',
            clockWise: true, //顺时加载
            hoverAnimation: false, // 鼠标移入变大
            radius: [60 - i*12 + '%',53 - i*12 + '%'], // 圆环
            center: ['50%','45%'],
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    },
                    borderWidth: 18
                }
            },
            data: [{
                name: resData[i].name,
                value: resData[i].value,
                itemStyle: {
                    normal: { // 渐变色
                        color: new echarts.graphic.LinearGradient(0,1,0,0,[{
                            offset: 0,
                            color: color[i][0]
                        },{
                            offset: 1,
                            color: color[i][1]
                        }])
                    }
                },
            },{ // 阴影段
                name: '',
                value: sum - resData[i].value,
                itemStyle: {
                    normal: {
                        color: 'transparent'
                    }
                },
                tooltip: { // 不显示提示框
                    show: false
                },
                hoverAnimation: false // 鼠标移入变大
            }]
        })
        series.push({
            name: '',
            type: 'pie',
            clockWise: true, //顺时加载
            z: 1, // 层级，默认为 2，z小的会被z大的覆盖住
            hoverAnimation: false, // 鼠标移入变大
            radius: [60 - i*12 + '%',53 - i*12 + '%'], // 圆环
            center: ['50%','45%'], // 位置
            label: {
                show: false
            },
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    },
                    borderWidth: 18
                }
            },
            data: [{ // 阴影的75%
                value: 7.5,
                itemStyle: {
                    normal: {
                        color: 'rgba(1,179,238,0.1)'
                    }
                },
                tooltip: {
                    show: false
                },
            },{ // 阴影的最后25%，透明
                value: 2.5,
                itemStyle: {
                    normal: {
                        color: 'rgba(0,0,0,0)',
                        borderWidth: 0
                    }
                },
                tooltip: {
                    show: false
                },
            }]
        })
        yAxis.push(resData[i].name)
    }

series中push的第一个对象为展示数据，根据真实数据量计算所占比例配置项。

series中push的第二个对象，是背景阴影，比例固定，前75%透明度0.1，后25%透明度0，就得到了圆环差一截的效果。

根据z层级属性覆盖。

三、加入坐标轴

    let myChart = echarts.init(document.getElementById('mYEchart'))
    let option = {
        legend: {
            show: true,
            x: 'center',
            bottom: '15%',
            itemGap: 20,
            textStyle: {
                fontSize: 14,
                color: '#fff'
            },
            data: name,
        },
        grid: {
            top: '13%',
            left: '48%',
            width: '40%',
            height: '20%',
            containlabel: false
        },
        xAxis: [{ // x轴隐藏
            show: false
        }],
        yAxis: [{ // y轴配置
            type: 'category',
            asisLine: {
                show: true
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: true,
                interval: 0,
                textStyle: {
                    color: '#fff',
                    fontSize: 14
                }
            },
            data: yAxis
        }],
        series: series
    }
    myChart.setOption(option)

最后完成圆环进度条，如图1效果。

可以自行修改配置代码，观察效果变化，深入理解多种图形叠加出的效果，能做到举一反三后，以后工作中应对复杂图形场景，也就有了解决思路。