echarts 조합 링 그림 의 참고 예

https://gallery.echartsjs.com/editor.html?c=x6LFNVgmfx 혼인 상황 링 맵 이 예 에서 place Holder Style 공공 변 수 를 추출 합 니 다.

series: [
                {
                name: 'Line 4',
                type: 'pie',
                clockWise: true,
                hoverAnimation: false,
                radius: ['65%', '75%'],
                itemStyle: dataStyle,

            data: [{
                value: 7645434,
                name: '    '
            }, {
                value: 3612343,
                name: '  ',
                tooltip: {
                    show: false
                },
                itemStyle: placeHolderStyle
            }

            ]
        }, {
            name: 'Line 3',
            type: 'pie',
            clockWise: true,
            radius: ['50%', '60%'],
            itemStyle: dataStyle,
            hoverAnimation: false,

            data: [{
                value: 2632321,
                name: '    '
            }, {
                value: 2212343,
                name: '  ',
                tooltip: {
                    show: false
                },
                itemStyle: placeHolderStyle
            }]
        }, {
            name: 'Line 2',
            type: 'pie',
            clockWise: true,
            hoverAnimation: false,
            radius: ['35%', '45%'],
            itemStyle: dataStyle,

                    data: [{
                        value: 1823323,
                        name: '  '
                    }, {
                        value: 1812343,
                        name: '  ',
                        tooltip: {
                            show: false
                        },
                        itemStyle: placeHolderStyle
                    }]
                },
                {
                    name: 'Line 1',
                    type: 'pie',
                    clockWise: true,

                    radius: ['20%', '30%'],
                    itemStyle: dataStyle,
                    hoverAnimation: false,

                    data: [ {
                        value: 1342221,
                        name: '  '
                    },{
                        value:1912343,
                        name: '  ',
                        tooltip: {
                            show: false
                        },
                        itemStyle: placeHolderStyle
                    }

                    ]
                }
            ]

https://gallery.echartsjs.com/editor.html?c=xrD67xXLT9 3 / 4 원 환 도 이 예 는 data 의 길이 에 따라 radius 값 을 동적 으로 바 꿉 니 다.

    var res = {
        series: [],
        yAxis: []
    };
    for (let i = 0; i < data.length; i++) {
        res.series.push({
            name: '  ',
            type: 'pie',
            clockWise: false, //    
            hoverAnimation: false, //      
            radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
            center: ["30%", "55%"],
            label: {
                show: false
            },
            itemStyle: {
                label: {
                    show: false,
                },
                labelLine: {
                    show: false
                },
                borderWidth: 5,
            },
            data: [{
                value: data[i].value,
                name: data[i].name
            }, {
                value: sumValue - data[i].value,
                name: '',
                itemStyle: {
                    color: "rgba(0,0,0,0)",
                    borderWidth: 0
                },
                tooltip: {
                    show: false
                },
                hoverAnimation: false
            }]
        });
        res.series.push({
            name: '',
            type: 'pie',
            silent: true,
            z: 1,
            clockWise: false, //    
            hoverAnimation: false, //      
            radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
            center: ["30%", "55%"],
            label: {
                show: false
            },
            itemStyle: {
                label: {
                    show: false,
                },
                labelLine: {
                    show: false
                },
                borderWidth: 5,
            },
            data: [{
                value: 7.5,
                itemStyle: {
                    color: "#E3F0FF",
                    borderWidth: 0
                },
                tooltip: {
                    show: false
                },
                hoverAnimation: false
            }, {
                value: 2.5,
                name: '',
                itemStyle: {
                    color: "rgba(0,0,0,0)",
                    borderWidth: 0
                },
                tooltip: {
                    show: false
                },
                hoverAnimation: false
            }]
        });
        res.yAxis.push((data[i].value / sumValue * 100).toFixed(2) + "%");
    }
    return res;
    }

 https://gallery.echartsjs.com/editor.html?c=x7i515upJP 링 이 예 는 소 수 를 직접 받 아들 여 링 을 자동 으로 보 여 주 는 데 사용 합 니 다.

function getData(percent) {
    return [{
        value: percent,
        name: percent,
        itemStyle: {
             normal: {
                 color: 'rgba(0, 0, 0, 0)',
                    //  color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                    //             offset: 0,
                    //             color: 'rgba(221,198,148,1)'
                    //         }, {
                    //             offset: 1,
                    //             color: 'rgba(233,178,82,0)'
                    //         }]),
                    borderWidth: 10.5,
                // shadowBlur: 30,
                borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                    offset: 0,
                                color: 'rgba(221,198,148,1)'
                            }, {
                                offset: 1,
                                color: 'rgba(233,178,82,0)'
                            }]),
                // shadowColor: 'rgba(142, 152, 241, 0.6)'
            }
        }
    }, {
        value: 1 - percent,
         itemStyle: placeHolderStyle
    }];
}

 https://gallery.echartsjs.com/editor.html?c=xrk7fM82G 고리 형 그림 By 왕 딩 동 댕 소리 이 예 는 dataStyle 과 place Holder Style 을 모두 추출 합 니 다.