實戰使用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教程