Controler
@RequestMapping(value="/toEchart",method=RequestMethod.POST,produces={"application/json;charset=UTF-8"})
@ResponseBody
public String toEchart(){
List<Product> list = new ArrayList<Product>();
//这里把“类别名称”和“销量”作为两个属性封装在一个Product类里,每个Product类的对象都可以看作是一个类别(X轴坐标值)与销量(Y轴坐标值)的集合
list.add(new Product("衬衣", 10));
list.add(new Product("短袖", 20));
list.add(new Product("大衣", 30));
return JSONArray.toJSONString(list);
}
@RequestMapping(value="/toEchartPage")
public String toEchartPage(){
return "user/toEchart";
}
jsp页面关键代码:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'toEchart.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="<%=basePath%>statics/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="<%=basePath%>statics/echart/echarts.js"></script></head>
<body>
<input type="hidden" name="path" id="path" value="<%=basePath%>"/>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
myChart.setOption({
title: {
text: '异步数据加载'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
});
myChart.showLoading();//数据加载完之前先显示一段简单的loading动画
var names=[]; //类别数组(实际用来盛放X轴坐标值)
var nums=[]; //销量数组(实际用来盛放Y坐标值)
var path=$("#path").val();
$.ajax({
type:"post",
async:true,//异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行
url:path+"user/toEchart",
data:{},
dataType:"json",//返回数据形式为json
success:function(result){
for(var i=0;i<result.length;i++){
names.push(result[i].name);
}
for(var i=0;i<result.length;i++){
nums.push(result[i].num); //挨个取出销量并填入销量数组
}
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
xAxis: {
data: names
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: nums
}]
});
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
})
</script>
</body>
</html>