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);的方法，執行完以後，圖形從新加載了，會出現，點擊選中的的圖形，沒有選中，因此須要設置選中的圖形，在設置以前，把以前這隻選中的圖形，所有設置不選中，故達到目的。

感興趣的朋友能夠參考代碼進行實現，若是你有更好的方法實現，不吝賜教。