echarts组合环形图的参考例子

Posted 2020-11-16 qtx-

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;
    }