程序博客网 > 淘宝会员成长值怎么算

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

来源：互联网 发布：淘宝会员成长值怎么算 编辑：程序博客网 时间：2024/05/22 14:24

一、介绍

关于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="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="radar" style="width: 600px;height: 400px;"></div>  
  36. <script>  
  37.     var radarChart;  
  38.     $(function () {  
  39.         radarChart = echarts.init(document.getElementById("radar"));  
  40.   
  41.         showRadar();  
  42.     });  
  43.   
  44.     function showRadar() {  
  45.         $.ajax({  
  46.             type: "POST",  
  47.             url: "${ctx}/tec/radarData.html",  
  48.             dataType: 'json',  
  49.             success: function (data) {  
  50.                 var fData = fmt.formtRadarData(data);  
  51.                 var radarOpt = getRadarOpt(fData);  
  52.                 radarOpt.title.text = '雷达图';  
  53.                 radarOpt.series[0].name = '雷达图';  
  54.                 radarChart.setOption(radarOpt);  
  55.             }  
  56.         });  
  57.     }  
  58. </script>  
  59. </body>  
  60. </html>  
这里只介绍这三种图表的实现，其它一般图表的实现方法类似，echarts图表实现接入真实数据的关键是数据格式化，对于特殊图表需要根据其数据特征写出相应的数据格式化方法。

ssmec源码地址：下载ssmec源码

阅读全文
0 0
淘宝会员成长值怎么算 淘宝会员成长值怎么算
原创粉丝点击
热门IT博客
软件精灵安居客软件精灵安居客
unity3d室内漫游场景unity3d室内漫游场景
天下3金坎子捏脸数据
mac airplay
网站seo公司
做淘宝怎么样
黄金太阳传提数据
三坐标编程指导书
android 开启移动网络
索尼 知乎
php空间免费公益主机
张千帆 宪法 知乎
影音先锋mac版
android外卖系统源码
电视视频软件
java pom
三维立体字体设计软件
修改美萍数据软件
mac常用工具
修改ftp端口号
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 门头广告字价格 广告字安装 精品广告字 广告字焊机 广告字加工 广告字的制作 广告字制作教程 广告字开槽机价格 led广告字 广告字图片 广告字设计 广告字价格 楼顶广告字 广告金属字 广告字种类图片 广告学科目 广告专业就业前景 广告设计学校 广告设计网站 广告学专业大学排名 广告学概论 广告学就业前景 广告学就业前景如何 广告学就业 广告学就业前景及工资 广告学课程 广告学专业好吗 学广告 广告学就业方向 广告学专业就业方向 广告学专业学校 广告学专业怎么样 广告学专业 课程 广告学专业前景 广告学学什么 广告学专业的大学 广告学哪个学校好 广告学专业出国留学 广告学入门 广告学专业教材 广告学的课程

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里