1. 程式人生 > >解決ajax獲取到資料放到echarts無法顯示的問題

解決ajax獲取到資料放到echarts無法顯示的問題

   後臺部分程式碼:

                returnMap.put("powerLevelCategories", powerLevelCategories);
    		returnMap.put("powerLevelSeries", powerLevelSeries);
		try
		{
			response.setContentType("text/text;charset=UTF-8");// 給傳送到前端的資料
															   // 設定編碼格式
															   // 這邊適合非IE瀏覽器
			String jsonResult = JsonMapper.toJsonString(returnMap);
			PrintWriter out = response.getWriter();
			out.print(jsonResult);// 傳送資料到前端
			out.flush();
			out.close();// 關閉流
		}
		catch (Exception e) 
		{
			e.printStackTrace();
		}
		return null;

由於ajax返回前端的資料為一個json字串,而echart的data需要的是一個數組型別的資料,如果我們在後臺將資料組成“['xxx','aaa','bbb']”傳給前端echart,echart是無法展示的,所以我們需要在前端將資料拆分放入陣列中再傳給echart就可以展示了。

$.ajax({
			        type: "post",  
			        url:  "${ctx}/power/project/total/cityChart?city="+type,
			        async: false,  
			        success: function(data) 
			        { 
 			        	var dataStr = JSON.parse(data);
 			        	categoriesdata = [];
 			        	seriesdata = [];
						var strs1= new Array(); //定義一陣列 
						var strs2= new Array(); //定義一陣列 
						strs1 = dataStr.powerLevelCategories.toString().split(",");
						strs2 = dataStr.powerLevelSeries.toString().split(",");
						//將需要展示的資料放入陣列中
						for(var i = 0; i < strs1.length; i++){
							categoriesdata.push(strs1[i]);
						}
						for(var i = 0; i < strs2.length; i++){
							seriesdata.push(parseInt(strs2[i]));
						}
			        }
				});