最終效果圖

類似這種效果的圖形，一般都是多種圖形堆疊的效果，比如這個圖就是：多個環(huán)形餅圖和一個坐標(biāo)軸疊加而成

多種圖形疊加

一、首先獲取到需要展示的數(shù)據(jù)，根據(jù)需求，格式化出需要的數(shù)據(jù)格式：

    // 需要展示的數(shù)據(jù)
    let resData = [{name:'數(shù)據(jù)1',value:80},{name:'數(shù)據(jù)2',value:40},{name:'數(shù)據(jù)3',value:60}]
    let name = resData.map((item)=>item.name) // 獲取名稱
    let value = resData.map((item)=>item.value) // 獲取數(shù)值
    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, // 鼠標(biāo)移入變大
            radius: [60 - i*12 + '%',53 - i*12 + '%'], // 圓環(huán)
            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 // 鼠標(biāo)移入變大
            }]
        })
        series.push({
            name: '',
            type: 'pie',
            clockWise: true, //順時加載
            z: 1, // 層級，默認(rèn)為 2，z小的會被z大的覆蓋住
            hoverAnimation: false, // 鼠標(biāo)移入變大
            radius: [60 - i*12 + '%',53 - i*12 + '%'], // 圓環(huán)
            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的第一個對象為展示數(shù)據(jù)，根據(jù)真實數(shù)據(jù)量計算所占比例配置項。

series中push的第二個對象，是背景陰影，比例固定，前75%透明度0.1，后25%透明度0，就得到了圓環(huán)差一截的效果。

根據(jù)z層級屬性覆蓋。

三、加入坐標(biāo)軸

    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)

最后完成圓環(huán)進(jìn)度條，如圖1效果。

可以自行修改配置代碼，觀察效果變化，深入理解多種圖形疊加出的效果，能做到舉一反三后，以后工作中應(yīng)對復(fù)雜圖形場景，也就有了解決思路。