Echarts 饼状图基础图形

最新推荐文章于 2023-09-10 17:17:19 发布

起个锤子

最新推荐文章于 2023-09-10 17:17:19 发布

阅读量854

点赞数

分类专栏： Echarts

本文链接：https://blog.youkuaiyun.com/dandelion_lu/article/details/102562085

版权

Echarts 专栏收录该内容

1 篇文章

订阅专栏

这篇博客展示了如何使用ECharts库创建一个具有内外层的饼状图，包括设置不同环形区域的半径、数据格式以及图例显示。通过代码实例详细解释了每个配置项的作用，如tooltip提示框、数据表示及环形间的空白处理。

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

1.效果图

2.代码

var myChart = echarts.init(document.getElementById('main'));
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                series: [
                    {
                        name:'外层',
                        type:'pie',
                        selectedMode: 'single',
                        radius: ['65%', '86%'],

                       /* label: {
                            normal: {
                                position: 'inside',
                                fontSize: 20,
                                color:'',
                                fontFamily:'Microsoft Yahei'
                            }
                        }, */
                        data:[
                            {value:2, name:'A'},
                            {value:3, name:'B'},
                            {value:3, name:'C'},
                            {value:2, name:'D'}
                        ]
                    },
                    {
                        name:'内层',
                        type:'pie',
                        radius: ['25%', '60%'],
                        label: {
                            normal: {
                                position:'inside',
                                align:'right',
                                fontSize: 18,
                                fontFamily:'Microsoft YaHei',
                                color:"#FFEFE0"
                            }
                        },
                        data:[
                            {value:1, name:'A1'},
                            {value:1, name:'A2'},
                            {value:1, name:'B1'},
                            {value:1, name:'B2'},
                            {value:1, name:'B3'},
                            {value:1, name:'C1'},
                            {value:1, name:'C2'},
                            {value:1, name:'C3'},
                            {value:1, name:'D1'},
                            {value:1, name:'D2'}
                        ]
                    },
                    {
                        name:'总',
                        type:'pie',
                        radius: ['0%', '20%'],
                        label: {
                            normal: {
                                position: 'center',
                                fontSize: 22,
                                fontFamily:'Microsoft YaHei',
                                color:'#80F0E3'
                            }
                        },
                        data:[
                            {value:10, name:'分成'}
                        ]
                    }
                ]
            };
            myChart.setOption(option);