echarts组合环形图的参考例子

https://gallery.echartsjs.com/editor.html?c=x6LFNVgmfx 婚姻情况环形图 该例子提取placeHolderStyle公共变量

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和placeHolderStyle都提取出来