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} <br/>{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<String,Object> getAlarmEcharts(String admin) {
		Map<String,Object> map = new HashMap<String,Object>();
		List<Concentrator> 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;
	}

這樣就可以完美顯示餅狀圖了。