Java中用sql語句顯示最近30天每日登入量每日登入量，並以echarts頁面統計出最近15天登入量
阿新 • • 發佈：2019-01-05
需求：Java中統計每日登入總數，頁面顯示最近30 天資料，並以條形統計圖形式顯示出來。
效果圖（新手，歡迎指教）
sql語句如下：
步驟1.：按天數統計每日登入量
select count(id) as 每天運算元量,to_char(CREATE_TIME, 'yyyy/mm/dd') 日期 from 表名 group by to_char(CREATE_TIME, 'yyyy/mm/dd') order by to_char(CREATE_TIME, 'yyyy/mm/dd') desc
步驟2：顯示最近30天每日登入量
select count(id) as num ,to_char(CREATE_TIME, 'yyyy/mm/dd') as data from organ_login_log where CREATE_TIME between sysdate-30 and sysdate group by to_char(CREATE_TIME, 'yyyy/mm/dd') order by to_char(CREATE_TIME, 'yyyy/mm/dd') desc
步驟3：後臺Java程式碼
@RequestMapping(value = "/countLogin", method = { RequestMethod.POST, RequestMethod.GET })
public String countLogin(SecurityUserRequest request, JSONResultResponse response) {
Session session = FlowEnvironmentImpl.getCurrentSession();
//列表顯示統計最近30天的登入資料
List<?> listCountLogins = session.createSQLQuery("select count(id) as num ,to_char(CREATE_TIME, 'yyyy/mm/dd') as data from organ_login_log where CREATE_TIME between sysdate-30 and sysdate group by to_char(CREATE_TIME, 'yyyy/mm/dd') order by to_char(CREATE_TIME, 'yyyy/mm/dd') desc" ).list();
request.setAttribute("listCountLogins", listCountLogins);//頁面顯示資料 步驟4：jsp頁面顯示資料，用列表、統計圖兩種形式顯示顯示
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ include file="/common/taglib.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
<common:metas title="登入日誌" />
<link rel="stylesheet" href="${path}/admin/css/style.css">
<script type="text/javascript" src="${path}/admin/js/jquery.min.js"></script>
<script type="text/javascript" src="${path}/admin/js/tabs&toggle.js"></script>
<script type="text/javascript" src="${path}/admin/js/jquery.dialog.js"></script>
<script type="text/javascript" src="${path}/common/layer-v3.1.0/layer/layer.js"></script>
<jsp:include page="/WEB-INF/jsps/common/embed/script.jsp" />
<script type="text/javascript" src="${path}/common/js/jquery.ext.js"></script>
<script type="text/javascript" src="${path}/common/echarts_v3.8.4/echarts.js"></script>
<script type="text/javascript" src="${path}/common/echarts_v3.8.4/westeros.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(this).settingSelectionDefaultValue();
var myChart = echarts.init(document.getElementById('main'));
var countLogins = ${jsoncount};//獲取登入次數作為Y軸引數
var loginData=${jsondata};//獲取登入日期作為X軸引數
option = {
title: {
left: 'center',
text: '按天統計登入數',
},
color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : { // 座標軸指示器，座標軸觸發有效
type : 'shadow' // 預設為直線，可選為：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : loginData,
name:'日期',
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value',
name:'次數',
axisLabel:{
formatter:countLogins
}
}
],
series : [
{
type:'bar',
barWidth: '70%',
data:countLogins
}
]
};
myChart.setOption(option);
window.onresize = function () {
myChart.resize();
};
});
</script>
<body>
<div id="container">
<!-- 樹狀圖顯示資料 -->
<div id="main" style="width: 100%; height: 400px;"></div>
<!-- 列表顯示資料 -->
<div class="page-box">
<div class="page-list-list-box">
<table cellpadding="0" cellspacing="0" width="100%" border="0" class="list">
<tr>
<th width="30%" colspan="2"><span>圖表統計最近15天登入資料，列表顯示最近30天登入資料</span></th>
</tr>
<tr>
<th width="30%"><span>登入日期</span></th>
<th width="30%"><span>登入次數</span></th>
</tr>
<c:forEach items="${listCountLogins}" var="loginNum">
<tr>
<td id="val">${loginNum[1]}</td>
<td id="key">${loginNum[0]}</td>
</tr>
</c:forEach>
</div>
</table>
</div>
</div>
</body>
</html>