解決ajax獲取到資料放到echarts無法顯示的問題
阿新 • • 發佈:2018-11-04
後臺部分程式碼:
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])); } } });