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

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效果。

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