1. 程式人生 > >ECharts顯示後臺傳送的JSON資料

ECharts顯示後臺傳送的JSON資料

廢話不多說,直接上程式碼:

一、定義一個後臺資料儲存類:

public class BarDTO<T>{

	private String name;
	private String type;
	private List<T> data;
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getType() {
		return type;
	}
	public void setType(String type) {
		this.type = type;
	}
	public List<T> getData() {
		return data;
	}
	public void setData(List<T> data) {
		this.data = data;
	}

}
二、將從後臺獲取的資料儲存到JSON裡面:
public String getTimeChar(){
Map<String, BarDTO<Double>> map = new HashMap<String,BarDTO<Double>>();// 柱狀圖資料
	List<Double> inCosts = new ArrayList<Double>();   //投入成本
	List<Double> outCosts = new ArrayList<Double>();  //產出成本
	List<Double> profits = new ArrayList<Double>();   //利潤

        Calendar now= new GregorianCalendar();
        int y= now.get(Calendar.YEAR);
        inCosts = intoService.getInto(y);
    	outCosts = intoService.getOut(y);
    		
    	for (int i = 0; i < 12; i++) {
    		double temp = outCosts.get(i) - inCosts.get(i);
    		if(temp < 0){
    			profits.add(0.0);
    		}else{
    			profits.add(temp);
    		}
    	}
     
	BarDTO<Double> one = new BarDTO<Double>();
	one.setName("投入資金");
	one.setType("bar");
	one.setData(inCosts);
		
	BarDTO<Double> two = new BarDTO<Double>();
	two.setName("產出資金");
	two.setType("bar");
	two.setData(outCosts);
		
	BarDTO<Double> three = new BarDTO<Double>();
	three.setName("利潤");
	three.setType("bar");
	three.setData(profits);
		
	map.put("inCosts",one);
	map.put("outCosts",two);
	map.put("profits",three);
	return ajaxJsonSuccessMessage("success",map);
}

// AJAX輸出,返回null
		public String ajax(String content, String type) {
			try {
				HttpServletResponse response = ServletActionContext.getResponse();
				response.setContentType(type + ";charset=UTF-8");
				response.setHeader("Pragma", "No-cache");
				response.setHeader("Cache-Control", "no-cache");
				response.setDateHeader("Expires", 0);
				response.getWriter().write(content);
				response.getWriter().flush();
			} catch (IOException e) {
				e.printStackTrace();
			}
			return null;
		}
		
		/**
		 *  輸出JSON成功訊息,返回null
		 * 〈功能簡述〉
		 */
		public String ajaxJsonSuccessMessage(String message, Object data) {
			Map<String, Object> jsonMap = new HashMap<String, Object>();
			jsonMap.put("status", SUCCESS);
			jsonMap.put("message", message);
			jsonMap.put("data", data);
			JSONObject jsonObject = JSONObject.fromObject(jsonMap);
			return ajax(jsonObject.toString(), "text/html");
		}
三、介面jsp中顯示操作:
<div id="pieChart" style="height: 400px"></div>
<script type="text/javascript">
	/* 路徑配置 */
	require.config({
	    paths: {
	        echarts: '${ctx}/echarts2.2.1/build/source'
	    }
	});
	
	/* 餅狀圖 Start*/
    function showPriChart(){
    	/*使用 */
		require([
			'echarts',
			'echarts/chart/bar', // 使用柱狀圖就載入bar模組,按需載入
			'echarts/chart/pie', // 使用餅狀圖就載入pie模組,按需載入
			'echarts/chart/funnel'
			],
		newShowPeiChart
		);
    }
    var myChart;
    
	var inData = [];   //投入
	var outData = [];	//產出
	var proData = [];   //利潤
    
    function newShowPeiChart(ec){
    	$.ajax({
			type : "post",
			url : "${ctx}/toms/highway/getTimeIntoChar.action,
			dataType : 'json',
			error : function(XMLHttpRequest, textStatus, errorThrown) {
                  alert(XMLHttpRequest.status);
			},
			success : function(result) {
				if (result.status == "success") {
					var inCosts = result.data.inCosts;
					var outCosts = result.data.outCosts;
					var profits = result.data.profits;
					if(inCosts != null){
						inData = inCosts;
					}
					if(outCosts != null){
						outData = outCosts;
					}
					if(profits != null){
						proData = profits;
					}
				}
			}
	 	});
    	
    	myChart = ec.init(document.getElementById('pieChart'), 'macarons');// 基於準備好的dom,初始化echarts圖表
    	
    	option = {
   		    title : {
   		        text: '投入產出資金統計圖'
   		    },
   		    tooltip : {
   		        trigger: 'axis'
   		    },
   		    legend: {
   		        data:['投入資金','產出資金','利潤']
   		    },
   		    toolbox: {
   		        show : true,
   		        feature : {
   		            mark : {show: true},
   		            dataView : {show: true, readOnly: false},
   		            magicType : {show: false, type: ['bar']},
   		            restore : {show: true},
   		            saveAsImage : {show: true}
   		        }
   		    },
   		    calculable : true,
   		    xAxis : [
   		        {
   		            type : 'category',
   		            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
   		        }
   		    ],
   		    yAxis : [
   		        {
   		            type : 'value'
   		        }
   		    ],
   		    series : [inData,outData,proData]
   		};
    	
		myChart.setOption(option); // 為echarts物件載入資料
    }
</script>
最後在相應地方呼叫showPriChart()方法即可。