A graph with a similar effect is usually a stack of multiple shapes. For example, this graph is composed of multiple circular pie charts and an axis:

First, obtain the data to be displayed, and format the required data format according to the requirements:
	// Data to display
    let resData = [{name:Data '1'.value:80}, {name:Data '2'.value:40}, {name:'data 3'.value:60}]
    let name = resData.map((item) = >item.name) // Get the name
    let value = resData.map((item) = >item.value) // Get the value
    let sum = value.reduce((pre,cur) = >pre+=cur,0) / / the sum
    let color = [ / / color
        ['#6fc1fb'.'#1971e7'],
        ['#983fff'.'#2c23ff'],
        ['#fff582'.'#59f9d2']]Copy the code
Iterate through the configuration items required to generate the graphical configuration
    let series = []
    let yAxis = []
    for(let i=0; i<resData.length; i++){ series.push({type: 'pie'.clockWise: true.// load in time
            hoverAnimation: false.// The mouse cursor is enlarged
            radius: [60 - i*12 + The '%'.53 - i*12 + The '%']./ / circle
            center: ['50%'.'45%'].itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    },
                    borderWidth: 18}},data: [{
                name: resData[i].name,
                value: resData[i].value,
                itemStyle: {
                    normal: { / / gradients
                        color: new echarts.graphic.LinearGradient(0.1.0.0[{offset: 0.color: color[i][0] {},offset: 1.color: color[i][1]}])}},},{/ / shadow
                name: ' '.value: sum - resData[i].value,
                itemStyle: {
                    normal: {
                        color: 'transparent'}},tooltip: { // Do not display the prompt box
                    show: false
                },
                hoverAnimation: false // The mouse cursor is enlarged
            }]
        })
        series.push({
            name: ' '.type: 'pie'.clockWise: true.// load in time
            z: 1.// Level, default is 2, z small will be overwritten by z large
            hoverAnimation: false.// The mouse cursor is enlarged
            radius: [60 - i*12 + The '%'.53 - i*12 + The '%']./ / circle
            center: ['50%'.'45%']./ / position
            label: {
                show: false
            },
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    },
                    borderWidth: 18}},data: [{ // 75% of the shadow
                value: 7.5.itemStyle: {
                    normal: {
                        color: 'rgba (1179238,0.1)'}},tooltip: {
                    show: false}, {},// The last 25% of the shadow is transparent
                value: 2.5.itemStyle: {
                    normal: {
                        color: 'rgba (0,0,0,0)'.borderWidth: 0}},tooltip: {
                    show: false
                },
            }]
        })
        yAxis.push(resData[i].name)
    }
Copy the code

The first object of push in series is the presentation data, and the proportion of configuration items is calculated according to the real amount of data.

The second object of push in series is the background shadow with a fixed proportion. The opacity of the first 75% is 0.1, and the opacity of the last 25% is 0.

Overwrite according to z-level attributes.

Add axes
    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: [{ // The X-axis is hidden
            show: false}].yAxis: [{ // Y-axis configuration
            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)
Copy the code

Finally, complete the ring progress bar, as shown in Figure 1.

You can modify the configuration code, observe the effect changes, in-depth understanding of the effect of a variety of graphics superimposed, can do by drawing inferences, later work to deal with complex graphics scene, also have a solution.