这个例子后台使用的是Spring+SpringMVC,JSON用的是阿里巴巴Json，这个例子当时主要是给一些要找工作的朋友临时补充的例子，由于当时时间比较紧张。朋友要出去找工作，所以没有涉及数据库，但是Echarts已经大概讲解了用法，这个例子主要讲的时Echarts。
这边主要涉及Echarts展现图标时，要传输的参数问题。我们来看一下代码。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ECharts</title>
<script type="text/javascript" src="js/echarts/dist/echarts.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
//获得后台数据
var category_data;
var sj_data;
var bs_data;
var tj_data;
$.ajax({
url:'./user/ajax01.action',
async:false,
dataType:"json",
success: function(data){
category_data=data.category;
sj_data=data.sj_data;
bs_data=data.bs_data;
tj_data=data.tj_data;
}
})
// 路径配置
require.config({
paths: {
echarts: 'js/echarts/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
'echarts/chart/line'
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('show_data'));
var option = {
tooltip: {//提示框，鼠标悬浮交互时的信息提示
show: true
},
toolbox:{//定义工具按钮
show : true,
feature : {
dataView : {show: true, readOnly: false},//数据信息按钮
magicType : {show: true, //显示折线、柱状图等切换按钮
type: ['line', 'bar','stack', 'tiled']}
}
},
legend: {//图例
data:['上机','笔试','提交']
},
xAxis : [//x轴设置
{
type : 'category',//x轴显示类别
data : category_data//["第一季度","第二季度","第三季度","第四季度"]
}
],
yAxis : [//y轴设置
{
type : 'value'///y轴显示数据值
}
],
series : [
{
"name":"上机",
"type":"bar",
"data":sj_data
},
{
"name":"笔试",
"type":"bar",
"data":bs_data
},
{
"name":"提交",
"type":"bar",
"data":tj_data
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
});
</script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="show_data" style="height:400px"></div>
</body>
</html>
这个JSP页面里面主要就是表格数据怎么从后台获取的问题，再者就是这些数据怎么加工的问题。我们来看一下怎么加工的。代码如下：
@RequestMapping(value = "/ajax01.action",produces = "application/json; charset=utf-8")
public void ajax01(HttpServletResponse response) throws IOException {
response.setContentType("text/html; charset=UTF-8");
PrintWriter printWriter=response.getWriter();
Map<String,Object> map=new HashMap<String,Object>();
map.put("category", new String[]{"第1阶段","第2阶段","第3阶段","第4阶段"});
map.put("sj_data", new int[]{10, 50, 20, 70} );
map.put("bs_data", new int[]{90, 50, 80, 30});
map.put("tj_data",new int[]{90, 80, 70, 65});
String jsonString = JSON.toJSONString(map);
printWriter.write(jsonString);
printWriter.flush();
printWriter.close();
}
效果图如下：