先上效果：
![]()
數據庫設計：
![]()
實體類：（略）
<select id="SumByDay" resultType="map">
SELECT DATE_FORMAT(sm_data,'%Y-%m-%d') name , SUM(sm_inventory) value FROM salesmessage GROUP BY DATE_FORMAT(sm_data,'%Y-%m-%d');
</select>
Controller：
@Autowired
TestSelectServiceImpl tssi;
@RequestMapping(value = "/testchart" , method = {RequestMethod.POST, RequestMethod.GET})
@ResponseBody
public List<Salesmessage> TestChart(){
List<Salesmessage> salesmessages1 = tssi.SumByDay();
return salesmessages1;
}
前端：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script type="text/javascript" src="static/echarts/echarts.min.js"></script>
<script type="text/javascript">
$(function(){
ajaxtest();
});
function ajaxtest() {
// alert("hahhahaha")
$.ajax({
async:false,
url:'${pageContext.request.contextPath}/testchart',
type:'POST',
dataType : 'json',
success:function (objects1) {
initChart(objects1);
}
});
}
function formatData(data) {
var xAxis = [];
var serData =[];
for(var i = 0 ; i < data.length ; i++){
xAxis.push(data[i].name);
console.log(xAxis);
serData.push(data[i].value);
console.log(serData);
}
return {
xAxis : xAxis,
serData : serData,
};
}
function initChart(objects1) {
var dom = document.getElementById("chartmain");
var myChart = echarts.init(dom);
var option = {
title: {
text: '用戶消費預測',
textStyle: {
color: '#000'
}
},
backgroundColor: '#ccc',
textStyle: {
color: '#000',
},
tooltip: {},
legend: {
data: ['消費額'],
textStyle: {
color: '#000'
}
},
xAxis: {
type: 'category',
data: formatData(objects1).xAxis,
axisLabel: {
interval: 0,
rotate: -30,
}
},
yAxis: {},
series: [{
name: '消費額',
type: 'bar',
data: formatData(objects1).serData,
}]
};
myChart.setOption(option, true);
};
</script>
</head>
<body>
<h2>測試頁</h2>
<div style="width: 100%;height: 100%" id="chartmain"></div>
</body>
</html>
