基于ssm框架正式环境echarts图表的使用
一、介绍
关于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> barData(HttpServletRequest request) {
/*
测试数据，正式环境从数据库读取
*/
List> 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
};
}
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);
}
});
}运行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 + "/";
%>
My JSP 'map.jsp' starting page
2、实现折线图Line
(1)、写后台action方法及返回json数据的方法
action方法：
@RequestMapping("/toLine")
public ModelAndView toLine(HttpServletRequest request) {
return new ModelAndView("ecjsp/testLine");
}返回json数据方法：
@RequestMapping("/lineData")
@ResponseBody
public List> lineData(HttpServletRequest request) {
/*
测试数据，正式环境从数据库读取
*/
List> 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
};
}
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);
}
});
}运行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 + "/";
%>
My JSP 'map.jsp' starting page
3、实现雷达图Radar
(1)、写后台action方法及返回json数据的方法
action方法：
@RequestMapping("/toRadar")
public ModelAndView toRadar(HttpServletRequest request) {
return new ModelAndView("ecjsp/testRadar");
}返回json数据方法：
@RequestMapping("/radarData")
@ResponseBody
public List> radarData(HttpServletRequest request) {
/*
测试数据，正式环境从数据库读取
*/
List> 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
};
} 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);
}
});
}运行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 + "/";
%>
My JSP 'map.jsp' starting page
ssmec源码地址：下载ssmec源码