实战使用SSM+ajax+echarts制作报表图

时间  2020-12-30
标签 java echarts 栏目 Ajax 繁體版
原文   原文链接

一、介绍

关于echarts的介绍及测试环境用法请看：echarts图表的用法。下面介绍的是echarts正式环境的用法，在正式环境中需要从后台数据库读取数据并转化为echarts各种图表的option中需要的数据格式，把转化后的数据放到option中相应的属性上才能实现真实的效果。由于根据echarts官网解释echarts图表的option是配置数据的万能接口。所以在使用的时候注意到图表变化是通过更新option中的数据并重新设置option来实现的，所以把option和数据格式化抽取到一个文件中，把后台读取的数据格式化并放到option中相应的位置上即可。

二、使用

下面将个人在开发项目实现各个echarts图表的一般流程记录下来，以备以后可以使用。

该项目使用的是spring、springmvc、mybatis框架，前端使用jquery，echarts图表接入真实数据一般需要根据url调用后台查询数据库中的数据。

新建一个web工程ssmec

准备：配置ssm框架，配置echarts相关文件及jquery文件请看：echarts图表的使用，由于在《echarts图表的使用》中描述了基本的用法，所以这里我将《echarts图表的使用》创建的testec中的ui复制过来并将不需要的删除，把testec中的ecjsp中的文件复制到ssmec中的WEB-INF/jsp下并把不需要的文件删掉。

0、控制层文件名：TestEc，文件头注解@RequestMapping("tec")，构造数据在这个类EcDtUtils中实现；图表option和数据格式化方法放到cfgopts.js中。

1、实现柱状图Bar

(1)、写后台action方法及返回json数据的方法

action方法：

[java]  view plain  copy
  1. @RequestMapping("/toBar")    
  2.    public ModelAndView toBar(HttpServletRequest request) {    
  3.        return new ModelAndView("ecjsp/testBar");    
  4.    }  

返回json数据方法：

[java]  view plain  copy
  1. @RequestMapping("/barData")  
  2.     @ResponseBody  
  3.     public List<HashMap<String, Object>> barData(HttpServletRequest request) {  
  4.         /* 
  5.         测试数据，正式环境从数据库读取 
  6.          */  
  7.         List<HashMap<String, Object>> bList = EcDtUtils.getBarRndVal();  
  8.         return bList;  
  9.     }  

说明：这里只是模拟从后台读取数据，在正式使用的时候是从数据库读取的，我这里在一个类EcDtUtils中写一个方法构造数据，具体实现看源代码。

(2)、在cfgopts.js中写数据格式化方法：

[javascript]  view plain  copy
  1. /** 
  2.     * 格式化data，data格式如:[{name:nameValue,value:valueVal},...] 
  3.     * 
  4.     * @param data 
  5.     * @returns {object} 
  6.     */  
  7.    formtBarData: function (data) {  
  8.        var xAxData = [];  
  9.        var serData = [];  
  10.   
  11.        for (var i = 0; i < data.length; i++) {  
  12.            xAxData.push(data[i].name || "");  
  13.            serData.push({  
  14.                name: data[i].name,  
  15.                value: data[i].value || 0  
  16.            });  
  17.        }  
  18.   
  19.        return {  
  20.            xAxData: xAxData,  
  21.            serData: serData  
  22.        };  
  23.    }  
(3)、在testBar文件中调用后台，格式化数据，设置option：

[javascript]  view plain  copy
  1. function showBar() {  
  2.     $.ajax({  
  3.         type: "GET",  
  4.         url: "${ctx}/tec/barData.html",  
  5.         dataType: 'json',  
  6.         success: function (data) {  
  7.             var barOpt = getBarOpt();  
  8.             barOpt.title.text = '柱形图';  
  9.             barOpt.xAxis[0].name = '日期';  
  10.             barOpt.yAxis[0].name = '数量';  
  11.             barOpt.series[0].name = '柱形图';  
  12.             var fData = fmt.formtBarData(data);  
  13.             barOpt.xAxis[0].data = fData.xAxData;  
  14.             barOpt.series[0].data = fData.serData;  
  15.             barChart.setOption(barOpt);  
  16.         }  
  17.     });  
  18. }  
说明：getBarOpt()方法用于获取bar的option，具体请在cfgopts.js中查看
运行ssmec，在浏览器地址输入：http://localhost:8080/ssmec/tec/toBar.html

运行效果：


testBar.jsp文件代码：

