Echarts饼状图数据动态获取

首先肯定是引入echarts的相关jar包，地址：https://www.echartsjs.com/zh/download.html

你可以引入在线定制生成的jar包，如下图所示：

然后接下来就自己在线定制吧。

 

划红线的一定要定义，没有定义饼状图的大小，是看不到图表的。

 

var AlarmEcharts = echarts.init(document.getElementById('ConcentratorAlarmEcharts'));
	
	AlarmEcharts.setOption({
		title: {
	        text: '告警饼状图',
	        subtext: '告警统计',
	        left: 'center'
	    },
	    tooltip: {
	        trigger: 'item',
	        formatter: '{a} 
{b} : {c} ({d}%)'
	    },
	    legend: {
	        orient: 'vertical',
	        left: 'left',
	        data: [],
	    },
	    series: [
	        {
	            name: '全国集中器',
	            type: 'pie',
	            radius: '55%',
	            center: ['50%', '60%'],
	            data: [],
	            emphasis: {
	                itemStyle: {
	                    shadowBlur: 10,
	                    shadowOffsetX: 0,
	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
	                }
	            }
	        }
	    ]
	});

ajax动态获取：

var name = [];
	var value = [];
	//异步加载
	$.ajax({
		url : basePath + 'Alarm/getAlarmEcharts.action',
		async : false,
		cache : true,
		dataType : 'json',
		type : 'POST',
		data : {
			admin : admin
		},
		success : function(data) {
			/*var arrname = JSON.stringify(data.name);
			var arrvalue = JSON.stringify(data.value);
			var keyname = JSON.parse(arrname);
			var keyvalue = JSON.parse(arrvalue);
			console.log(keyname);*/
			for(var i = 0; i < data.name.length && i < data.value.length; i++){
				name.push(data.name[i]);
				value.push({
					value : data.value[i],
					name : data.name[i],
				});
			}
			console.log(data.name.length);
			AlarmEcharts.setOption({
				legend : {
					data : name,
				},
				series : [ {
					data : value,
				} ]
			});
		},
		error : function() {
			console.log("饼状图数据获取失败！");
		}
	});

注意：后台获取的数据一定要再定义数组来存放，不然就会出错。我就吃过这个亏，一直想，数据什么的都没问题啊。咋会出现legend没渲染，且显示的饼状图也不正确。

我的ssm方法：

// 获取饼状图显示数据
	@RequestMapping(value = "getAlarmEcharts.action")
	public @ResponseBody Map getAlarmEcharts(String admin) {
		Map map = new HashMap();
		List list = concentratorService.getAllConcentratorData();
		String name[] = new String[list.size()];
		int data[] = new int[list.size()];
		for(int i = 0; i < list.size(); i++){
			name[i] = "集中器:" + list.get(i).getcId();
			data[i] = alarmService.countTimesByCID(Integer.valueOf(list.get(i).getcId()));
		}
		map.put("name", name);
		map.put("value", data);
		return map;
	}

这样就可以完美显示饼状图了。