1. 程式人生 > 實用技巧 >EL表示式向Echarts圖傳資料

EL表示式向Echarts圖傳資料

在使用統計圖時,需要相統計圖傳資料,開始時我EL表示式取不到值,於是用了AJAX傳值,做餅圖時還好,但是做柱狀圖時發現需要傳兩個json資料,這時候便想到了用EL傳另一個值,
經過老師的指導,EL取值時是全域性變數,並沒有進入到Servlet中,於是在跳轉頁面時就呼叫Servlet方法,發現果然可以傳到
程式碼如下:

       public void statisticsPage(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        logger.info(
"enter statisticsPage method"); statisticsMajorGrade(request, response); forward("WEB-INF/page/member/memberChart.jsp", request, response); } public void statisticsMajorGrade(HttpServletRequest request, HttpServletResponse response) throws IOException { // 所有的專業 List<Major> majorList = majorService.searchListAll(null
); // 所有的年級 List<Member> allMember = memberService.searchListAll(null); // 獲取全部年級 List<String> gradeList = new ArrayList<>(); HashSet<String> list = new HashSet<String>(); // 通過HashSet獲取可以去除重複 for (Member m : allMember) { String grade
= m.getGrade(); list.add(grade); } // 迭代器遍歷HashSet獲取列表中的值 Iterator<String> iterator = list.iterator(); while (iterator.hasNext()) { gradeList.add(iterator.next()); } logger.info("gradeList = " + gradeList); // 統計圖頭部的訊息 List<String> headList = new ArrayList<>(); headList.add("major"); for (String grade : gradeList) { headList.add(grade); } logger.info("headList = " + headList); List<List<String>> result = new ArrayList<>(); for (Major major : majorList) { List<String> majorGradeData = new ArrayList<>(); majorGradeData.add(major.getMajorName()); for (String grade : gradeList) { Map<String, Object> conditions = new HashMap<>(); conditions.put("grade", grade); conditions.put("majorId", major.getMajorId()); int count = memberService.searchCount(conditions); majorGradeData.add(count + ""); } logger.info(majorGradeData); result.add(majorGradeData); } result.add(0, headList); logger.info("result = " + result); ObjectMapper objectMapper = new ObjectMapper(); // 柱狀圖的個數和年級個數一一對應,需要加type:bar StringBuffer sbf = null; for (String grade : gradeList) { if (sbf == null) { sbf = new StringBuffer("[{type : 'bar'}"); } else { sbf.append(",{type:'bar'}"); } } if (sbf == null) { sbf = new StringBuffer("[]"); } else { sbf.append("]"); } logger.info("result = " + result); String json = objectMapper.writeValueAsString(result); response.getWriter().print(json); logger.info("bars = " + sbf.toString()); request.setAttribute("bars", sbf.toString()); logger.info("json3 = " + json); logger.info(sbf); }

頁面:

 1  var bar2 = ${bars};
 2         jq.ajax({
 3             type: "post",
 4             async: true,            //非同步請求(同步請求將會鎖住瀏覽器,使用者其他操作必須等待請求完成才可以執行)
 5             url: "/BaseServlet.do?servlet=MemberServlet&method=statisticsMajorGrade",    //請求傳送到TestServlet處
 6             dataType: "json",        //返回資料形式為json
 7             success: function (result) {
 8                 console.log("3" + result);
 9                 console.log(result[1]);
10                 console.log(result.length);
11                 // json字串轉換成json物件
12                 //請求成功時執行該函式內容,result即為伺服器返回的json物件
13                 if (result) {
14                     console.log("進入");
15                     for (var i = 0; i < result.length; i++) {
16                         console.log(result[i]);
17                         item.push(result[i]);
18                     }
19                     console.log("item = " + item);
20                     majorChart.hideLoading();    //隱藏載入動畫
21                     showMajorGrade(item,bar2)
22                 }
23             }
24         });
頁面