<!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">
|
<style>
|
table td a {
|
text-align: center;
|
}
|
|
.top20 {
|
margin: 5%;
|
margin-right: 30%;
|
margin-top: 2%;
|
}
|
|
#container .zhuxingtu {
|
margin-left: 30px;
|
margin-right: 10%;
|
margin-bottom: 0px;
|
}
|
|
#container .paixu {
|
float: left;
|
}
|
|
#container .shuliang {
|
margin-left: 30px;
|
float: right;
|
}
|
|
#container p {
|
margin-left: 30px;
|
}
|
.curTu{
|
background: #FF3083;
|
color:white;
|
}
|
.zhuti{
|
min-width: 1100px;
|
max-width: 2100px;
|
}
|
</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">搜索总量趋势图</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" style="height: 500px">
|
<div id="tu"></div>
|
</div>
|
<div class="zhuti" id="top20" style="height: auto">
|
<div class="footer">
|
<div class="legend">
|
<h4 style="margin-top: 20px;margin-left: 20px;">搜索热词TOP趋势</h4>
|
</div>
|
<hr>
|
</div>
|
<div class="top20">
|
<div id="container">
|
<div>
|
<p>连衣裙</p>
|
<span class="paixu">1</span>
|
<span class="shuliang">23055</span>
|
<div class="progress zhuxingtu">
|
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 90%">
|
<!--<span>90% Complete (warning)</span>-->
|
</div>
|
</div>
|
</div>
|
<br/>
|
</div>
|
</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>
|
var rankhtml;
|
$(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: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期天"]
|
}
|
});
|
|
rankhtml = $("#container").html();
|
|
$(".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;
|
}
|
$.post("api/v1/data/searchTotalListByTime",{'startTime':begin,'endTime':end},function(data){
|
setTuData(data);
|
},'json');
|
$.post("api/v1/data/searchRankListByTime",{'startTime':begin,'endTime':end},function(data){
|
setRankData(data);
|
},'json');
|
});
|
$(".dateSelect").bind("change",function(){
|
setTu();
|
setRank();
|
});
|
setTu();
|
setRank();
|
});
|
|
function setRank(){
|
var type = $(".dateSelect").find("option:checked").val();
|
$.post("api/v1/data/getSearchRankList",{"type":type},function(data){
|
setRankData(data);
|
},'json');
|
}
|
|
function setTu(){
|
var type = $(".dateSelect").find("option:checked").val();
|
$.post("api/v1/data/getSearchTotalList",{"type":type},function(data){
|
setTuData(data);
|
},'json');
|
}
|
|
function setRankData(data){
|
$("#container").empty();
|
if(data.code==0){
|
var list = data.data;
|
var max;
|
for (var ii=0;ii<list.length;ii++) {
|
var count=list[ii][1];
|
if(ii==0){
|
max= (count * 10) / 9 ;
|
}
|
$("#container").append(rankhtml);
|
var $curdiv = $("#container > div").eq(ii);
|
$curdiv.find("p").text(list[ii][0])
|
$curdiv.find(".paixu").text(ii+1);
|
$curdiv.find(".shuliang").text(count);
|
var persion =(count/max) * 100 +"%";
|
$curdiv.find(".zhuxingtu div").width(persion);
|
}
|
}else{
|
layer.msg(data.msg);
|
}
|
}
|
|
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){
|
$("#tu").empty();
|
var widthx = $("#tu").width() * 0.4;
|
var chart = new Highcharts.Chart('tu', {
|
title: {
|
text: "搜索总量趋势图",
|
x: -20
|
},
|
subtitle: {
|
text: "次数/时间",
|
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
|
}]
|
});
|
}
|
</script>
|
</body>
|
|
</html>
|
