基于ssm框架正式环境echarts图表的使用
来源：互联网 发布：jetbrains软件 编辑：程序博客网 时间：2024/05/30 19:34
一、介绍
关于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方法：
@RequestMapping("/toBar") public ModelAndView toBar(HttpServletRequest request) { return new ModelAndView("ecjsp/testBar"); }返回json数据方法：
@RequestMapping("/barData") @ResponseBody public List<HashMap<String, Object>> barData(HttpServletRequest request) { /* 测试数据，正式环境从数据库读取 */ List<HashMap<String, Object>> bList = EcDtUtils.getBarRndVal(); return bList; }说明：这里只是模拟从后台读取数据，在正式使用的时候是从数据库读取的，我这里在一个类EcDtUtils中写一个方法构造数据，具体实现看源代码。
(2)、在cfgopts.js中写数据格式化方法：
/** * 格式化data，data格式如:[{name:nameValue,value:valueVal},...] * * @param data * @returns {object} */ formtBarData: function (data) { var xAxData = []; var serData = []; for (var i = 0; i < data.length; i++) { xAxData.push(data[i].name || ""); serData.push({ name: data[i].name, value: data[i].value || 0 }); } return { xAxData: xAxData, serData: serData }; }(3)、在testBar文件中调用后台，格式化数据，设置option： function showBar() { $.ajax({ type: "GET", url: "${ctx}/tec/barData.html", dataType: 'json', success: function (data) { var barOpt = getBarOpt(); barOpt.title.text = '柱形图'; barOpt.xAxis[0].name = '日期'; barOpt.yAxis[0].name = '数量'; barOpt.series[0].name = '柱形图'; var fData = fmt.formtBarData(data); barOpt.xAxis[0].data = fData.xAxData; barOpt.series[0].data = fData.serData; barChart.setOption(barOpt); } }); }说明：getBarOpt()方法用于获取bar的option，具体请在cfgopts.js中查看运行ssmec，在浏览器地址输入：http://localhost:8080/ssmec/tec/toBar.html
运行效果：
testBar.jsp文件代码：
<%@ page language="java" contentType="text/html; charset=utf-8" %><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";%><c:set var="ctx" value="${pageContext.request.contextPath}"></c:set><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head> <base href="<%=basePath%>"> <title>My JSP 'map.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript" src="${ctx }/ui/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="${ctx }/ui/echarts/echarts-3.2.3/dist/echarts.js"></script> <script type="text/javascript" src="${ctx }/ui/echarts/echarts-3.2.3/options/cfgopts.js"></script></head><body><style> html, body, #main { width: 100%; height: 100%; margin: 0; background-color: #00CC33; }</style><div id="bar" style="width: 600px;height: 400px;"></div><script> var barChart; $(function () { barChart = echarts.init(document.getElementById("bar")); showBar(); }); function showBar() { $.ajax({ type: "GET", url: "${ctx}/tec/barData.html", dataType: 'json', success: function (data) { var barOpt = getBarOpt(); barOpt.title.text = '柱形图'; barOpt.xAxis[0].name = '日期'; barOpt.yAxis[0].name = '数量'; barOpt.series[0].name = '柱形图'; var fData = fmt.formtBarData(data); barOpt.xAxis[0].data = fData.xAxData; barOpt.series[0].data = fData.serData; barChart.setOption(barOpt); } }); }</script></body></html>2、实现折线图Line
(1)、写后台action方法及返回json数据的方法
action方法：
@RequestMapping("/toLine") public ModelAndView toLine(HttpServletRequest request) { return new ModelAndView("ecjsp/testLine"); }返回json数据方法：
@RequestMapping("/lineData") @ResponseBody public List<HashMap<String, Object>> lineData(HttpServletRequest request) { /* 测试数据，正式环境从数据库读取 */ List<HashMap<String, Object>> lList = EcDtUtils.getLineRndVal(); return lList; }说明：这里只是模拟从后台读取数据，在正式使用的时候是从数据库读取的，我这里在一个类EcDtUtils中写一个方法构造数据，具体实现看源代码。
(2)、在cfgopts.js中写数据格式化方法：
/** * 格式化data，data格式如:[{group:groupVal,name:nameValue,value:valueVal,...] * * @param data * @returns {object} */ formtLineData: function (data) { var xAxis = []; var group = []; var series = []; var type = 'line'; for (var i = 0; i < data.length; i++) { for (var j = 0; j < xAxis.length && xAxis[j] != data[i].name; j++); if (j == xAxis.length) { xAxis.push(data[i].name); } for (var k = 0; k < group.length && group[k] != data[i].group; k++); if (k == group.length) { group.push(data[i].group); } } for (var i = 0; i < group.length; i++) { var tData = []; var valMap = {}; for (var j = 0; j < data.length; j++) { if (group[i] == data[j].group) { valMap[data[j].name] = data[j].value; } } for (var n = 0; n < xAxis.length; n++) { tData.push(valMap[xAxis[n]]); } var tSeries = { name: group[i], data: tData, type: type }; series.push(tSeries); } return { category: group, xAxis: xAxis, series: series }; }(3)、在testLine文件中调用后台，格式化数据，设置option： function showLine() { $.ajax({ type: "GET", url: "${ctx}/tec/lineData.html", dataType: 'json', success: function (data) { var lineOpt = getLineOpt(); lineOpt.title.text = '折线图'; var fData = fmt.formtLineData(data); lineOpt.xAxis[0].data = fData.xAxis; lineOpt.series = fData.series; lineChart.setOption(lineOpt); } }); }说明：getLineOpt()方法用于获取line的option，具体请在cfgopts.js中查看运行ssmec，在浏览器地址输入：http://localhost:8080/ssmec/tec/toLine.html
运行效果：
testLine.jsp文件代码：
<%@ page language="java" contentType="text/html; charset=utf-8" %><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";%><c:set var="ctx" value="${pageContext.request.contextPath}"></c:set><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head> <base href="<%=basePath%>"> <title>My JSP 'map.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script src="${ctx }/ui/jquery-1.7.2.min.js"></script> <script src="${ctx }/ui/echarts/echarts-3.2.3/dist/echarts.js"></script> <script src="${ctx }/ui/echarts/echarts-3.2.3/options/cfgopts.js"></script></head><body><style> html, body, #main { width: 100%; height: 100%; margin: 0; background-color: #00CC33; }</style><div id="line" style="width: 600px;height: 400px;"></div><script> var lineChart; $(function () { lineChart = echarts.init(document.getElementById("line")); showLine(); }); function showLine() { $.ajax({ type: "GET", url: "${ctx}/tec/lineData.html", dataType: 'json', success: function (data) { var lineOpt = getLineOpt(); lineOpt.title.text = '折线图'; var fData = fmt.formtLineData(data); lineOpt.xAxis[0].data = fData.xAxis; lineOpt.series = fData.series; lineChart.setOption(lineOpt); } }); }</script></body></html>3、实现雷达图Radar
(1)、写后台action方法及返回json数据的方法
action方法：
@RequestMapping("/toRadar") public ModelAndView toRadar(HttpServletRequest request) { return new ModelAndView("ecjsp/testRadar"); }返回json数据方法：
@RequestMapping("/radarData") @ResponseBody public List<HashMap<String, Object>> radarData(HttpServletRequest request) { /* 测试数据，正式环境从数据库读取 */ List<HashMap<String, Object>> rList = EcDtUtils.getRadarRndVal(); return rList; }说明：这里只是模拟从后台读取数据，在正式使用的时候是从数据库读取的，我这里在一个类EcDtUtils中写一个方法构造数据，具体实现看源代码。
(2)、在cfgopts.js中写数据格式化方法：
/** * 格式化雷达data，data格式如:[{group:groupVal,name:nameValue,value:valueVal},...] * @param data * @param type * @returns {Object} */ formtRadarData: function (data) { var indicator = []; var group = []; var serDats = []; var mVal = 100; for (var i = 0, len = data.length; i < len; i++) { if (data[i].value > mVal) { mVal = data[i].value; } } for (var i = 0; i < data.length; i++) { for (var j = 0; j < indicator.length && indicator[j].text != data[i].name; j++); if (j == indicator.length) { indicator.push({ max: mVal + 10, text: data[i].name }); } for (var k = 0; k < group.length && group[k] != data[i].group; k++); if (k == group.length) { group.push(data[i].group); } } for (var i = 0; i < group.length; i++) { var tData = []; var valMap = {}; for (var j = 0; j < data.length; j++) { if (group[i] == data[j].group) { valMap[data[j].name] = data[j].value; } } for (var n = 0; n < indicator.length; n++) { tData.push(valMap[indicator[n].text]); } var tSeries = { name: group[i], value: tData }; serDats.push(tSeries); } return { category: group, indicator: indicator, serData: serDats }; }(3)、在testRadar文件中调用后台，格式化数据，设置option： function showRadar() { $.ajax({ type: "POST", url: "${ctx}/tec/radarData.html", dataType: 'json', success: function (data) { var fData = fmt.formtRadarData(data); var radarOpt = getRadarOpt(fData); radarOpt.title.text = '雷达图'; radarOpt.series[0].name = '雷达图'; radarChart.setOption(radarOpt); } }); }说明：getRadarOpt(data)方法用于获取radar的option，具体请在cfgopts.js中查看运行ssmec，在浏览器地址输入：http://localhost:8080/ssmec/tec/toRadar.html
运行效果：
testRadar.jsp文件代码：
<%@ page language="java" contentType="text/html; charset=utf-8" %><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";%><c:set var="ctx" value="${pageContext.request.contextPath}"></c:set><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head> <base href="<%=basePath%>"> <title>My JSP 'map.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script src="${ctx }/ui/jquery-1.7.2.min.js"></script> <script src="${ctx }/ui/echarts/echarts-3.2.3/dist/echarts.js"></script> <script src="${ctx }/ui/echarts/echarts-3.2.3/options/cfgopts.js"></script></head><body><style> html, body, #main { width: 100%; height: 100%; margin: 0; background-color: #00CC33; }</style><div id="radar" style="width: 600px;height: 400px;"></div><script> var radarChart; $(function () { radarChart = echarts.init(document.getElementById("radar")); showRadar(); }); function showRadar() { $.ajax({ type: "POST", url: "${ctx}/tec/radarData.html", dataType: 'json', success: function (data) { var fData = fmt.formtRadarData(data); var radarOpt = getRadarOpt(fData); radarOpt.title.text = '雷达图'; radarOpt.series[0].name = '雷达图'; radarChart.setOption(radarOpt); } }); }</script></body></html>这里只介绍这三种图表的实现，其它一般图表的实现方法类似，echarts图表实现接入真实数据的关键是数据格式化，对于特殊图表需要根据其数据特征写出相应的数据格式化方法。ssmec源码地址：下载ssmec源码
0 0
- 基于ssm框架正式环境echarts图表的使用
- echarts图表的使用
- echarts图表插件的使用
- 基于Echarts图表生成的小案例
- 新接触的 ECharts 图表框架饼状图
- ssm框架学习---使用ubuntu环境下基于Intel idea搭建ssm环境一些问题总结
- 百度Echarts图表JS插件的使用
- iOS-Echarts动态图表控件的使用
- VUE2.0中echarts图表的使用
- eCharts整合SSM的简单使用
- 使用Echarts生成图表
- 使用Echarts生成图表
- Echarts图表使用案例
- 使用echarts显示图表
- Echarts图表简单使用
- echarts图表使用
- 基于SSM框架的分页
- 基于SSM的数据库连接池框架druid的使用
- 【论坛项目】简单的论坛小项目-麻雀虽小，五脏俱全
- CV界的明星人物们和他们的主页地址
- Android杂谈（21）+Java随笔（4）：注解（下）分析ButterKnife
- C语言main()主函数执行完毕后是否会再执行一段代码
- android studio异常处理之[Error: com.android.ide.common.process.ProcessException]
- 基于ssm框架正式环境echarts图表的使用
- TensorFlow使用基础(Basic Usage)
- -mtime＋1
- 基于PCA和SVM的人脸识别
- 【C#】收官
- 一个demo，帮助您加深理解和记忆android activity 生命周期
- 以架构的思维看世界
- 那些年收藏的技术文章（二）-云笔记篇
- Scramble String