[html]  view plain  copy
  1. <%@ page language="java" contentType="text/html; charset=utf-8" %>  
  2. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  
  3. <%  
  4.     String path = request.getContextPath();  
  5.     String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";  
  6. %>  
  7. <c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>  
  8. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  9. <html>  
  10. <head>  
  11.     <base href="<%=basePath%>">  
  12.   
  13.     <title>My JSP 'map.jsp' starting page</title>  
  14.   
  15.     <meta http-equiv="pragma" content="no-cache">  
  16.     <meta http-equiv="cache-control" content="no-cache">  
  17.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  18.     <!-- 
  19.     <link rel="stylesheet" type="text/css" href="styles.css"> 
  20.     -->  
  21.     <script type="text/javascript" src="${ctx }/ui/jquery-1.7.2.min.js"></script>  
  22.     <script type="text/javascript" src="${ctx }/ui/echarts/echarts-3.2.3/dist/echarts.js"></script>  
  23.     <script type="text/javascript" src="${ctx }/ui/echarts/echarts-3.2.3/options/cfgopts.js"></script>  
  24. </head>  
  25.   
  26. <body>  
  27. <style>  
  28.     html, body, #main {  
  29.         width: 100%;  
  30.         height: 100%;  
  31.         margin: 0;  
  32.         background-color: #00CC33;  
  33.     }  
  34. </style>  
  35. <div id="bar" style="width: 600px;height: 400px;"></div>  
  36. <script>  
  37.     var barChart;  
  38.     $(function () {  
  39.         barChart = echarts.init(document.getElementById("bar"));  
  40.   
  41.         showBar();  
  42.     });  
  43.   
  44.     function showBar() {  
  45.         $.ajax({  
  46.             type: "GET",  
  47.             url: "${ctx}/tec/barData.html",  
  48.             dataType: 'json',  
  49.             success: function (data) {  
  50.                 var barOpt = getBarOpt();  
  51.                 barOpt.title.text = '柱形图';  
  52.                 barOpt.xAxis[0].name = '日期';  
  53.                 barOpt.yAxis[0].name = '数量';  
  54.                 barOpt.series[0].name = '柱形图';  
  55.                 var fData = fmt.formtBarData(data);  
  56.                 barOpt.xAxis[0].data = fData.xAxData;  
  57.                 barOpt.series[0].data = fData.serData;  
  58.                 barChart.setOption(barOpt);  
  59.             }  
  60.         });  
  61.     }  
  62. </script>  
  63. </body>  
  64. </html>  

2、实现折线图Line

(1)、写后台action方法及返回json数据的方法

action方法：

[java]  view plain  copy
  1. @RequestMapping("/toLine")  
  2. public ModelAndView toLine(HttpServletRequest request) {  
  3.     return new ModelAndView("ecjsp/testLine");  
  4. }  

返回json数据方法：

[java]  view plain  copy
  1. @RequestMapping("/lineData")  
  2. @ResponseBody  
  3. public List<HashMap<String, Object>> lineData(HttpServletRequest request) {  
  4.     /* 
  5.     测试数据，正式环境从数据库读取 
  6.      */  
  7.     List<HashMap<String, Object>> lList = EcDtUtils.getLineRndVal();  
  8.     return lList;  
  9. }  

说明：这里只是模拟从后台读取数据，在正式使用的时候是从数据库读取的，我这里在一个类EcDtUtils中写一个方法构造数据，具体实现看源代码。

(2)、在cfgopts.js中写数据格式化方法：

[javascript]  view plain  copy
  1. /** 
  2.     * 格式化data，data格式如:[{group:groupVal,name:nameValue,value:valueVal,...] 
  3.  * 
  4.     * @param data 
  5.     * @returns {object} 
  6.     */  
  7.    formtLineData: function (data) {  
  8.        var xAxis = [];  
  9.        var group = [];  
  10.        var series = [];  
  11.        var type = 'line';  
  12.   
  13.        for (var i = 0; i < data.length; i++) {  
  14.            for (var j = 0; j < xAxis.length && xAxis[j] != data[i].name; j++);  
  15.            if (j == xAxis.length) {  
  16.                xAxis.push(data[i].name);  
  17.            }  
  18.            for (var k = 0; k < group.length && group[k] != data[i].group; k++);  
  19.            if (k == group.length) {  
  20.                group.push(data[i].group);  
  21.            }  
  22.        }  
  23.   
  24.        for (var i = 0; i < group.length; i++) {  
  25.            var tData = [];  
  26.            var valMap = {};  
  27.   
  28.            for (var j = 0; j < data.length; j++) {  
  29.                if (group[i] == data[j].group) {  
  30.                    valMap[data[j].name] = data[j].value;  
  31.                }  
  32.            }  
  33.   
  34.            for (var n = 0; n < xAxis.length; n++) {  
  35.                tData.push(valMap[xAxis[n]]);  
  36.            }  
  37.   
  38.            var tSeries = {  
  39.                name: group[i],  
  40.                data: tData,  
  41.                type: type  
  42.            };  
  43.   
  44.            series.push(tSeries);  
  45.        }  
  46.   
  47.        return {  
  48.            category: group,  
  49.            xAxis: xAxis,  
  50.            series: series  
  51.        };  
  52.    }  
