你的位置:首页 > 软件开发 > Java > Echarts 嵌套饼图实现,内环点击控制外环显示

Echarts 嵌套饼图实现,内环点击控制外环显示

发布时间:2016-08-11 17:00:29
Echarts有交互事件,但是如果用其进行图形变更,恐怕就只有重新修改配置了、如图,我想要实现,内圈的数据控制外圈的图形,当点击内环的某一块时,就可以实现,更改外环的目的。起初我想能不能直接修改option里 series的data数据达到修改的外圈图形的效果,可惜没那么那么 ...

Echarts 嵌套饼图实现,内环点击控制外环显示

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>

原标题:Echarts 嵌套饼图实现,内环点击控制外环显示

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录