你的位置:首页 > Java教程

[Java教程]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);的方法,执行完之后,图形重新加载了,会出现,点击选中的的图形,没有选中,所以需要设置选中的图形,在设置之前,把之前这只选中的图形,全部设置不选中,故达到目的。

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