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);的方法，執行完之后，圖形重新加載了，會出現，點擊選中的的圖形，沒有選中，所以需要設置選中的圖形，在設置之前，把之前這只選中的圖形，全部設置不選中，故達到目的。
感興趣的朋友可以參考代碼進行實現，如果你有更好的方法實現，不吝賜教。