<!DOCTYPE html>
|
<html lang="zh-cn">
|
|
<head>
|
<meta charset="utf-8">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<title>订单数据</title>
|
<link href="css/bootstrap.min.css" rel="stylesheet">
|
<link href="css/maincontent.css" rel="stylesheet">
|
<!--[if lt IE 9]>
|
<script src="js/html5shiv.js"></script>
|
<script src="js/respond.min.js"></script>
|
<![endif]-->
|
<style>
|
table td a {
|
text-align: center;
|
}
|
.curTu{
|
background: #FF3083;
|
color:white;
|
}
|
#tu{
|
max-width: 2000px;
|
min-width: 1000px;
|
height: 710px;
|
}
|
</style>
|
</head>
|
|
<body>
|
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
|
</nav>
|
<div id="mainbody">
|
<div id="sidebar">
|
<dl>
|
</dl>
|
</div>
|
<div id="neirong">
|
<div class="erjidh" style="padding: 10px;">
|
<div class="form-inline" role="search">
|
<button type="button" class="btn btn-default search-button curTu" key="1">新增订单趋势图</button>
|
<button type="button" class="btn btn-default search-button" key="2">订单趋势图</button>
|
<button type="button" class="btn btn-default " key="3" onclick="stop()">次日订单率趋势图</button>
|
<button type="button" class="btn btn-default " key="4" onclick="stop()">退货率趋势图</button>
|
<span style="float: right;">
|
<select class="form-control dateSelect">
|
<option value="1">最近一周</option>
|
<option value="2">最近半个月</option>
|
<option value="3">最近一个月</option>
|
<option value="4">最近三个月</option>
|
</select>
|
<span>起 </span><input type="date" class="form-control dateBegin" />
|
<span>至 </span><input type="date" class="form-control dateEnd" />
|
<button type="button" class="btn btn-default searchBtn" style="margin-right: 0px;">搜索</button>
|
</span>
|
</div>
|
</div>
|
<div class="zhuti">
|
<div id="tu"></div>
|
</div>
|
</div>
|
</div>
|
|
<script src="js/jquery.min.js"></script>
|
<script src="js/bootstrap.min.js"></script>
|
<script src="js/nav.js"></script>
|
<script src="layer/layer.js"></script>
|
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
|
<script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>
|
|
<script>
|
$(function() {
|
|
Highcharts.setOptions({
|
lang: {
|
contextButtonTitle: "图表导出菜单",
|
decimalPoint: ".",
|
downloadJPEG: "下载JPEG图片",
|
downloadPDF: "下载PDF文件",
|
downloadPNG: "下载PNG文件",
|
downloadSVG: "下载SVG文件",
|
drillUpText: "返回 {series.name}",
|
loading: "加载中",
|
months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
|
noData: "没有数据",
|
numericSymbols: ["千", "兆", "G", "T", "P", "E"],
|
printChart: "打印图表",
|
resetZoom: "恢复缩放",
|
resetZoomTitle: "恢复图表",
|
shortMonths: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
thousandsSep: ",",
|
weekdays: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期天"]
|
}
|
});
|
|
$(".search-button").bind("click",function(data){
|
$(".search-button").removeClass("curTu");
|
$(this).addClass("curTu");
|
setTu();
|
});
|
|
$(".searchBtn").bind("click",function(){
|
var begin = $(".dateBegin").val();
|
var end = $(".dateEnd").val();
|
if(begin=="" || end==""){
|
layer.msg("请选择起止时间");
|
return;
|
}
|
var beginTemp=new Date(begin).getTime();
|
var endTemp=new Date(end).getTime();
|
if(endTemp-beginTemp < 0){
|
layer.msg("结束时间小于开始时间,请重新选择!");
|
return;
|
}
|
var key = $(".curTu").attr("key");
|
if(key=="1"){
|
$.post("api/v1/data/orderListByTime",{'startTime':begin,'endTime':end},function(data){
|
setTuData(data);
|
},'json');
|
}else if(key=="2"){
|
$.post("api/v1/data/orderTotalListByTime",{'startTime':begin,'endTime':end},function(data){
|
setTuData(data);
|
},'json');
|
}
|
|
});
|
|
$(".dateSelect").bind("change",function(){
|
setTu();
|
});
|
setTu();
|
});
|
|
function setTu(){
|
|
var key = $(".curTu").attr("key");
|
var type = $(".dateSelect").find("option:checked").val();
|
if(key=="1"){
|
$.post("api/v1/data/getnewOrderList",{"type":type},function(data){
|
setTuData(data);
|
},'json');
|
}else
|
if(key=="2"){
|
$.post("api/v1/data/getOrderTotalList",{"type":type},function(data){
|
setTuData(data);
|
},'json');
|
}
|
}
|
|
function setTuData(data){
|
if(data.code==0){
|
var map=data.data;
|
var xAsis=new Array();
|
var data=new Array();
|
for (key in map) {
|
xAsis.push(key);
|
data.push(map[key]);
|
}
|
setData(xAsis,data);
|
}else{
|
layer.msg(data.msg);
|
}
|
}
|
|
function setData(xAsis,data){
|
var key = $(".curTu").attr("key");
|
if(key=="1"){
|
var title="新增订单趋势图";
|
var subtitle="数量/时间";
|
}else if(key=="2"){
|
var title="订单趋势图";
|
var subtitle="数量/时间";
|
}
|
|
$("#tu").empty();
|
var widthx = $("#tu").width() * 0.4;
|
/**
|
* Highcharts 在 4.2.6 开始已经不依赖 jQuery 了，直接用其构造函数既可创建图表
|
**/
|
var chart = new Highcharts.Chart('tu', {
|
title: {
|
text: title,
|
x: -20
|
},
|
subtitle: {
|
text: subtitle,
|
x: widthx
|
},
|
credits: {
|
enabled: false // 禁用版权信息
|
},
|
xAxis: {
|
categories: xAsis
|
},
|
yAxis: {
|
title: {
|
text: '单位(个) '
|
},
|
plotLines: [{
|
value: 0,
|
width: 1,
|
color: '#808080'
|
}]
|
},
|
tooltip: {
|
valueSuffix: '个'
|
},
|
legend: {
|
layout: 'vertical',
|
align: 'right',
|
verticalAlign: 'middle',
|
borderWidth: 0
|
},
|
series: [{
|
name: '个数',
|
data: data
|
}]
|
});
|
}
|
|
function stop(){
|
alert("暂未开发");
|
}
|
</script>
|
</body>
|
|
</html>
|
