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 funnel
            x: '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 funnel
            x: '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;
}
}

效果圖

當點擊內圓中的大類時，外環的小類會隨之發生變化