(3)、在testLine文件中调用后台，格式化数据，设置option：

[javascript]  view plain  copy
  1. function showLine() {  
  2.     $.ajax({  
  3.         type: "GET",  
  4.         url: "${ctx}/tec/lineData.html",  
  5.         dataType: 'json',  
  6.         success: function (data) {  
  7.             var lineOpt = getLineOpt();  
  8.             lineOpt.title.text = '折线图';  
  9.             var fData = fmt.formtLineData(data);  
  10.             lineOpt.xAxis[0].data = fData.xAxis;  
  11.             lineOpt.series = fData.series;  
  12.             lineChart.setOption(lineOpt);  
  13.         }  
  14.     });  
  15. }  
说明：getLineOpt()方法用于获取line的option，具体请在cfgopts.js中查看
运行ssmec，在浏览器地址输入：http://localhost:8080/ssmec/tec/toLine.html

运行效果：


testLine.jsp文件代码：
[html]  view plain  copy
  1. <%@ page language="java" contentType="text/html; charset=utf-8" %>  
  2. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  
  3. <%  
  4.     String path = request.getContextPath();  
  5.     String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";  
  6. %>  
  7. <c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>  
  8. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  9. <html>  
  10. <head>  
  11.     <base href="<%=basePath%>">  
  12.   
  13.     <title>My JSP 'map.jsp' starting page</title>  
  14.   
  15.     <meta http-equiv="pragma" content="no-cache">  
  16.     <meta http-equiv="cache-control" content="no-cache">  
  17.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  18.     <!-- 
  19.     <link rel="stylesheet" type="text/css" href="styles.css"> 
  20.     -->  
  21.     <script src="${ctx }/ui/jquery-1.7.2.min.js"></script>  
  22.     <script src="${ctx }/ui/echarts/echarts-3.2.3/dist/echarts.js"></script>  
  23.     <script src="${ctx }/ui/echarts/echarts-3.2.3/options/cfgopts.js"></script>  
  24. </head>  
  25.   
  26. <body>  
  27. <style>  
  28.     html, body, #main {  
  29.         width: 100%;  
  30.         height: 100%;  
  31.         margin: 0;  
  32.         background-color: #00CC33;  
  33.     }  
  34. </style>  
  35. <div id="line" style="width: 600px;height: 400px;"></div>  
  36. <script>  
  37.     var lineChart;  
  38.     $(function () {  
  39.         lineChart = echarts.init(document.getElementById("line"));  
  40.   
  41.         showLine();  
  42.     });  
  43.   
  44.     function showLine() {  
  45.         $.ajax({  
  46.             type: "GET",  
  47.             url: "${ctx}/tec/lineData.html",  
  48.             dataType: 'json',  
  49.             success: function (data) {  
  50.                 var lineOpt = getLineOpt();  
  51.                 lineOpt.title.text = '折线图';  
  52.                 var fData = fmt.formtLineData(data);  
  53.                 lineOpt.xAxis[0].data = fData.xAxis;  
  54.                 lineOpt.series = fData.series;  
  55.                 lineChart.setOption(lineOpt);  
  56.             }  
  57.         });  
  58.     }  
  59. </script>  
  60. </body>  
  61. </html>  

3、实现雷达图Radar

(1)、写后台action方法及返回json数据的方法

action方法：

[java]  view plain  copy
  1. @RequestMapping("/toRadar")  
  2. public ModelAndView toRadar(HttpServletRequest request) {  
  3.     return new ModelAndView("ecjsp/testRadar");  
  4. }  

返回json数据方法：

