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
- ECharts嵌套饼图 内圆与外环是大类与小类关系代码
- 内部类与嵌套类
- 嵌套类与内部类
- 内部类与嵌套类
- Repeater嵌套绑定数据 实现大类下的小类
- Java 嵌套类与内部类
- Java 嵌套类与内部类
- C++嵌套类与内部类
- Java嵌套类与内部类
- java嵌套类与内部类
- java嵌套类与内部类
- echarts统计图表与工具关系可视化
- 二级联动(大类下拉框与小类下拉框)
- cocos2dx 3.3 cocos studio控件与C++代码内类的对应关系
- 一代代码“撸清”内部类与外部类的访问权限关系
- 类与类关系的UML图与代码表现
- 类与类关系的UML图与代码表现
- 类与类关系的UML图与代码表现
- 项目部署到tomcat中的3种启动方式
- 安卓Button-TextView-EditText综合运用
- hibernate缓存机制分析
- JS 取值var input = document.getElementById("change_weight");
- Spring Boot 入门
- ECharts嵌套饼图 内圆与外环是大类与小类关系代码
- 使用PRO*C编程的一些说明和例子
- zookeeper-3.4.9的安装
- EasyUI-Tab选项卡内页面高度自适应
- 判断手机相机状态是开启还是关闭
- 解决React Native安装应用到真机(红米3S)报Execution failed for task ':app:installDebug'的错误
- linux下动态链接库的显式调用和隐式调用
- nginx模块定制开发中介入http模块的方法及NGX_HTTP_CONTENT_PHASE阶段的详细介绍
- springMVC整合dubbo+zookeeper