环形图的嵌套

环形图的嵌套

要实现如下效果：

思路：在series里面配置两个pie，分别设置颜色

相关配置如下：

Markup

echartInfo2: {
        				  id: 'echart_2',
        				  option: {
        				  //外围环形的颜色设置
        				  color: ['#34B084', '#347DCB', '#9385FE','#FED943','#FE8B55'],
        				  series: [
        					{
        						name: '车辆排名',
        						type: 'pie',
        						radius: ['65%', '85%'],
        						avoidLabelOverlap: true,
        						//高亮扇区的偏移距离，也就是鼠标悬停的时候，对应的扇形跑出来的多少
        						hoverOffset: 4,
        						label: {
        							show: true,
        							position: 'outside',
        							align: "center",
        							//{a}是name,{b}是数据中的各项名称，{c}是数据中各项对应的值
        							formatter: '{a|{b}\n}{b|占比{d}%}',
        							rich: {
        								a: {
        									color: '#474747',
        									fontSize: 12,
        									fontFamily: 'Alibaba PuHuiTi',
        								},
        								b: {
        									color: '#A4A4A4',
        									lineHeight: 14 ,
        									fontSize: 10,
        									fontFamily: 'Alibaba PuHuiTi',
        								}
        							}
        
        						},
        						emphasis: {
        							itemStyle:{
        								shadowBlur: 10,
        								shadowOffsetX: 0,
        								shadowColor: 'rgba(0, 0, 0, 0.5)'
        							}
        						},
        						labelLine:{
        							normal: {
        								show: true,
        								length: 10,
        								length2: 30,
        								lineStyle: {
        									color: '#A4A4A4'
        								},
        							}
        						},
        						data: [
        							{value: 50, name: '杭州市'},
        							{value: 30, name: '衢州市'},
        							{value: 30, name: '湖州市'},
        							{value: 20, name: '温州市'},
        							{value: 20, name: '宁波市'}
        						]
        					},
        					// 边框的设置
        				   {
        					   name:'内边框',
        					   radius: ['55%','65%'],
        					   center: ['50%','50%'],
        					   type:'pie',
        					   hoverOffset: 10,
        					   label: {
        						   normal: {
        							   show:false
        						   },
        						   emphasis: {
        							   show:false
        						   }
        					   },
        					   labelLine: {
        						   normal: {
        							   show:false
        						   },
        						   emphasis: {
        							   show:false
        						   }
        					   },
        					   animation:false,
        					   tooltip: {
        						   show:false
        					   },
        					   //给内边框对应的区域设置颜色
        					   data: [
        						   {
        						   value: 50,
        						   itemStyle: {
        							   color:"#80BABD",
        						    }
        						   },
        						   {
        						   value: 30,
        						   itemStyle: {
        							   color:"#C2D8EF",
        						    }
        						   },
        						   {
        						   value: 30,
        						   itemStyle: {
        							   color:"#DEDAFF",
        						    }
        						   },
        						   {
        						   value: 20,
        						   itemStyle: {
        							   color:"#FFF4C6",
        						    }
        					      },
        						  {
        						  value: 20,
        						  itemStyle: {
        							   color:"#FFDCCC",
        						   }
        						  }
        					   ],
        				   },
        				 ]
        				  }
        				}