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

最新推荐文章于 2024-02-02 11:15:39 发布

蒋老湿

最新推荐文章于 2024-02-02 11:15:39 发布

阅读量4.5k

点赞数 2

分类专栏： echars 文章标签： echars 饼图事件

本文链接：https://blog.csdn.net/jiangeeq/article/details/53667486

版权

echars 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

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} <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为饼图的value
			departmentPublish.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\"}]"

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