echars饼图动态赋值并给饼图添加联动事件

在给echars饼图赋值数据data的同时，我们需要知道它所需要的诗句格式是什么样的，饼图与玫瑰图的数据格式都为key-value，即Map<String,Object>这样的数据格式，下面我们看看具体代码，之后我做具体说明

这一行是初始化echars图表对象，这就不多说了，看重点

var departmentRes = echarts.init(document.getElementById('department_res'));option = {     toolbox: {        feature: {            dataView: {show: true, readOnly: false},            magicType: {show: true},            restore: {show: true},    myTool : {                show : true,                title : '自定义扩展方法',                icon : 'image://http://echarts.baidu.com/images/favicon.png',                onclick : function (){                    pieToLine();                }            },            saveAsImage: {show: true}        }    },    tooltip : {        trigger: 'item',        formatter: "{a} <br/>{b} : {c} ({d}%)"    },    visualMap: {        show: false,        min: 80,        max: 600,         inRange: {             colorLightness: [0, 1]         }    },    series : [        {            name:'访问来源',            type:'pie',            radius : '70%',            center: ['50%', '50%'],            data:[     // series中的data数据清空删除掉，因为我们要动态赋值             ].sort(function (a, b) { return a.value - b.value}),            roseType: 'angle',            label: {                normal: {                    textStyle: {                                           }                }            },            labelLine: {                normal: {                    smooth: 0.2,                    length: 10,                    length2: 20                }            },            itemStyle: {                normal: {    color: '#c23531',//每块元素的颜色                        shadowBlur: 20,//阴影模糊程度                        shadowColor: 'rgba(0, 0, 0, 0.5)'//阴影的颜色                }            }        }    ]};// 使用刚指定的配置项和数据显示图表。departmentRes.setOption(option);//查询，我这是点击按钮或者onload的时候调用方法显示图表function loadDrugs() {var date = $("#time2").val();    $.post('$!{urlTool.getResourcePoolDataURL('DEPARTMENT_RES_PIE')}', {date: date    // 后台controller需要查询条件，所以需要}, function(data) {var array = [];  //这就是我们所需要的data数据数组了，var colors = [];if (departmentRes){// 清空当前实例，会移除实例中所有的组件和图表。清空后调用 getOption 方法返回一个{}空对象。departmentRes.clear();}var data = eval('(' + data + ')');for(var i=0;i<data.length;i++){var departmentPublish ={};       // 先来创建一个js对象            departmentPublish.name = data[i].deptName;   // 我们给这个对象名字，name 为饼图的name            departmentPublish.value = data[i].publishCount;   // 我们给这个对象值，value为饼图的valuedepartmentPublish.id=data[i].deptId;   // 此id值会在图表显示，但是如果你要做事件的话可以用到array[i] = departmentPublish;//colors[i] = "rgb(" + (12*i+5) + "," + (15*i+10) + "," + (18*i+15) + ")";}  option.series[0].data = array;// 赋值结束//option.color = colors;  departmentRes.setOption(option);})$("#time2").val(date);} 

下面来说说联动事件是怎么做的

// 图表点击事件departmentRes.on('click',function(param){//param可以获取一些图中信息， param.dataIndex是第几个的意思var index = param.dataIndex;var pieId = option.series[0].data[index].id;// 这时就用到了上面所说的Id属性了var flag = true;$.ajax({async: false,type: "post",url: "$!{urlTool.getResourcePoolDataURL('OWN_THREE_DEPARTMENT')}",dataType: "json",success: function(data){if(data == "pass"){var date = $("#time2").val();var ifr = document.getElementById('mainframe4');   // 此为父页面中的iframe框页面重定向刷新ifr.src = "$!{urlTool.getResourcePoolDataURL('DEPART_RES_RANKE_IFRAME')}" +"?date=" + date + "&departmentId=" + pieId; }else{    // 返回信息    var result = typeof data == "object" ? data : eval('(' + data + ')');    result.forEach(function(e){    if(e.id == pieId){    flag = false;    var date = $("#time2").val();    var ifr = document.getElementById('mainframe4');    ifr.src = "$!{urlTool.getResourcePoolDataURL('DEPART_RES_RANKE_IFRAME')}" +"?date=" + date + "&departmentId=" + pieId;     }    });    if(flag){    $.popDialog.warning("该部门不是您所管辖的部门！");    }}},error:function(){$.popDialog.error("程序发生错误，请联系技术人员！");}});});

下面来看看后台返回到前台的数据格式List<map<string,object>>转json

"[{\"deptName\":\"测试部\",\"publishCount\":128,\"deptId\":\"44\"},{\"deptName\":\"板材事业部\",\"publishCount\":339,\"deptId\":\"461\"},{\"deptName\":\"武汉交易中心\",\"publishCount\":8,\"deptId\":\"475\"},{\"deptName\":\"POP产品研发部\",\"publishCount\":752,\"deptId\":\"721\"}]"

学会了吗，学会的留个脚印评论以下。