前端界面:
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
<div id="main" style="width: 600px; height: 400px;"></div>
<a href="inoutList.html">返回</a>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="../../js/echarts.js"></script>
<script th:inline="javascript">
//var prefix = "/monitor/operlog"
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 显示标题,图例和空的坐标轴
myChart.setOption({
title : {
text : '个人借款(元)'
},
tooltip : {
show : true
},
legend : {
data : [ '个人借款(元)' ]
},
xAxis : {
data : []
},
yAxis : {},
series : [ {
name : '个人借款',
type : 'line',//图表类型,必要参数!如为空或不支持类型,则该系列数据不被显示,具体类型可进入ECharts官方查找API
//type:'bar',
data : []
} ]
});
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
var names = []; //类别数组(实际用来盛放X轴坐标值)
var nums = []; //销量数组(实际用来盛放Y坐标值)
$.ajax({
type : "post",
async : true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
//url : prefix + "/discount1", //请求发送到Controller处,路径我上面写好了的,直接拼的,你自己按照你的写
url:"/servletinout?do=queryForinForIEchart",
data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
//请求成功时执行该函数内容,result即为服务器返回的json对象
if (result) {
for (var i = 0; i < result.length; i++) {
names.push(result[i].investor); //挨个取出类别并填入类别数组
}
for (var i = 0; i < result.length; i++) {
nums.push(result[i].money); //挨个取出销量并填入销量数组
}
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
xAxis : {
data : names
},
series : [ {
// 根据名字对应到相应的系列
name : '个人借款',
data : nums
} ]
});
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
})
</script>
</body>
</html>
Servlet类中的方法:
public class ServletInout extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
// response.setHeader("Content-Type", "text/html;charset=UTF-8");
response.setContentType("text/html;charset=gb2312");
InoutDao inoutDao=new InoutDaoImpl();
String dos = request.getParameter("do");
PrintWriter out = response.getWriter();
HttpSession session = request.getSession();
//测试用查询收入与支出图表
if (dos.equals("queryForChart")) {
List<Inout> inlist = new ArrayList<Inout>();
inlist=inoutDao.findAllInout();
ObjectMapper mapper = new ObjectMapper();
//将list中的对象转换为Json格式的数组
String json = mapper.writeValueAsString(inlist);
System.out.println(json);
//将json数据返回给客户端
response.setContentType("text/html; charset=utf-8");
response.getWriter().write(json);
//return;
}
}
}
提醒:Servlet中需要:
import org.codehaus.jackson.map.ObjectMapper;