前端HTML
<!DOCTYPE html>
<!-- saved from url=(0045)https://demo.demohuo.top/jquery/38/3811/demo/ -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
body {
background-image:
url(${rc.contextPath}/js/erp/nybj.png?_${date.systemTime});
background-size: 100% 100%;
font-weight: bold;
font-family: 蘋方;
overflow: scroll;
}
.main {
width: 1024px;
height: 798px;
position: relative;
margin: auto;
}
div {
border: 0px solid white;
margin: 1px;
}
.layer {
position: relative;
width: 100%;
}
.layer04-panel {
position: relative;
float: left;
height: 50%;
width: 100%;
}
.layer04-panel-label {
width: 100%;
height: 15%;
color: white;
padding-top: 50px;
}
.layer04-panel-chart {
width: 100%;
height: 85%;
}
</style>
<script src="${rc.contextPath}/js/erp/jquery.min.js?_${date.systemTime}"></script>
<script
src="${rc.contextPath}/js/erp/echarts.min.js?_${date.systemTime}"></script>
<script src="${rc.contextPath}/js/erp/tjLine.js?_${date.systemTime}"></script>
<script type="text/javascript">
$(function() {
var url = '../user/orderTj';
var monthSellMoney = new Array(length);
var d_name = '訂單量';
var time_list = [];
$.get(
url,
function(data) {
var dd_array = data.map.dd_list;
var time_list = data.map.time_list;
renderLayer04Right(dd_array,d_name,time_list);
});
});
</script>
<title>大數據運維總覽圖</title>
</head>
<body style="">
<div class="main">
<!-- 查詢日期選擇 -->
<div>
<span style="color: white;"> 開始日期：
</span><input id="sTime" type="date" name="startTime" required="required">
<span style="color: white;"> 結束日期：
</span><input id="eTime" type="date" name="endTime" required="required">
<select id="orderStatus" >
<option value ="5">已完成</option>
<option value ="0">待確認</option>
<option value ="1">已確認</option>
<option value="2">採購中</option>
<option value="3">採購完成</option>
<option value ="4">送貨中</option>
<option value="6">已取消</option>
</select>
<button style="color: white;" onclick="GetDate()"> <span style="color: black;">查詢</span></button>
</div>
<div id="layer04_right" class="layer04-panel">
<div id="layer04_right_label" class="layer04-panel-label">
<span style="color: #00A09A;">訂單統計</span>
</div>
<div id="layer04_right_chart" class="layer04-panel-chart"
_echarts_instance_="ec_1576475377596"
style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;">
<div
style="position: relative; overflow: hidden; width: 492px; height: 195px; padding: 0px; margin: 0px; border-width: 0px;">
<canvas data-zr-dom-id="zr_0" width="492" height="195"
style="position: absolute; left: 0px; top: 0px; width: 492px; height: 195px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
</div>
<div></div>
</div>
</div>
</div>
<script type="text/javascript">
function GetDate(){
var sTime = document.getElementById("sTime").value;
var eTime = document.getElementById("eTime").value;
var orderStatus = document.getElementById("orderStatus").value;
if (sTime == "" || eTime == "" ||orderStatus=="") {
alert("請選擇日期後查詢！");
return;
}
var url = '../user/orderTj?startTime='+sTime+'&endTime='+eTime+'&orderStatus='+orderStatus;
var monthSellMoney = new Array(length);
var d_name = '訂單量';
var time_list = [];
$.get(
url,
function(data) {
var dd_array = data.map.dd_list;
var time_list = data.map.time_list;
renderLayer04Right(dd_array,d_name,time_list);
});
}
</script>
</body>
</html>
JS：
/*function getGoods(){
$.ajax({
type: "GET",
url: "../goods/queryAll",
data: {},
dataType: "json",
success: function(data){
var html = '<option value="">請選擇</option>';
for(var i=0;i<data.list.length;i++){
html +='<option value="'+data.list[i].id+'">'+data.list[i].name+'</option>';
}
$('#hqGoods').html(html);
$('#hqGoods').val(id);
}
});
}*/
//
function renderLayer04Right(dd_array,d_name,time_list){
var myChart = echarts.init(document.getElementById("layer04_right_chart"));
myChart.setOption({
title: {
text: ''
},
tooltip: {
trigger: 'axis'
},
legend: {
top:20,
right:5,
textStyle:{
color:'white'
},
orient:'vertical',
data:[
{name:d_name,icon:'circle'}
]
},
grid: {
left: '3%',
right: '16%',
bottom: '3%',
top:'3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
axisTick:{show:false},
axisLabel:{
textStyle:{
color:"white", //刻度顏色
fontSize:8 //刻度大小
}
},
axisLine:{
show:true,
lineStyle:{
color: '#0B3148',
width: 1,
type: 'solid'
}
},
data: time_list
/*getLatestDays(lg)*/
},
yAxis: {
type: 'value',
axisTick:{show:false},
axisLabel:{
textStyle:{
color:"white", //刻度顏色
fontSize:8 //刻度大小
}
},
axisLine:{
show:true,
lineStyle:{
color: '#0B3148',
width: 1,
type: 'solid'
}
},
splitLine:{
show:false
}
},
series: [
{
name:d_name,
type:'line',
itemStyle : {
normal : {
color:'#F3891B'
},
lineStyle:{
normal:{
color:'#F3891B',
opacity:1
}
}
},
data:dd_array
}
]
}
);
}
function getLatestDays(num)
{
var currentDay = new Date();
var returnDays = [];
currentDay.setDate(currentDay.getDate() - num);
for (var i = 0 ; i < num ; i++)
{
currentDay.setDate(currentDay.getDate() + 1);
returnDays.push((currentDay.getMonth()+1)+"/"+currentDay.getDate());
}
return returnDays;
}
function tjLine(monthSellMoney,lg){
var myChart = echarts.init(document.getElementById("layer04_left_chart"));
myChart.setOption(
{
title: {
text: ''
},
tooltip : {
trigger: 'axis'
},
legend: {
data:[]
},
grid: {
left: '3%',
right: '4%',
bottom: '5%',
top:'4%',
containLabel: true
},
xAxis :
{
type : 'category',
boundaryGap : false,
data : getLatestDays(lg),
axisLabel:{
textStyle:{
color:"white", //刻度顏色
fontSize:8 //刻度大小
},
rotate:45,
interval:2
},
axisTick:{show:false},
axisLine:{
show:true,
lineStyle:{
color: '#0B3148',
width: 1,
type: 'solid'
}
}
},
yAxis :
{
type : 'value',
axisTick:{show:false},
axisLabel:{
textStyle:{
color:"white", //刻度顏色
fontSize:8 //刻度大小
}
},
axisLine:{
show:true,
lineStyle:{
color: '#0B3148',
width: 1,
type: 'solid'
}
},
splitLine:{
show:false
}
},
tooltip:{
formatter:'{c}',
backgroundColor:'#FE8501'
},
series : [
{
name:'',
type:'line',
smooth:true,
areaStyle:{
normal:{
color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#026B6F'}, {offset: 1, color: '#012138' }], false),
opacity:0.2
}
},
itemStyle : {
normal : {
color:'#009991'
},
lineStyle:{
normal:{
color:'#009895',
opacity:1
}
}
},
symbol:'none',
data:
monthSellMoney
}
]
}
);
}
後臺Java:
/*
* 訂單情況（可按日期和訂單狀態，進行統計查詢）
*/
@RequestMapping("/orderTj")
public R orderTj(String startTime, String endTime, Integer orderStatus) {
Map<String, Object> map = new HashMap<String, Object>();
Date date = new Date();
if(StrUtil.isBlank(startTime)||StrUtil.isBlank(endTime)) {
startTime = DateUtil.offsetDay(date, -7).toDateStr();
endTime = DateUtil.formatDate(date);
}
Date sTime = DateUtil.parseDate(startTime);
Date eTime = DateUtil.parseDate(endTime);
map.put("sTime", sTime);
map.put("eTime", eTime);
map.put("orderStatus", orderStatus);
List<TimeCount> list = userService.orderCountByTime(map);
map.clear();
for (TimeCount tc : list) {
map.put(tc.getTime(), tc.getCount());
}
// 補零操作
Long day = DateUtil.betweenDay(sTime, eTime, true);
int dy = day.intValue();
StringBuffer sb1 = new StringBuffer();//時間數組
StringBuffer sb2 = new StringBuffer();//數據數組
for (int i = 0; i < dy + 1; i++) {
String time = DateUtil.parseDate(DateUtil.offsetDay(sTime, i).toString()).toString().replace(" 00:00:00",
"");
sb1.append(time);
sb1.append(",");
sb2.append(map.get(time)==null ? 0 : map.get(time));
sb2.append(",");
}
map.clear();
map.put("time_list", sb1.toString().split(","));
map.put("dd_list", sb2.toString().split(","));
return R.ok().put("map", map);
}
SQL:
<select id="orderCountByTime"
resultType="com.platform.entity.TimeCount">
SELECT
DATE_FORMAT(add_time, '%Y-%m-%d') time,
count(*) as count FROM
`nideshop_order`
WHERE order_status=#{orderStatus} and
add_time BETWEEN #{sTime}
AND #{eTime}
GROUP BY time
</select>
效果圖：
