ECharts嵌套饼图 内圆与外环是大类与小类关系代码

来源:互联网 发布:将军岂愿见之乎 编辑:程序博客网 时间:2024/05/20 11:50

ECharts代码:

option = {    tooltip : {        trigger: 'item',        formatter: "{a} <br/>{b} : {c} ({d}%)"    },    legend: {        orient : 'vertical',        x : 'left',        data:['1','2','3']    },    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: 2048,            data:[                {value:10000, name:'1'},                {value:20, name:'2'},                {value:30, name:'3'}            ],          itemStyle: {           normal: {            label: {                show: true,              //position:'inner',              formatter:'{c}'            },            labelLine: {                show: true            }      }       }        }    ]};var ecConfig = require('echarts/config');myChart.on(ecConfig.EVENT.PIE_SELECTED, function (param){    var selected = param.selected;    var serie;    var str = '';    for (var idx in selected) {             serie = option.series[idx];        noselected(serie,serie.data.length);        for (var i = 0, l = serie.data.length; i < l; i++) {            if (selected[idx][i]) {                                 var pieDataName = serie.data[i].name;                str += '【系列' + idx + '】' + serie.name + ' : ' +                        '【数据' + i + '】' + pieDataName + ' ';                            // 缓存点击之前的外圈数据对象长度              var seriesdata = option.series[1].data;               var count=0;              if(pieDataName=='搜索引擎'){                serie.data[i].selected=true;count =3;                 option.series[1].data=[                {value:10000, name:'1',itemStyle:{normal:{label:{show:true},labelLine:{show: true}}}},                {value:20, name:'2',itemStyle:{normal:{label:{show:true},labelLine:{show: true}}}},                {value:30, name:'3',itemStyle:{normal:{label:{show:true},labelLine:{show: true}}}}                 ];                 option.legend.data=[                  '1','2','3'                 ];              }else if(pieDataName=='直达'){                serie.data[i].selected=true;count =3;              option.series[1].data=[                {value:125, name:'4',itemStyle:{normal:{label:{show:true},labelLine:{show: true}}}},                {value:56, name:'5',itemStyle:{normal:{label:{show:true},labelLine:{show: true}}}},                {value:94, name:'6',itemStyle:{normal:{label:{show:true},labelLine:{show: true}}}}                 ];               option.legend.data=[                   '4','5','6'                 ];              }else if(pieDataName=='营销广告'){                serie.data[i].selected=true;  count =2;              option.series[1].data=[                {value:40, name:'7',itemStyle:{normal:{label:{show:true},labelLine:{show: true}}}},                 {value:54, name:'8',itemStyle:{normal:{label:{show:true},labelLine:{show: true}}}}                 ];option.legend.data=[                  '7','8'                 ];              }              var seriesdataLength = seriesdata.length;             // debugger;              if(seriesdataLength-count>0){                //debugger;                for(var j=0;j<seriesdataLength-count;j++){                   option.series[1].data[count+j]=                    {value:0, name:'',itemStyle:{normal:{label:{show:false},labelLine:{show: false}}}};                   option.legend.data[count+j]= '';                }              }                 myChart.setOption(option);            }        }    }    document.getElementById('wrong-message').innerHTML = str;  alert(str);  if(str==""){  option.legend.data=[                   '直达','营销广告','搜索引擎'                 ];    myChart.setOption(option);  }})function noselected(serie,datalength){for(var i=0;i<datalength;i++){              serie.data[i].selected=false;}}

效果图



当点击内圆中的大类时,外环的小类会随之发生变化

0 0