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

最新推荐文章于 2025-01-09 15:12:37 发布

原创最新推荐文章于 2025-01-09 15:12:37 发布 · 9.7k 阅读

30 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#echarts #javascript

echarts 专栏收录该内容

11 篇文章

订阅专栏

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

低功耗蓝牙项目，需要一块懂省电的板

思澈 SF32LB52 芯片，BLE 协议栈深度优化，上手即开发

点击查看

效果图：

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

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