echars饼图动态赋值并给饼图添加联动事件
在给echars饼图赋值数据data的同时，我们需要知道它所需要的诗句格式是什么样的，饼图与玫瑰图的数据格式都为key-value，即Map
var departmentRes = echarts.init(document.getElementById('department_res'));
//这一行是初始化echars图表对象，这就不多说了，看重点
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}
{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下面来说说联动事件是怎么做的
// 图表点击事件
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
"[{\"deptName\":\"测试部\",\"publishCount\":128,\"deptId\":\"44\"},{\"deptName\":\"板材事业部\",\"publishCount\":339,\"deptId\":\"461\"},{\"deptName\":\"武汉交易中心\",\"publishCount\":8,\"deptId\":\"475\"},{\"deptName\":\"POP产品研发部\",\"publishCount\":752,\"deptId\":\"721\"}]"
学会了吗，学会的留个脚印评论以下。