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 });
页面
版权声明:本文为cn9826原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。