正文
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);的方法，执行完之后，图形重新加载了，会出现，点击选中的的图形，没有选中，所以需要设置选中的图形，在设置之前，把之前这只选中的图形，全部设置不选中，故达到目的。
感兴趣的朋友可以参考代码进行实现，如果你有更好的方法实现，不吝赐教。
