echarts笔记-2,嵌套饼图

嵌套饼图和单个饼图差别不大,需要之一的是,如果使用嵌套饼图,只能有一个标题和一个图例,因为虽然是两个饼图,但是是一个echarts实例 

 需要注意的地方:

1. 注意外外部饼图和内部饼图的关系,如果外部饼图是内部饼图的细分,注意内外饼图的配色。

2. 注意标签的位置,饼图的默认标签在外部,嵌套饼图使,内饼图标签最好设置在内部。

myChart = echarts.init(document.getElementById(domeId));
                option = {
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient : 'horizontal',
                        x : 'center',
                        y: 'bottom',
                        data:[],
                        itemWidth: 14,
                        textStyle:{
                            color: '#ffffff'
                        },
                        type: 'scroll',
                        inactiveColor: '#333',
                        pageIconColor: '#3E88FF', //翻页下一页的三角按钮颜色
                        pageIconInactiveColor: '#333', //翻页(即翻页到头时)
                        pageIconSize: 14, //翻页按钮大小
                        pageFormatter: '',//隐藏翻页的数字
                    },
                    calculable : false,
                    series : [
                        {
                            name:name1,  //内圈名称
                            type:'pie',
                            selectedMode: 'single',
                            radius : [0, '30%'],
                            x: '20%',
                            width: '40%',
                            funnelAlign: 'right',
                            max: 1548,
                            itemStyle : {
                                normal : {
                                    label : {
                                        position : 'inner'
                                    },
                                    labelLine : {
                                        show : false
                                    },
                                    color:function(params) {
                                        //自定义颜色
                                        var colorList = innerColor;
                                        return colorList[params.dataIndex]
                                    },
                                }
                            },
                            data:[{name: "", value: 0}]
                        },
                        {
                            name:name2,  //外圈名称
                            type:'pie',
                            radius : ['50%', '60%'],
                            x: '40%',
                            width: '35%',
                            funnelAlign: 'left',
                            max: 1048,
                            itemStyle : {
                                normal : {
                                    color:function(params) {
                                        //自定义颜色
                                        var colorList = outColor;
                                        return colorList[params.dataIndex]
                                    }
                                }
                            },
                            data:[{name: "", value: 0}]
                        },
                    ]
                };
myChart.setOption(option);

 

要使用echartsecharts-gl实现3D饼图,首先需要下载并安装echartsecharts-gl的依赖。可以使用npm命令进行安装,如下所示:\[1\] ``` npm install echarts npm install echarts-gl ``` 然后,在代码中引入echartsecharts-gl库。可以使用import语句将它们导入到你的代码中,如下所示:\[1\] ``` import * as echarts from 'echarts' import 'echarts-gl' ``` 接下来,你需要获取数据并绘制饼图。你可以使用饼图的容器来展示图表,例如一个div元素,如下所示:\[3\] ``` <div class="container"> <div class="chartsGl" id="charts"></div> <div class="buttomCharts"></div> </div> ``` 然后,你可以使用echarts库的API来获取数据并绘制饼图。具体的实现方法可以根据你的需求和数据结构进行调整,例如使用鼠标点击图例切换饼图,仅展示所选的单个城市,剩余数据统称为其他。你可以参考echarts的文档和示例来实现你想要的效果。\[2\] 总结起来,要使用echartsecharts-gl实现3D饼图,你需要下载并安装echartsecharts-gl的依赖,引入echartsecharts-gl库,获取数据并绘制饼图,最后在页面上展示饼图的容器。希望这些信息对你有帮助! #### 引用[.reference_title] - *1* [3d饼图(Vue3 + echarts + echarts-gl)](https://blog.csdn.net/yeuteyietir/article/details/117261119)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [echartsecharts-gl实现3D饼图](https://blog.csdn.net/Maggie_01/article/details/128396947)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [vue中使用echartsecharts-gl 实现3D饼图环形饼图](https://blog.csdn.net/weixin_47336389/article/details/128477978)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值