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

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

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

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

<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的内容，然后达到切换目的。

现在详细说明：

myChart.on(‘click‘, function (params){

   if(params.seriesIndex==0){

}

}）;

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

感兴趣的朋友可以参考代码进行实现，如果你有更好的方法实现，不吝赐教。