[java]  view plain  copy
  1. @RequestMapping("/radarData")  
  2. @ResponseBody  
  3. public List<HashMap<String, Object>> radarData(HttpServletRequest request) {  
  4.     /* 
  5.     测试数据，正式环境从数据库读取 
  6.      */  
  7.     List<HashMap<String, Object>> rList = EcDtUtils.getRadarRndVal();  
  8.     return rList;  
  9. }  

说明：这里只是模拟从后台读取数据，在正式使用的时候是从数据库读取的，我这里在一个类EcDtUtils中写一个方法构造数据，具体实现看源代码。

(2)、在cfgopts.js中写数据格式化方法：

[javascript]  view plain  copy
  1. /** 
  2.  * 格式化雷达data，data格式如:[{group:groupVal,name:nameValue,value:valueVal},...] 
  3.  * @param data 
  4.  * @param type 
  5.  * @returns {Object} 
  6.  */  
  7. formtRadarData: function (data) {  
  8.     var indicator = [];  
  9.     var group = [];  
  10.     var serDats = [];  
  11.     var mVal = 100;  
  12.     for (var i = 0, len = data.length; i < len; i++) {  
  13.         if (data[i].value > mVal) {  
  14.             mVal = data[i].value;  
  15.         }  
  16.     }  
  17.     for (var i = 0; i < data.length; i++) {  
  18.         for (var j = 0; j < indicator.length && indicator[j].text != data[i].name; j++);  
  19.         if (j == indicator.length) {  
  20.             indicator.push({  
  21.                 max: mVal + 10,  
  22.                 text: data[i].name  
  23.             });  
  24.         }  
  25.         for (var k = 0; k < group.length && group[k] != data[i].group; k++);  
  26.         if (k == group.length) {  
  27.             group.push(data[i].group);  
  28.         }  
  29.     }  
  30.   
  31.     for (var i = 0; i < group.length; i++) {  
  32.         var tData = [];  
  33.         var valMap = {};  
  34.   
  35.         for (var j = 0; j < data.length; j++) {  
  36.             if (group[i] == data[j].group) {  
  37.                 valMap[data[j].name] = data[j].value;  
  38.             }  
  39.         }  
  40.   
  41.         for (var n = 0; n < indicator.length; n++) {  
  42.             tData.push(valMap[indicator[n].text]);  
  43.         }  
  44.   
  45.         var tSeries = {  
  46.             name: group[i],  
  47.             value: tData  
  48.         };  
  49.         serDats.push(tSeries);  
  50.     }  
  51.     return {  
  52.         category: group,  
  53.         indicator: indicator,  
  54.         serData: serDats  
  55.     };  
  56. }  
(3)、在testRadar文件中调用后台，格式化数据，设置option：
[javascript]  view plain  copy
  1. function showRadar() {  
  2.     $.ajax({  
  3.         type: "POST",  
  4.         url: "${ctx}/tec/radarData.html",  
  5.         dataType: 'json',  
  6.         success: function (data) {  
  7.             var fData = fmt.formtRadarData(data);  
  8.             var radarOpt = getRadarOpt(fData);  
  9.             radarOpt.title.text = '雷达图';  
  10.             radarOpt.series[0].name = '雷达图';  
  11.             radarChart.setOption(radarOpt);  
  12.         }  
  13.     });  
  14. }  
说明：getRadarOpt(data)方法用于获取radar的option，具体请在cfgopts.js中查看
运行ssmec，在浏览器地址输入：http://localhost:8080/ssmec/tec/toRadar.html

运行效果：


testRadar.jsp文件代码：
[html]  view plain  copy
  1. <%@ page language="java" contentType="text/html; charset=utf-8" %>  
  2. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  
  3. <%  
  4.     String path = request.getContextPath();  
  5.     String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";  
  6. %>  
  7. <c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>  
  8. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  9. <html>  
  10. <head>  
  11.     <base href="<%=basePath%>">  
  12.   
  13.     <title>My JSP 'map.jsp' starting page</title>  
  14.   
  15.     <meta http-equiv="pragma" content="no-cache">  
  16.     <meta http-equiv  
  17. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  18. <html>  
  19. <head>  
  20.     <base href="<%=basePath%>">  
  21.   
  22.     <title>My JSP 'map.jsp' starting page</title>  
  23.   
  24.     <meta http-equiv="pragma" content="no-cache">  
  25.     <meta http-equiv="cache-control" content
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程