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);

echarts笔记-2，嵌套饼图相关推荐

使用Echarts制作动态嵌套饼图
笔者最近因为使用Echarts制作报表,参考了官方文档及某些博客,使用过程中有些想法,想将其中的一些记录下来,也希望能帮助到需要的人. 本例以嵌套的饼图为例.嵌套的饼图即为双层饼图,相比普通的饼图多了 ...
Echarts --- 可视化练习（pie06 --- 环形嵌套饼图）
Echarts - 可视化练习(pie06 - 环形嵌套饼图) 别人想什么,我们控制不了:别人做什么,我们也强求不了.唯一可以做的,就是尽心尽力做好自己的事,走自己的路,按自己的原则,好好生活.即使有 ...
16、17、18_使用gridspec定义多子图,条形图（Bar plots）,分组条形图,堆叠条形图(Stacked bar chart),饼图（Pie plots）,甜甜圈图,嵌套饼图
16.使用gridspec定义多子图 16.1.图标题 17.条形图(Bar plots) 17.1.分组条形图 17.2.堆叠条形图(Stacked bar chart) 18.饼图(Pie plo ...
Echarts数据可视化series-pie饼图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
echarts嵌套饼图自动动画_使用百度echarts制作可视化大屏——制作一个双层饼图...
使用百度echarts制作可视化大屏--制作一个双层饼图发布时间:2018-06-12 16:24, 浏览次数:745 , 标签: echarts 实现一个两层嵌套的环形图,展示三个分类下各个品牌车 ...
Echarts 教学渐变柱状图折线图嵌套饼图标签
哈哈最近在用Echarts 做东西顺便研究了一下Echarts 总结了一些比较常用的代码话不多说直接放代码这是取json的方式生成图表 myChart.showLoading(); // e ...
php echarts 嵌套饼图,echarts绘制嵌套环形图/ 双饼图
设备类型在里设备品牌在外后台返回数据如下格式: device_brand_distribution = [{'equipment_type': '智能手机', 'equipment_brand': ...
Echarts笔记：全国主要城市空气质量地图
学习如何利用echarts 绘制地图. 分析echarts官网提供的全国主要城市空气质量地图的笔记. 原图地址图如下: 代码: var data = [{name: '海门', value: 9}, ...
嵌套饼图_旭日图的效率，高到饼图都羡慕
在展示占比情况时,饼图是我们最常用的选择.但是,饼图只能展示单层数据的占比情况,在面对多层级数据时,我们真的要用10个饼图进行可视化吗?不用挠头苦思,今天我们就来看看多个饼图的组合升级版--旭日图是怎 ...

echarts笔记-2，嵌套饼图

echarts笔记-2，嵌套饼图相关推荐

最新文章

热门文章