echarts嵌套饼图,实现多层级饼图效果

效果图:

在这里插入图片描述
实例代码:

let option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    series: [
        {
            name: '数据',
            type: 'pie',
            selectedMode: 'single',
            radius: ['10%', '20%'],
            label: {
                position: 'inner'
            },
            itemStyle:{
                borderWidth:1, //设置border宽度
                borderColor:'#fff',
            },
            labelLine: {
                show: false
            },
            color: ['#f2bd4b', '#f87d76', '#4bddc8'],
            data: [
                {value: 100, name: 'a'},
                {value: 200, name: 'b'},
                {value: 400, name: 'c'}
            ]
        },
        {
            name: '数据',
            type: 'pie',
            radius: ['20%', '30%'],
            label: {
                position: 'inner'
            },
            color: ['#f2bd4b', '#f2bd4b', '#f87d76', '#f87d76', '#4bddc8', '#4bddc8', '#4bddc8', '#4bddc8'],
            itemStyle:{
                borderWidth:1,
                borderColor:'#fff',
            },
            data: [
                {value: 50, name: 'a1'},
                {value: 50, name: 'a2'},
                {value: 100, name: 'b1'},
                {value: 100, name: 'b2'},
                {value: 100, name: 'c1'},
                {value: 100, name: 'c2'},
                {value: 100, name: 'c3'},
                {value: 100, name: 'c4'}
            ]
        }
    ]
};

版权声明:本文为Dalin0929原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。