ECharts嵌套饼图 内圆与外环是大类与小类关系代码

嵌套饼图 内圆与外环是大类与小类关系代码"/>

ECharts嵌套饼图 内圆与外环是大类与小类关系代码

ECharts代码：

option = {tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {orient : 'vertical',x : 'left',data:['1','2','3']},toolbox: {show : true,feature : {mark : {show: true},dataView : {show: true, readOnly: false},magicType : {show: true, type: ['pie', 'funnel']},restore : {show: true},saveAsImage : {show: true}}},calculable : false,series : [{name:'访问来源',type:'pie',selectedMode: 'single',radius : [0, 70],// for funnelx: '20%',width: '40%',funnelAlign: 'right',max: 1548,itemStyle : {normal : {label : {position : 'inner'},labelLine : {show : false}}},data:[{value:335, name:'直达'},{value:679, name:'营销广告'},{value:1548, name:'搜索引擎'}]},{name:'访问来源',type:'pie',radius : [100, 140],// for funnelx: '60%',width: '35%',funnelAlign: 'left',max: 2048,data:[{value:10000, name:'1'},{value:20, name:'2'},{value:30, name:'3'}],itemStyle: {normal: {label: {show: true,//position:'inner',formatter:'{c}'},labelLine: {show: true}} }}]
};
var ecConfig = require('echarts/config');
myChart.on(ecConfig.EVENT.PIE_SELECTED, function (param){var selected = param.selected;var serie;var str = '';for (var idx in selected) {serie = option.series[idx];noselected(serie,serie.data.length);for (var i = 0, l = serie.data.length; i < l; i++) {if (selected[idx][i]) {var pieDataName = serie.data[i].name;str += '【系列' + idx + '】' + serie.name + ' : ' + '【数据' + i + '】' + pieDataName + ' ';// 缓存点击之前的外圈数据对象长度var seriesdata = option.series[1].data;var count=0;if(pieDataName=='搜索引擎'){serie.data[i].selected=true;count =3;option.series[1].data=[{value:10000, name:'1',itemStyle:{normal:{label:{show:true},labelLine:	{show: true}}}},{value:20, name:'2',itemStyle:{normal:{label:{show:true},labelLine:	{show: true}}}},{value:30, name:'3',itemStyle:{normal:{label:{show:true},labelLine:	{show: true}}}}];option.legend.data=['1','2','3'];}else if(pieDataName=='直达'){serie.data[i].selected=true;count =3;option.series[1].data=[{value:125, name:'4',itemStyle:{normal:{label:{show:true},labelLine:	{show: true}}}},{value:56, name:'5',itemStyle:{normal:{label:{show:true},labelLine:	{show: true}}}},{value:94, name:'6',itemStyle:{normal:{label:{show:true},labelLine:	{show: true}}}}];option.legend.data=['4','5','6'];}else if(pieDataName=='营销广告'){serie.data[i].selected=true;count =2;option.series[1].data=[{value:40, name:'7',itemStyle:{normal:{label:{show:true},labelLine:	{show: true}}}},{value:54, name:'8',itemStyle:{normal:{label:{show:true},labelLine:	{show: true}}}}];option.legend.data=['7','8'];}var seriesdataLength = seriesdata.length;// debugger;if(seriesdataLength-count>0){//debugger;for(var j=0;j<seriesdataLength-count;j++){option.series[1].data[count+j]={value:0, name:'',itemStyle:{normal:{label:{show:false},labelLine:	{show: false}}}};option.legend.data[count+j]= '';}}myChart.setOption(option);}}}document.getElementById('wrong-message').innerHTML = str;alert(str);if(str==""){option.legend.data=['直达','营销广告','搜索引擎'];myChart.setOption(option);}
})
function noselected(serie,datalength){
for(var i=0;i<datalength;i++){serie.data[i].selected=false;
}
}

效果图

当点击内圆中的大类时，外环的小类会随之发生变化