echarts 嵌套饼图 内外圈图例联动

最近在使用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'    ];

然后在构建echarts的option时将需要联动部分设置相同名字.

同时在默认的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())]                        }}},            ]        }    ]};

具体效果如图，可以实现通过点击图例 实现内外圈联动