Echarts 嵌套饼图实现，内环点击控制外环显示

Echarts有交互事件，但是如果用其进行图形变更，恐怕就只有重新修改配置了、

如图，我想要实现，内圈的数据控制外圈的图形，当点击内环的某一块时，就可以实现，更改外环的目的。

起初我想能不能直接修改option里 series的data数据达到修改的外圈图形的效果，可惜没那么那么容易，我暂时想到的修改实现方法，设置option的，达到修改外圈的目的。废话不多说，上代码：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138

<script>     var dataA=[];     var option = {         tooltip : {             trigger: 'item',             formatter: "{a} <br/>{b} : {c} ({d}%)"         },         legend: {             orient : 'vertical',             x : 'left',             data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']         },         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: 1048,                   data:dataA                 /*[                    {value:335, name:'直达'},                     {value:310, name:'邮件营销'},                     {value:234, name:'联盟广告'},                     {value:135, name:'视频广告'},                     {value:1048, name:'百度'},                     {value:251, name:'谷歌'},                     {value:147, name:'必应'},                     {value:102, name:'其他'}                 ]*/             }         ]     };     var data=[];      data[0]=[         {value:335, name:'直达'},         {value:310, name:'邮件营销'}       ];      data[1]=[           {value:234, name:'联盟广告'},         {value:135, name:'视频广告'}       ];     data[2]=[         {value:1048, name:'百度'},         {value:251, name:'谷歌'},         {value:147, name:'必应'},         {value:102, name:'其他'}];       // 路径配置     require.config({         paths: {             echarts: 'www/js'         }     });     var myChart;     require(['echarts','echarts/chart/pie','echarts/chart/funnel'],function(echarts){          myChart = echarts.init(document.getElementById('main'));         // 使用刚指定的配置项和数据显示图表。           myChart.setOption(option);         // 处理点击事件并且跳转到相应的百度搜索页面         myChart.on('click', function (params) {               console.log(params);               if(params.seriesIndex==0){                                      for(var i=0;i<option.series[0].data.length;i++){                     option.series[0].data[i].selected=false;                 }                 var selected=params.data;                 selected.selected=true;                 console.log(selected);                 console.log( option.series[0].data[params.dataIndex]);                 option.series[0].data[params.dataIndex]=selected;               //  option.series[1].data=dataA;                 option.series[1].data=data[params.dataIndex];                 console.log(option);                 myChart.clear();                 myChart.setOption(option);             }             });     }); </script>

　　如上，为了点击切换图形，网上有人，写多个option，如何option1，option2……，通过点击事件的选择，然后切换option，但是写那么多option真的很浪费资源，他的很多属性是重复的，所以我决定更改option的内容，然后达到切换目的。

?

1

现在详细说明：

?

1 2 3

myChart.on('click', function (params){   if(params.seriesIndex==0){                           <br>}}）;

　　如上，设置点击事件通过seriesIndex的值，判断是内圈还是外圈，点击事件发生在内圈，则进行修改；通过dataIndex的值，判断它是点击的哪一个块，然后进行操作。我先预先把数据加载好做成一个数组，然后我们通过选择的索引，达到匹配数据。如果我们直接复制，不进行myChart.clear();这一步的操作，会出现数据交叉的问题，所以我们需要先清空图形数据，然后执行其myChart.setOption(option);的方法，执行完之后，图形重新加载了，会出现，点击选中的的图形，没有选中，所以需要设置选中的图形，在设置之前，把之前这只选中的图形，全部设置不选中，故达到目的。

?

1	<em id="__mceDel">感兴趣的朋友可以参考代码进行实现，如果你有更好的方法实现，不吝赐教。</em>