首页 > 技术文章 > EL表达式向Echarts图传数据

cn9826 2020-09-14 10:31 原文

在使用统计图时,需要相统计图传数据,开始时我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         });
页面

 

推荐阅读