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

最新推荐文章于 2025-06-15 09:06:09 发布

黑色的糖果

最新推荐文章于 2025-06-15 09:06:09 发布

阅读量9.1k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： echarts 文章标签： echarts javascript

本文链接：https://blog.youkuaiyun.com/Dalin0929/article/details/109646144

echarts 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种使用ECharts库创建复杂饼图的方法。通过设置不同的样式和布局，可以实现内外双层饼图的展示效果，并对每一块饼图进行详细的数据配置。此配置适用于需要清晰展示多层次数据比例关系的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

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

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