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