導航：
pre： 9.歸還圖書
next：11.檢索圖書
只挑重點的講，具體的請看項目源碼。
1.項目源碼
2.頁面設計
2.1 bookStat.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>借還統計</title>
<link rel="stylesheet" href="/static/layui/css/layui.css" th:href="@{/static/layui/css/layui.css}">
<script src="/static/js/jquery-1.11.3.min.js" th:src="@{/static/js/jquery-1.11.3.min.js}"></script>
<script src="/static/layui/layui.all.js" th:src="@{/static/layui/layui.all.js}"></script>
<script src="/static/js/util.js" th:src="@{/static/js/util.js}"></script>
<!-- 引入 echarts.js -->
<script src="/static/js/echarts.min.js" th:src="@{/static/js/echarts.min.js}"></script>
</head>
<body>
<!-- 爲ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 800px;height:400px;">
</div>
<!--ctx-->
<script th:replace="~{fragment::ctx}"/>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實例
var chart = document.getElementById('main');
var echart = echarts.init(chart);
$(function(){
buildData();
});
//生成數據
function buildData()
{
var columnLabel = ['借','還'];
var columnName = [];
var columnValue = [];
echart.showLoading();
// 請求
$.ajax({
url: ctx+'api/bookBorrow/getBorrowStat',
type: 'GET',
contentType: "application/json",
dataType: "json",
data: "",
success: function (result) {
if (result.code == 200) {
console.log(JSON.stringify(result.data.columnName));
columnName = result.data.columnName;
columnValue = result.data.columnValue;
console.log(JSON.stringify(columnValue));
echart.hideLoading();
buildChart(columnLabel,columnName,columnValue);
} else {
layer.alert(result.message);
}
}
});
/*for(var i=0;i<columLabel.length;i++)
{
for(var j=0;j<columName.length;j++)
{
arrData.push(Math.floor(Math.random()*1000+1000*j-1000*i));
}
console.info(arrData);
columnValue.push(eval('(' + ("{'name':'"+columLabel[i]+"','type':'bar','data':["+arrData+"]}") + ')'));
}*/
}
//生成圖形
function buildChart(columnLabel,columnName,columnValue)
{
var option = {
title: {
text: '一週借還統計'
},
tooltip : {
trigger: 'axis',
axisPointer : {
type : 'shadow'
}
},
toolbox: {
show : true,
feature : {
saveAsImage : {show: true}
}
},
legend: {
data:columnLabel
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
min:0,
type : 'category',
data : columnName
}
],
yAxis : [
{
min:0,
type : 'value'
}
],
series : columnValue
};
echart.setOption(option);
}
</script>
</body>
</html>
3.後臺接口
@GetMapping("/getBorrowStat")
public Result<Map<String,Object>> getBorrowStat(){
Map<String,Object> map = new HashMap<>();
List<String> days = DateUtil.getDaysBetwwen(6);
map.put("columnName",days);
BorrowStatVO borrowVO = new BorrowStatVO();
BorrowStatVO returnVO = new BorrowStatVO();
borrowVO.setName("借");
returnVO.setName("還");
borrowVO.setType("bar");
returnVO.setType("bar");
List<Integer> borrowData = new ArrayList<>();
List<Integer> returnData = new ArrayList<>();
for (String day:days) {
borrowData.add(bookBorrowService.getBorrowCount(day));
returnData.add(bookBorrowService.getReturnCount(day));
}
borrowVO.setData(borrowData);
returnVO.setData(returnData);
List<BorrowStatVO> list = new ArrayList<>();
list.add(borrowVO);
list.add(returnVO);
map.put("columnValue",list);
return ResultUtil.ok(map);
}
需要源碼的朋友留下郵箱：）