最近在使用echarts 發現其功能真心不錯。

但是在使用巢狀餅圖時，發現內外圈無法聯動，尤其將圖例設定為內圈時，點選圖例取消內圈餅圖，外圈沒有辦法聯動。

為了實現內外圈同時變化，這裡發現一個echarts的小技巧，就是其控制都是通過控制series中data的name，那麼將內外圈需要同事控制的部分設定為一樣的名字，就可以實現內外圈聯動。

但是在name相同時，會使預設分配顏色時相同，使顏色不好看，這裡就需要給data自己分配顏色。

在這裡先給大家分享一個色盤，比較鮮豔，適合白底背景的。

	var colors=[
				        '#6EB6F2','#71F16F','#FFC000','#384C6C','#7577F8',
				        '#003366','#AEABAF','#00F4D2','#8084F1','#FF9F4E',
				        '#4FA2A9','#9a7fd1','#588dd5','#f5994e','#c05050',
				        '#59678c','#c9ab00','#7eb00a','#6f5553','#c14089',
				        '#FF4F7F','#CC6666','#7f7522','#2b4490','#333399',
				        '#70a19f','#009299','#78331e','#3e4145','#7bbfea',
				        '#339999','#8f4b38','#694d9f','#f26522','#8e7437',
				        '#45b97c','#74787c','#afdfe4','#fdb933','#bed742',
				        '#A20055','#AA0000','#C63300','#0000AA','#2200AA',
				        '#990099','#00AAAA','#00AA88','#00AA55','#FF1493'
				    ];
 

同時在預設的label顯示時，是顯示名字，如果希望內外圈顯示的label不同，可以通過自己構建label函式。

具體程式碼如下

app.title = '巢狀環形圖';
var colors=[
			        '#6EB6F2','#71F16F','#FFC000','#384C6C','#7577F8',
			        '#003366','#AEABAF','#00F4D2','#8084F1','#FF9F4E',
			        '#4FA2A9','#9a7fd1','#588dd5','#f5994e','#c05050',
			        '#59678c','#c9ab00','#7eb00a','#6f5553','#c14089',
			        '#FF4F7F','#CC6666','#7f7522','#2b4490','#333399',
			        '#70a19f','#009299','#78331e','#3e4145','#7bbfea',
			        '#339999','#8f4b38','#694d9f','#f26522','#8e7437',
			        '#45b97c','#74787c','#afdfe4','#fdb933','#bed742',
			        '#A20055','#AA0000','#C63300','#0000AA','#2200AA',
			        '#990099','#00AAAA','#00AA88','#00AA55','#FF1493'
			    ];
option = {
    legend: {
        orient: 'vertical',
        x: 'left',
        data:['直達','營銷廣告']
    },
    series: [
        {
            name:'訪問來源',
            type:'pie',
            radius: [0, '30%'],
            data:[
                {value:335, name:'直達', selected:true},
                {value:679, name:'營銷廣告'},
                
            ]
        },
        {
            name:'訪問來源',
            type:'pie',
            radius: ['40%', '55%'],
            label:{
              	normal:{
              		formatter:function (params) {
                	  if(params.value != 0)
                		  return params.data.type;
                	  else
                		  return '';
                  }
              	}
              },
            data:[
                {value:335, name:'直達',type:"1", itemStyle:{
                        normal:{
                            color:colors[Math.floor(40*Math.random())]
                        }}},
                {value:310, name:'營銷廣告',type:"2", itemStyle:{
                        normal:{
                            color:colors[Math.floor(40*Math.random())]
                        }}},
                {value:234, name:'營銷廣告',type:"3",itemStyle:{
                        normal:{
                            color:colors[Math.floor(40*Math.random())]
                        }}},
                {value:135, name:'營銷廣告',type:"4",itemStyle:{
                        normal:{
                            color:colors[Math.floor(40*Math.random())]
                        }}},

            ]
        }
    ]
};