You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1542 lines
44 KiB
1542 lines
44 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
|
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
|
|
<%@ include file="/common/ctx.jsp"%>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<link type="text/css" rel="stylesheet" href="${ctx }/hbcyjc/resource/css/cjy_style.css" />
|
|
<script type="text/javascript" src="${ctx }/hbcyjc/resource/js/jquery-3.7.0.min.js"></script>
|
|
<script type="text/javascript" src="${ctx }/hbcyjc/resource/js/echarts/echarts.min.js"></script>
|
|
<script type="text/javascript" src="${ctx }/hbcyjc/resource/js/echarts/echarts-liquidfill.js"></script>
|
|
<!-- <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script> -->
|
|
|
|
<title>客流量监测</title>
|
|
</head>
|
|
|
|
<body style="height:1080px; width:1920px;">
|
|
<div class="xingk"></div>
|
|
<div class="header">
|
|
<h3 class="header_bt">客流量监测</h3>
|
|
<a class="nav" id="showLeft"><i class="nav_icon icon_caidan"></i>菜单</a>
|
|
<a href="${ctx }/hbcyjc/index.jsp" class="nav_home"><i class="nav_icon icon_zhuye"></i>首页</a>
|
|
</div>
|
|
<div class="kll_link">
|
|
<a href="${ctx }/hbcyjc/kll/kll_source.jsp" class="right_sec">客源地分析</a>
|
|
<a href="${ctx }/hbcyjc/kll/kll_flow.jsp">客流量分析</a>
|
|
</div>
|
|
<div class="zuoce cbp-spmenu-left" id="cbp-spmenu-s1">
|
|
<a href="${ctx }/hbcyjc/kll/index.jsp" class="on"><i class="nav_icon icon_zhuye"></i>客流量监测</a>
|
|
<a href="${ctx }/hbcyjc/basicresources/basicresources.jsp"><i class="nav_icon icon_zhuye"></i>旅游基础资源</a>
|
|
<a href="${ctx }/hbcyjc/network/network_all.jsp"><i class="nav_icon icon_zhuye"></i>旅游网评分析</a>
|
|
<a href="${ctx }/hbcyjc/complaint/complaint.jsp"><i class="nav_icon icon_zhuye"></i>旅游投诉分析</a>
|
|
<a href="#"><i class="nav_icon icon_zhuye"></i>视频监控管理</a>
|
|
</div>
|
|
<div class="index_left left">
|
|
<div style="margin-top:20px">
|
|
<div class="w450 left mr20">
|
|
<div class="kljc">
|
|
<div class="tjsl">
|
|
<div class="pos_rla">
|
|
<p class="tjbt">张家口景区当前人流量</p>
|
|
<div class="gdsz">
|
|
<div class="shuzi">
|
|
<div class="numberRun4"></div>
|
|
</div>
|
|
<p class="szdw">人次</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w450 left mr20">
|
|
<h3 class="box_bt">日人流量趋势</h3>
|
|
<div class="box_top_s2"></div>
|
|
<div class="box_center_s2" style=" height:180px;">
|
|
<!--width:430-->
|
|
<div id="klldayqs" style="width:100%; height:180px;"></div>
|
|
</div>
|
|
<div class="box_bottom_s2"></div>
|
|
</div>
|
|
<div class="w450 left">
|
|
<h3 class="box_bt">年客流量趋势</h3>
|
|
<div class="box_top_s2"></div>
|
|
<div class="box_center_s2" style=" height:180px;">
|
|
<!--width:430-->
|
|
<div id="kllyearqs" style="width:100%; height:180px;"></div>
|
|
</div>
|
|
<div class="box_bottom_s2"></div>
|
|
</div>
|
|
<div style="clear:both"></div>
|
|
</div>
|
|
|
|
<!-- <div>
|
|
<div class="" style="width:333px; float:left; margin-right:20px; background:#f00; height:400px;">2222</div>
|
|
<div class="" style="width:333px; float:left; margin-right:20px; background:#f00; height:400px;">222</div>
|
|
<div class="" style="width:333px; float:left; margin-right:20px; background:#f00; height:400px;">222</div>
|
|
<div class="" style="width:333px; float:left; background:#f00; height:400px;">222</div>
|
|
<div style="clear:both"></div>
|
|
</div>
|
|
-->
|
|
<div class="w1390">
|
|
<h3 class="box_bt">实时客流量趋势</h3>
|
|
<div class="box_top_s2"></div>
|
|
<div class="box_center_s2" style=" height:610px;">
|
|
<div class="kljc_nian">
|
|
<div class="w320 left mr20">
|
|
<div class="jq_top jq_1" id="div_scenic_weather_1">
|
|
|
|
</div>
|
|
<div class="br_r">
|
|
<div class="tjsl">
|
|
<p class="kl_sub_t">当前人流量</p>
|
|
<div class="gdsz">
|
|
<div class="shuzi">
|
|
<div class="numberRun5"></div>
|
|
</div>
|
|
<p class="szdw">人次</p>
|
|
<div class="mb_left"></div>
|
|
<div class="mb_right"></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p class="kl_sub_t">饱和度</p>
|
|
<div id="div_bhd_1" style="width:100%; height:120px;">图表</div>
|
|
<p class="kl_sub_t">人流趋势</p>
|
|
<div id="div_qs_1" style="width:100%; height:164px;">图表</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w320 left mr20">
|
|
<div class="jq_top jq_2" id="div_scenic_weather_2">
|
|
</div>
|
|
<div class="br_r">
|
|
<div class="tjsl">
|
|
<p class="kl_sub_t">当前人流量</p>
|
|
<div class="gdsz">
|
|
<div class="shuzi">
|
|
<div class="numberRun6"></div>
|
|
</div>
|
|
<p class="szdw">人次</p>
|
|
<div class="mb_left"></div>
|
|
<div class="mb_right"></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p class="kl_sub_t">饱和度</p>
|
|
<div id="div_bhd_2" style="width:100%; height:120px;">图表</div>
|
|
<p class="kl_sub_t">人流趋势</p>
|
|
<div id="div_qs_2" style="width:100%; height:164px;">图表</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w320 left mr20">
|
|
<div class="jq_top jq_3" id="div_scenic_weather_3">
|
|
</div>
|
|
<div class="br_r">
|
|
<div class="tjsl">
|
|
<p class="kl_sub_t">当前人流量</p>
|
|
<div class="gdsz">
|
|
<div class="shuzi">
|
|
<div class="numberRun7"></div>
|
|
</div>
|
|
<p class="szdw">人次</p>
|
|
<div class="mb_left"></div>
|
|
<div class="mb_right"></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p class="kl_sub_t">饱和度</p>
|
|
<div id="div_bhd_3" style="width:100%; height:120px;"></div>
|
|
<p class="kl_sub_t">人流趋势</p>
|
|
<div id="div_qs_3" style="width:100%; height:164px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w320 left">
|
|
<h4 class="sub_tit2">重点景区实时游客量</h4>
|
|
<div class="zdjq_l mt10">
|
|
<ul class="com_mnjd" id="div_zdscecic">
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div style="clear:both"></div>
|
|
</div>
|
|
<div style="clear:both"></div>
|
|
</div>
|
|
<div class="box_bottom_s2"></div>
|
|
</div>
|
|
</div>
|
|
<div class="index_right right">
|
|
<div class="w443">
|
|
<h3 class="box_bt">年龄分布</h3>
|
|
<div class="box_top_s2"></div>
|
|
<div class="box_center_s2" style=" height:200px;">
|
|
<div class="age_fb">
|
|
<ul class="com_mnjd" id="kllage">
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="box_bottom_s2"></div>
|
|
</div>
|
|
<div class="w443">
|
|
<h3 class="box_bt">消费比例</h3>
|
|
<div class="box_top_s2"></div>
|
|
<div class="box_center_s2" style=" height:340px;">
|
|
<!--width:423-->
|
|
<div id="kllconsume" style="width:100%; height:340px;"></div>
|
|
</div>
|
|
<div class="box_bottom_s2"></div>
|
|
</div>
|
|
<div class="w443">
|
|
<h3 class="box_bt">出行方式</h3>
|
|
<div class="box_top_s2"></div>
|
|
<div class="box_center_s2" style=" height:186px;">
|
|
<div class="cxfs_lbx">
|
|
<ul id="klltirp">
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="box_bottom_s2"></div>
|
|
</div>
|
|
</div>
|
|
<div style="clear:both"></div>
|
|
|
|
<!--数字滚动-->
|
|
<script src="${ctx }/hbcyjc/resource/js/jquery-3.7.0.min.js"></script>
|
|
<script type="text/javascript" src="${ctx }/hbcyjc/resource/js/numberRun.js"></script>
|
|
<script type="text/javascript" src="source.js"></script>
|
|
<!--左侧滑动菜单-->
|
|
<script src="${ctx }/hbcyjc/resource/js/classie.js"></script>
|
|
<script>
|
|
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
|
|
showLeft = document.getElementById( 'showLeft' ),
|
|
body = document.body;
|
|
|
|
showLeft.onclick = function() {
|
|
classie.toggle( this, 'active' );
|
|
classie.toggle( menuLeft, 'cbp-spmenu-open' );
|
|
disableOther( 'showLeft' );
|
|
};
|
|
function disableOther( button ) {
|
|
if( button !== 'showLeft' ) {
|
|
classie.toggle( showLeft, 'disabled' );
|
|
}
|
|
}
|
|
</script>
|
|
<script type="text/javascript">
|
|
$(document).ready(function() {
|
|
init();
|
|
|
|
//定时器每五分钟调用一次fnDate()
|
|
setInterval(function(){
|
|
showSSPeopleOne();
|
|
showSSPeopleTwo();
|
|
showSSPeopleThree();
|
|
ajaxZjkSSKll();
|
|
},10*60*1000);
|
|
|
|
});
|
|
function init(){
|
|
ajaxZjkSSKll();//张家口实时游客数
|
|
ajaxklldayqs();//今天/昨天数据对比
|
|
ajaxkllyearqs();//今年/去年对比
|
|
ajaxkllage();//年龄段对比
|
|
ajaxklltirp();//出行方式对比
|
|
ajaxKllConsume2();//消费水平对比
|
|
ajaxKllScenicTop8();//景区top8，按累计人数排序
|
|
|
|
ajaxScenicTop3();
|
|
}
|
|
|
|
var t0 = null;
|
|
function ajaxZjkSSKll(){
|
|
if(t0!=null){
|
|
window.clearInterval(t0);
|
|
}
|
|
$.ajax({
|
|
type : 'POST',
|
|
url : '${ctx}/kllstat/selectGuestCount.do',
|
|
dataType : 'json',
|
|
success : function(json) {
|
|
var numRun4 = $(".numberRun4").numberAnimate({num:'0', speed:2000});
|
|
var nums4 = Number(json[0].intime_count);
|
|
numRun4.resetData(nums4);
|
|
t0 =setInterval(function(){
|
|
nums4+= Math.floor(Math.random()*10+1);
|
|
numRun4.resetData(nums4);
|
|
},3000);
|
|
}
|
|
});
|
|
}
|
|
|
|
function ajaxklldayqs(){
|
|
var hourarr = [];//0点['0点','1点','2点','3点','4点','5点','6点','7点','8点','9点','10点','11点','12点','13点','14点','15点','16点','17点','18点','19点','20点','21点','22点','23点']
|
|
var dayarr = [];
|
|
var yesarr = [];
|
|
var tqarr = [];
|
|
$.ajax({
|
|
type : 'POST',
|
|
url : '${ctx}/kllstat/getKllHourFlowData.do',
|
|
dataType : 'json',
|
|
success : function(json) {
|
|
for(var i = 0; i < json.length; i++){
|
|
hourarr.push(json[i].ttime+"点");
|
|
dayarr.push(json[i].currentnum);
|
|
yesarr.push(json[i].yesterdaynum);
|
|
tqarr.push(json[i].lastweeknum);
|
|
}
|
|
klldayqs(hourarr,dayarr,yesarr,tqarr);
|
|
}
|
|
});
|
|
}
|
|
//客流量日趋势分布
|
|
function klldayqs(hourarr,dayarr,yesarr,tqarr){
|
|
var charts=document.getElementById('klldayqs');
|
|
var myChart = echarts.init(charts);
|
|
var option = {
|
|
title: {
|
|
text: '',
|
|
textStyle: {
|
|
fontWeight: 'normal',
|
|
fontSize: 16,
|
|
color: '#F1F1F3'
|
|
},
|
|
left: '6%'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
lineStyle: {
|
|
color: '#fff'
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
icon: 'rect',
|
|
itemWidth: 14,
|
|
itemHeight: 5,
|
|
itemGap: 13,
|
|
data: ['今天', '昨天', '上周同期'],
|
|
right: '4%',
|
|
textStyle: {
|
|
fontSize: 12,
|
|
color: '#F1F1F3'
|
|
}
|
|
},
|
|
grid: {
|
|
top: '13%',
|
|
left: '2%',
|
|
right: '4%',
|
|
bottom: '1%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
data: hourarr
|
|
}],
|
|
yAxis: [{
|
|
type: 'value',
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
margin: 10,
|
|
textStyle: {
|
|
fontSize: 14
|
|
}
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: '#57617B'
|
|
}
|
|
}
|
|
}],
|
|
series: [{
|
|
name: '今天',
|
|
type: 'line',
|
|
smooth: true,
|
|
lineStyle: {
|
|
normal: {
|
|
width: 1
|
|
}
|
|
},
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: 'rgba(137, 189, 27, 0.3)'
|
|
}, {
|
|
offset: 0.8,
|
|
color: 'rgba(137, 189, 27, 0)'
|
|
}], false),
|
|
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
shadowBlur: 10
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgb(137,189,27)'
|
|
}
|
|
},
|
|
data: dayarr
|
|
}, {
|
|
name: '昨天',
|
|
type: 'line',
|
|
smooth: true,
|
|
lineStyle: {
|
|
normal: {
|
|
width: 1
|
|
}
|
|
},
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: 'rgba(0, 136, 212, 0.3)'
|
|
}, {
|
|
offset: 0.8,
|
|
color: 'rgba(0, 136, 212, 0)'
|
|
}], false),
|
|
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
shadowBlur: 10
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgb(0,136,212)'
|
|
}
|
|
},
|
|
data: yesarr
|
|
}, {
|
|
name: '上周同期',
|
|
type: 'line',
|
|
smooth: true,
|
|
lineStyle: {
|
|
normal: {
|
|
width: 1
|
|
}
|
|
},
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: 'rgba(219, 50, 51, 0.3)'
|
|
}, {
|
|
offset: 0.8,
|
|
color: 'rgba(219, 50, 51, 0)'
|
|
}], false),
|
|
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
shadowBlur: 10
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgb(219,50,51)'
|
|
}
|
|
},
|
|
data: tqarr
|
|
}, ]
|
|
};
|
|
myChart.setOption(option);
|
|
}
|
|
function ajaxkllyearqs(){
|
|
var yeararr = [];//0点['0点','1点','2点','3点','4点','5点','6点','7点','8点','9点','10点','11点','12点','13点','14点','15点','16点','17点','18点','19点','20点','21点','22点','23点']
|
|
var dayarr = [];
|
|
var yesarr = [];
|
|
$.ajax({
|
|
type : 'POST',
|
|
url : '${ctx}/kllstat/getKllIndexYearQs.do',
|
|
dataType : 'json',
|
|
success : function(json) {
|
|
for(var i = 0; i < json.length; i++){
|
|
yeararr.push(json[i].tmouth+"月");
|
|
dayarr.push(json[i].currentnum);
|
|
yesarr.push(json[i].lastyearnum);
|
|
}
|
|
kllyearqs(yeararr,dayarr,yesarr);
|
|
}
|
|
});
|
|
}
|
|
//客流量年趋势分布
|
|
function kllyearqs(yeararr,dayarr,yesarr){
|
|
var charts=document.getElementById('kllyearqs');
|
|
var myChart = echarts.init(charts);
|
|
var option = {
|
|
title: {
|
|
text: '',
|
|
textStyle: {
|
|
fontWeight: 'normal',
|
|
fontSize: 16,
|
|
color: '#F1F1F3'
|
|
},
|
|
left: '6%'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
lineStyle: {
|
|
color: '#fff'
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
icon: 'rect',
|
|
itemWidth: 14,
|
|
itemHeight: 5,
|
|
itemGap: 13,
|
|
data: ['今年', '去年'],
|
|
right: '4%',
|
|
textStyle: {
|
|
fontSize: 12,
|
|
color: '#F1F1F3'
|
|
}
|
|
},
|
|
grid: {
|
|
top: '13%',
|
|
left: '2%',
|
|
right: '4%',
|
|
bottom: '1%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
data: yeararr
|
|
}],
|
|
yAxis: [{
|
|
type: 'value',
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
margin: 10,
|
|
textStyle: {
|
|
fontSize: 14
|
|
}
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: '#57617B'
|
|
}
|
|
}
|
|
}],
|
|
series: [{
|
|
name: '今年',
|
|
type: 'line',
|
|
smooth: true,
|
|
lineStyle: {
|
|
normal: {
|
|
width: 1
|
|
}
|
|
},
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: 'rgba(137, 189, 27, 0.3)'
|
|
}, {
|
|
offset: 0.8,
|
|
color: 'rgba(137, 189, 27, 0)'
|
|
}], false),
|
|
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
shadowBlur: 10
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgb(137,189,27)'
|
|
}
|
|
},
|
|
data: dayarr
|
|
}, {
|
|
name: '去年',
|
|
type: 'line',
|
|
smooth: true,
|
|
lineStyle: {
|
|
normal: {
|
|
width: 1
|
|
}
|
|
},
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: 'rgba(0, 136, 212, 0.3)'
|
|
}, {
|
|
offset: 0.8,
|
|
color: 'rgba(0, 136, 212, 0)'
|
|
}], false),
|
|
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
shadowBlur: 10
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgb(0,136,212)'
|
|
}
|
|
},
|
|
data: yesarr
|
|
}]
|
|
};
|
|
myChart.setOption(option);
|
|
}
|
|
|
|
function ajaxkllage(){
|
|
var str = "";
|
|
str = str + "";
|
|
$.ajax({
|
|
type : 'POST',
|
|
url : '${ctx}/kllstat/getKllIndexAge.do',
|
|
dataType : 'json',
|
|
success : function(json) {
|
|
str = str + "<li class=\"age_cd\">";
|
|
str = str + "<h3><span>01</span>"+json[0].agep+"</h3>";
|
|
str = str + "<span class=\"jd_degnum\">"+json[0].aratio+"%</span>";
|
|
str = str + "<p class=\"mnjd_bg\">";
|
|
str = str + "<span class=\"wd_num\" style=\"width:"+json[0].aratio+"%\"></span>";
|
|
str = str + "</p>";
|
|
str = str + "</li>";
|
|
str = str + "<li class=\"age_yg\">";
|
|
str = str + "<h3><span>02</span>"+json[1].agep+"</h3>";
|
|
str = str + "<span class=\"jd_degnum\">"+json[1].aratio+"%</span>";
|
|
str = str + "<p class=\"mnjd_bg\">";
|
|
str = str + "<span class=\"wd_num\" style=\"width:"+json[1].aratio+"%\"></span>";
|
|
str = str + "</p>";
|
|
str = str + "</li>";
|
|
str = str + "<li class=\"age_me\">";
|
|
str = str + "<h3><span>03</span>"+json[2].agep+"</h3>";
|
|
str = str + "<span class=\"jd_degnum\">"+json[2].aratio+"%</span>";
|
|
str = str + "<p class=\"mnjd_bg\">";
|
|
str = str + "<span class=\"wd_num\" style=\"width:"+json[2].aratio+"%\"></span>";
|
|
str = str + "</p>";
|
|
str = str + "</li>";
|
|
str = str + "<li class=\"age_ol\">";
|
|
str = str + "<h3><span>04</span>"+json[3].agep+"</h3>";
|
|
str = str + "<span class=\"jd_degnum\">"+json[3].aratio+"%</span>";
|
|
str = str + "<p class=\"mnjd_bg\">";
|
|
str = str + "<span class=\"wd_num\" style=\"width:"+json[3].aratio+"%\"></span>";
|
|
str = str + "</p>";
|
|
str = str + "</li>";
|
|
document.getElementById('kllage').innerHTML = str;
|
|
}
|
|
});
|
|
}
|
|
|
|
function ajaxklltirp(){
|
|
var str = "";
|
|
str = str + "";
|
|
$.ajax({
|
|
type : 'POST',
|
|
url : '${ctx}/kllstat/getKllIndexTirp.do',
|
|
dataType : 'json',
|
|
success : function(json) {
|
|
str = str + "<li><img src=\"${ctx }/hbcyjc/resource/img2/chux_hc.png\" />";
|
|
str = str + "<div class=\"cx_inf\">";
|
|
str = str + "<p>"+json[0].tirpname+"</p>";
|
|
str = str + "<h3 class=\"col_1\">"+json[0].tratio+"%</h3>";
|
|
str = str + "</div>";
|
|
str = str + "</li>";
|
|
str = str + "<li><img src=\"${ctx }/hbcyjc/resource/img2/chux_qc.png\" />";
|
|
str = str + "<div class=\"cx_inf\">";
|
|
str = str + "<p>"+json[1].tirpname+"</p>";
|
|
str = str + "<h3 class=\"col_2\">"+json[1].tratio+"%</h3>";
|
|
str = str + "</div>";
|
|
str = str + "</li>";
|
|
str = str + "<li><img src=\"${ctx }/hbcyjc/resource/img2/chux_fj.png\" />";
|
|
str = str + "<div class=\"cx_inf\">";
|
|
str = str + "<p>"+json[2].tirpname+"</p>";
|
|
str = str + "<h3 class=\"col_3\">"+json[2].tratio+"%</h3>";
|
|
str = str + "</div>";
|
|
str = str + "</li>";
|
|
str = str + "<div style=\"clear:both\"></div>";
|
|
|
|
document.getElementById('klltirp').innerHTML = str;
|
|
}
|
|
});
|
|
}
|
|
|
|
function ajaxKllConsume(){
|
|
var namearr = [];
|
|
var valarr = [];
|
|
$.ajax({
|
|
type : 'POST',
|
|
url : '${ctx}/kllstat/getKllIndexConsume.do',
|
|
dataType : 'json',
|
|
success : function(json) {
|
|
for(var i = 0; i < json.length; i++){
|
|
namearr.push(json[i].consume);
|
|
valarr.push({value:json[i].cratio, name:json[i].consume});
|
|
}
|
|
kllConsume(namearr,valarr);
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
function kllConsume(namearr,valarr){
|
|
var charts=document.getElementById('kllconsume');
|
|
var myChart = echarts.init(charts);
|
|
// var scaleData = [{
|
|
// 'name': '工程建设',
|
|
// 'value': 35
|
|
// },
|
|
// {
|
|
// 'name': '产权交易',
|
|
// 'value': 60
|
|
// },
|
|
// {
|
|
// 'name': '土地交易',
|
|
// 'value': 5
|
|
// }];
|
|
var scaleData = valarr;
|
|
var rich = {
|
|
white: {
|
|
color: '#ddd',
|
|
align: 'center',
|
|
padding: [3, 0]
|
|
}
|
|
};
|
|
var placeHolderStyle = {
|
|
normal: {
|
|
label: {
|
|
show: false
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
color: 'rgba(0, 0, 0, 0)',
|
|
borderColor: 'rgba(0, 0, 0, 0)',
|
|
borderWidth: 0
|
|
}
|
|
};
|
|
var data = [];
|
|
var color=['#00ffff','#006ced','#ffa800','#ff3000']
|
|
for (var i = 0; i < scaleData.length; i++) {
|
|
data.push({
|
|
value: scaleData[i].value,
|
|
name: scaleData[i].name,
|
|
itemStyle: {
|
|
normal: {
|
|
borderWidth: 2,
|
|
shadowBlur: 200,
|
|
borderColor:color[i],
|
|
shadowColor: color[i]
|
|
}
|
|
}
|
|
}, {
|
|
value: 2,
|
|
name: '',
|
|
itemStyle: placeHolderStyle
|
|
});
|
|
}
|
|
var seriesObj = [{
|
|
name: '',
|
|
type: 'pie',
|
|
clockWise: false,
|
|
radius: [60, 110],
|
|
color:['#D824D1','#FFB51A','#6A85D9'],
|
|
hoverAnimation: false,
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
show: true,
|
|
position: 'outside',
|
|
color: '#ddd',
|
|
formatter: function(params) {
|
|
var percent = 0;
|
|
var total = 0;
|
|
for (var i = 0; i < scaleData.length; i++) {
|
|
total += scaleData[i].value;
|
|
}
|
|
percent = ((params.value / total) * 100).toFixed(0);
|
|
if(params.name !== '') {
|
|
return params.name + '\n{white|' + '占比' + percent + '%}';
|
|
}else {
|
|
return '';
|
|
}
|
|
},
|
|
rich: rich
|
|
},
|
|
labelLine: {
|
|
show: true,
|
|
color:'#00ffff'
|
|
}
|
|
}
|
|
},
|
|
data: data
|
|
}];
|
|
option = {
|
|
// backgroundColor: '#04243E',
|
|
tooltip: {
|
|
show: false
|
|
},
|
|
legend: {
|
|
show: false
|
|
},
|
|
toolbox: {
|
|
show: false
|
|
},
|
|
series: seriesObj
|
|
}
|
|
myChart.setOption(option);
|
|
}
|
|
|
|
function ajaxKllScenicTop8(){
|
|
var str = "";
|
|
var allNum = 0;
|
|
$.ajax({
|
|
type : 'POST',
|
|
url : '${ctx}/kllstat/getKllScenicZd.do',
|
|
dataType : 'json',
|
|
success : function(json) {
|
|
for(var i = 0; i < json.length; i++){
|
|
allNum = Number(allNum) + Number(json[i].peoplenumber);
|
|
}
|
|
for(var i = 0; i < json.length; i++){
|
|
if(i == 0){
|
|
str = str + "<li class=\"col_fir_1\">";
|
|
}else if(i == 1){
|
|
str = str + "<li class=\"col_fir_2\">";
|
|
}else if(i == 2){
|
|
str = str + "<li class=\"col_fir_3\">";
|
|
}else{
|
|
str = str + "<li>";
|
|
}
|
|
|
|
str = str + "<h3><span>"+(i+1)+"</span>"+json[i].scenicName+"</h3>";
|
|
str = str + "<span class=\"jd_degnum\">"+json[i].peoplenumber+"</span>";
|
|
str = str + "<p class=\"mnjd_bg\">";
|
|
str = str + "<span class=\"wd_num\" style=\"width:"+parseInt(Number(json[i].peoplenumber)/Number(allNum)*100)+"%\"></span>";
|
|
str = str + "</p>";
|
|
str = str + "</li>";
|
|
}
|
|
document.getElementById('div_zdscecic').innerHTML = str;
|
|
}
|
|
});
|
|
}
|
|
var scenicWeatherOne = "";//第一景区天气情况
|
|
var scenicWeatherTwo = "";//第二景区天气情况
|
|
var scenicWeatherThree = "";//第三景区天气情况
|
|
|
|
|
|
var currentKllOne = "";//第一景区当前客流量
|
|
var currentKllTwo = "";//第二景区当前客流量
|
|
var currentKllThree = "";//第三景区当前客流量
|
|
|
|
var scenicIdOne = "";//第一景区主键
|
|
var scenicIdTwo = "";//第二景区主键
|
|
var scenicIdThree = "";//第三景区主键
|
|
|
|
var scenicIdOneAreaCode = "";//第一景区地域编码
|
|
var scenicIdTwoAreaCode = "";//第二景区地域编码
|
|
var scenicIdThreeAreaCode = "";//第三景区地域编码
|
|
|
|
var scenicTop3;
|
|
// window.setInterval("ajaxScenicTop3()",1000*10);//定时调用init()方法刷新页面，时间单位为毫秒
|
|
function ajaxScenicTop3(){
|
|
scenicWeatherOne = "";//第一景区天气情况
|
|
scenicWeatherTwo = "";//第二景区天气情况
|
|
scenicWeatherThree = "";//第三景区天气情况
|
|
|
|
$.ajax({
|
|
type : 'POST',
|
|
url : '${ctx}/kllstat/getKllScenicTop3.do',
|
|
dataType : 'json',
|
|
success : function(json) {
|
|
scenicTop3 = json;
|
|
scenicIdOne = scenicTop3[0].guid;
|
|
scenicIdTwo = scenicTop3[1].guid;
|
|
scenicIdThree = scenicTop3[2].guid;
|
|
|
|
scenicIdOneAreaCode = scenicTop3[0].areacode;//第一景区地域编码
|
|
scenicIdTwoAreaCode = scenicTop3[1].areacode;//第二景区地域编码
|
|
scenicIdThreeAreaCode = scenicTop3[2].areacode;//第三景区地域编码
|
|
|
|
showScenicWeatherOne();
|
|
showScenicWeatherTwo();
|
|
showScenicWeatherThree();
|
|
|
|
showSSPeopleOne();
|
|
showSSPeopleTwo();
|
|
showSSPeopleThree();
|
|
|
|
showBhdOne();
|
|
showBhdTwo();
|
|
showBhdThree();
|
|
|
|
ajaxScenicOneKll();
|
|
ajaxScenicTwoKll();
|
|
ajaxScenicThreeKll();
|
|
}
|
|
});
|
|
}
|
|
|
|
function showWeatherImg(weathers){
|
|
var s = "${ctx }/hbcyjc/resource/img2/cloudy.png";
|
|
if(weathers != undefined){
|
|
if(weathers.indexOf("晴") > -1){
|
|
s = "${ctx }/hbcyjc/resource/img2/sunny.png";
|
|
}else if(weathers.indexOf("多云") > -1){
|
|
s = "${ctx }/hbcyjc/resource/img2/cloudy.png";
|
|
}else if(weathers.indexOf("阴") > -1){
|
|
s = "${ctx }/hbcyjc/resource/img2/yin.png";
|
|
}else if(weathers.indexOf("雨") > -1){
|
|
s = "${ctx }/hbcyjc/resource/img2/rain.png";
|
|
}else if(weathers.indexOf("雪") > -1){
|
|
s = "${ctx }/hbcyjc/resource/img2/snow.png";
|
|
}else{
|
|
s = "${ctx }/hbcyjc/resource/img2/cloudy.png";
|
|
}
|
|
}
|
|
return s;
|
|
}
|
|
|
|
function showScenicWeatherOne(){
|
|
scenicWeatherOne = scenicWeatherOne + "<h3>"+scenicTop3[0].scenicName+"<span>"+scenicTop3[0].scenicRank+"</span></h3>";
|
|
|
|
$.ajax({
|
|
type : 'POST',
|
|
url : '${ctx}/kllstat/getWeatherFromAreaCode.do?areacode='+scenicIdOneAreaCode,
|
|
dataType : 'json',
|
|
async:true,
|
|
success : function(json) {
|
|
scenicWeatherOne = scenicWeatherOne + "<div class=\"tq_cel\">";
|
|
scenicWeatherOne = scenicWeatherOne + "<h6><img src=\""+showWeatherImg(json[0].weathers)+"\" class=\"kljc_tq_pic\">"+json[0].weathers+"</h6>";
|
|
scenicWeatherOne = scenicWeatherOne + "<p>"+json[0].temperature+"℃</p>";
|
|
scenicWeatherOne = scenicWeatherOne + "</div>";
|
|
scenicWeatherOne = scenicWeatherOne + "<div class=\"tq_cel\">";
|
|
scenicWeatherOne = scenicWeatherOne + "<h6>空气质量</h6>";
|
|
scenicWeatherOne = scenicWeatherOne + "<p>"+json[0].quality+"</p>";
|
|
scenicWeatherOne = scenicWeatherOne + "</div>";
|
|
scenicWeatherOne = scenicWeatherOne + "<div class=\"tq_cel\">";
|
|
scenicWeatherOne = scenicWeatherOne + "<h6>PM2.5值</h6>";
|
|
scenicWeatherOne = scenicWeatherOne + "<p>"+json[0].pm25+"</p>";
|
|
scenicWeatherOne = scenicWeatherOne + "</div>";
|
|
scenicWeatherOne = scenicWeatherOne + "<div class=\"tq_cel\">";
|
|
scenicWeatherOne = scenicWeatherOne + "<h6>空气湿度</h6>";
|
|
scenicWeatherOne = scenicWeatherOne + "<p>"+json[0].humidity+"</p>";
|
|
scenicWeatherOne = scenicWeatherOne + "</div>";
|
|
scenicWeatherOne = scenicWeatherOne + "<div style=\"clear:both\"></div>";
|
|
|
|
document.getElementById('div_scenic_weather_1').innerHTML = scenicWeatherOne;
|
|
}
|
|
});
|
|
|
|
}
|
|
function showScenicWeatherTwo(){
|
|
scenicWeatherTwo = scenicWeatherTwo + "<h3>"+scenicTop3[1].scenicName+"<span>"+scenicTop3[1].scenicRank+"</span></h3>";
|
|
|
|
$.ajax({
|
|
type : 'POST',
|
|
url : '${ctx}/kllstat/getWeatherFromAreaCode.do?areacode='+scenicIdTwoAreaCode,
|
|
dataType : 'json',
|
|
async:true,
|
|
success : function(json) {
|
|
scenicWeatherTwo = scenicWeatherTwo + "<div class=\"tq_cel\">";
|
|
scenicWeatherTwo = scenicWeatherTwo + "<h6><img src=\""+showWeatherImg(json[0].weathers)+"\" class=\"kljc_tq_pic\">"+json[0].weathers+"</h6>";
|
|
scenicWeatherTwo = scenicWeatherTwo + "<p>"+json[0].temperature+"℃</p>";
|
|
scenicWeatherTwo = scenicWeatherTwo + "</div>";
|
|
scenicWeatherTwo = scenicWeatherTwo + "<div class=\"tq_cel\">";
|
|
scenicWeatherTwo = scenicWeatherTwo + "<h6>空气质量</h6>";
|
|
scenicWeatherTwo = scenicWeatherTwo + "<p>"+json[0].quality+"</p>";
|
|
scenicWeatherTwo = scenicWeatherTwo + "</div>";
|
|
scenicWeatherTwo = scenicWeatherTwo + "<div class=\"tq_cel\">";
|
|
scenicWeatherTwo = scenicWeatherTwo + "<h6>PM2.5值</h6>";
|
|
scenicWeatherTwo = scenicWeatherTwo + "<p>"+json[0].pm25+"</p>";
|
|
scenicWeatherTwo = scenicWeatherTwo + "</div>";
|
|
scenicWeatherTwo = scenicWeatherTwo + "<div class=\"tq_cel\">";
|
|
scenicWeatherTwo = scenicWeatherTwo + "<h6>空气湿度</h6>";
|
|
scenicWeatherTwo = scenicWeatherTwo + "<p>"+json[0].humidity+"</p>";
|
|
scenicWeatherTwo = scenicWeatherTwo + "</div>";
|
|
scenicWeatherTwo = scenicWeatherTwo + "<div style=\"clear:both\"></div>";
|
|
|
|
document.getElementById('div_scenic_weather_2').innerHTML = scenicWeatherTwo;
|
|
}
|
|
});
|
|
|
|
}
|
|
function showScenicWeatherThree(){
|
|
scenicWeatherThree = scenicWeatherThree + "<h3>"+scenicTop3[2].scenicName+"<span>"+scenicTop3[2].scenicRank+"</span></h3>";
|
|
|
|
$.ajax({
|
|
type : 'POST',
|
|
url : '${ctx}/kllstat/getWeatherFromAreaCode.do?areacode='+scenicIdThreeAreaCode,
|
|
dataType : 'json',
|
|
async:true,
|
|
success : function(json) {
|
|
scenicWeatherThree = scenicWeatherThree + "<div class=\"tq_cel\">";
|
|
scenicWeatherThree = scenicWeatherThree + "<h6><img src=\""+showWeatherImg(json[0].weathers)+"\" class=\"kljc_tq_pic\">"+json[0].weathers+"</h6>";
|
|
scenicWeatherThree = scenicWeatherThree + "<p>"+json[0].temperature+"℃</p>";
|
|
scenicWeatherThree = scenicWeatherThree + "</div>";
|
|
scenicWeatherThree = scenicWeatherThree + "<div class=\"tq_cel\">";
|
|
scenicWeatherThree = scenicWeatherThree + "<h6>空气质量</h6>";
|
|
scenicWeatherThree = scenicWeatherThree + "<p>"+json[0].quality+"</p>";
|
|
scenicWeatherThree = scenicWeatherThree + "</div>";
|
|
scenicWeatherThree = scenicWeatherThree + "<div class=\"tq_cel\">";
|
|
scenicWeatherThree = scenicWeatherThree + "<h6>PM2.5值</h6>";
|
|
scenicWeatherThree = scenicWeatherThree + "<p>"+json[0].pm25+"</p>";
|
|
scenicWeatherThree = scenicWeatherThree + "</div>";
|
|
scenicWeatherThree = scenicWeatherThree + "<div class=\"tq_cel\">";
|
|
scenicWeatherThree = scenicWeatherThree + "<h6>空气湿度</h6>";
|
|
scenicWeatherThree = scenicWeatherThree + "<p>"+json[0].humidity+"</p>";
|
|
scenicWeatherThree = scenicWeatherThree + "</div>";
|
|
scenicWeatherThree = scenicWeatherThree + "<div style=\"clear:both\"></div>";
|
|
|
|
document.getElementById('div_scenic_weather_3').innerHTML = scenicWeatherThree;
|
|
}
|
|
});
|
|
}
|
|
|
|
function showBhdOne(){
|
|
var d = (Number(scenicTop3[0].comfortableState)/100).toFixed(2);
|
|
var charts=document.getElementById('div_bhd_1');
|
|
var myChart = echarts.init(charts);
|
|
var option = {
|
|
series: [{
|
|
type: 'liquidFill',
|
|
// data: [0.6, 0.5, 0.4, 0.3],
|
|
data: [d],
|
|
direction: 'right', //波浪方向或者静止
|
|
radius: '98%',
|
|
// 水球颜色
|
|
color: ['#00c2ff'],
|
|
// outline 外边
|
|
outline: {
|
|
// show: false
|
|
borderDistance: 0, //内环padding值
|
|
itemStyle: {
|
|
borderWidth: 2, //圆边线宽度
|
|
borderColor: '#00c2ff',
|
|
},
|
|
},
|
|
label: {
|
|
normal: {
|
|
formatter: scenicTop3[0].comfortableState+'%', //重置百分比字体为空
|
|
// textStyle: {
|
|
color: '#fff',
|
|
insideColor: 'yellow',
|
|
fontSize: 20
|
|
// }
|
|
}
|
|
},
|
|
// 内图 背景色 边
|
|
backgroundStyle: {
|
|
color: 'rgba(4,24,74,0.8)',
|
|
// borderWidth: 5,
|
|
// borderColor: 'red',
|
|
}
|
|
}]
|
|
};
|
|
myChart.setOption(option);
|
|
}
|
|
function showBhdTwo(){
|
|
var d = (Number(scenicTop3[1].comfortableState)/100).toFixed(2);
|
|
var charts=document.getElementById('div_bhd_2');
|
|
var myChart = echarts.init(charts);
|
|
var option = {
|
|
series: [{
|
|
type: 'liquidFill',
|
|
// data: [0.6, 0.5, 0.4, 0.3],
|
|
data: [d],
|
|
direction: 'right', //波浪方向或者静止
|
|
radius: '98%',
|
|
// 水球颜色
|
|
color: ['#00c2ff'],
|
|
// outline 外边
|
|
outline: {
|
|
// show: false
|
|
borderDistance: 0, //内环padding值
|
|
itemStyle: {
|
|
borderWidth: 2, //圆边线宽度
|
|
borderColor: '#00c2ff',
|
|
},
|
|
},
|
|
label: {
|
|
normal: {
|
|
formatter: scenicTop3[1].comfortableState+'%', //重置百分比字体为空
|
|
// textStyle: {
|
|
color: '#fff',
|
|
insideColor: 'yellow',
|
|
fontSize: 20
|
|
// }
|
|
}
|
|
},
|
|
// 内图 背景色 边
|
|
backgroundStyle: {
|
|
color: 'rgba(4,24,74,0.8)',
|
|
// borderWidth: 5,
|
|
// borderColor: 'red',
|
|
}
|
|
}]
|
|
};
|
|
myChart.setOption(option);
|
|
}
|
|
function showBhdThree(){
|
|
var d = (Number(scenicTop3[2].comfortableState)/100).toFixed(2);
|
|
var charts=document.getElementById('div_bhd_3');
|
|
var myChart = echarts.init(charts);
|
|
var option = {
|
|
series: [{
|
|
type: 'liquidFill',
|
|
// data: [0.6, 0.5, 0.4, 0.3],
|
|
data: [d],
|
|
direction: 'right', //波浪方向或者静止
|
|
radius: '98%',
|
|
// 水球颜色
|
|
color: ['#00c2ff'],
|
|
// outline 外边
|
|
outline: {
|
|
// show: false
|
|
borderDistance: 0, //内环padding值
|
|
itemStyle: {
|
|
borderWidth: 2, //圆边线宽度
|
|
borderColor: '#00c2ff',
|
|
},
|
|
},
|
|
label: {
|
|
normal: {
|
|
formatter: scenicTop3[2].comfortableState+'%', //重置百分比字体为空
|
|
// textStyle: {
|
|
color: '#fff',
|
|
insideColor: 'yellow',
|
|
fontSize: 20
|
|
// }
|
|
}
|
|
},
|
|
// 内图 背景色 边
|
|
backgroundStyle: {
|
|
color: 'rgba(4,24,74,0.8)',
|
|
// borderWidth: 5,
|
|
// borderColor: 'red',
|
|
}
|
|
}]
|
|
};
|
|
myChart.setOption(option);
|
|
}
|
|
var t1=null;
|
|
var t2=null;
|
|
var t3=null;
|
|
function showSSPeopleOne(){
|
|
if(t1!=null){
|
|
window.clearInterval(t1);
|
|
}
|
|
var numRun5 = $(".numberRun5").numberAnimate({num:'0', speed:2000});
|
|
var nums5 = Number(scenicTop3[0].peoplenumber);
|
|
numRun5.resetData(nums5);
|
|
t1 = setInterval(function(){
|
|
nums5+= Math.floor(Math.random()*5+1);
|
|
numRun5.resetData(nums5);
|
|
},5000);
|
|
}
|
|
|
|
|
|
function showSSPeopleTwo(){
|
|
if(t2!=null){
|
|
window.clearInterval(t2);
|
|
}
|
|
var numRun6 = $(".numberRun6").numberAnimate({num:'0', speed:3000});
|
|
var nums6 = Number(scenicTop3[1].peoplenumber);
|
|
numRun6.resetData(nums6);
|
|
t2 = setInterval(function(){
|
|
nums6+= Math.floor(Math.random()*5+1);
|
|
numRun6.resetData(nums6);
|
|
},7000);
|
|
}
|
|
function showSSPeopleThree(){
|
|
if(t3!=null){
|
|
window.clearInterval(t3);
|
|
}
|
|
var numRun7 = $(".numberRun7").numberAnimate({num:'0', speed:4000});
|
|
var nums7 = Number(scenicTop3[2].peoplenumber);
|
|
numRun7.resetData(nums7);
|
|
t3 = setInterval(function(){
|
|
nums7+= Math.floor(Math.random()*5+1);
|
|
numRun7.resetData(nums7);
|
|
},9000);
|
|
}
|
|
function ajaxScenicOneKll(){
|
|
var hourarr = [];
|
|
var dayarr = [];
|
|
$.ajax({
|
|
type : 'POST',
|
|
url : '${ctx}/kllstat/getHourScenicKll.do?scenicid='+scenicIdOne,
|
|
dataType : 'json',
|
|
success : function(json) {
|
|
for(var i = 0; i < json.length; i++){
|
|
hourarr.push(json[i].tdate+"点");
|
|
dayarr.push(json[i].tflownum);
|
|
}
|
|
kllHoursourceOne(hourarr,dayarr);
|
|
}
|
|
});
|
|
}
|
|
function kllHoursourceOne(hourarr,dayarr){
|
|
var charts=document.getElementById('div_qs_1');
|
|
var myChart = echarts.init(charts);
|
|
var option = {
|
|
title: {
|
|
text: '',
|
|
textStyle: {
|
|
fontWeight: 'normal',
|
|
fontSize: 16,
|
|
color: '#F1F1F3'
|
|
},
|
|
left: '6%'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
lineStyle: {
|
|
color: '#fff'
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
icon: 'rect',
|
|
itemWidth: 14,
|
|
itemHeight: 5,
|
|
itemGap: 13,
|
|
data: ['今天'],
|
|
right: '4%',
|
|
textStyle: {
|
|
fontSize: 12,
|
|
color: '#F1F1F3'
|
|
}
|
|
},
|
|
grid: {
|
|
top:'13%',
|
|
left: '1%',
|
|
right: '4%',
|
|
bottom: '0%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
data: hourarr
|
|
}],
|
|
yAxis: [{
|
|
type: 'value',
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
margin: 10,
|
|
textStyle: {
|
|
fontSize: 14
|
|
}
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: '#57617B'
|
|
}
|
|
}
|
|
}],
|
|
series: [{
|
|
name: '今天',
|
|
type: 'line',
|
|
smooth: true,
|
|
lineStyle: {
|
|
normal: {
|
|
width: 1
|
|
}
|
|
},
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: 'rgba(137, 189, 27, 0.3)'
|
|
}, {
|
|
offset: 0.8,
|
|
color: 'rgba(137, 189, 27, 0)'
|
|
}], false),
|
|
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
shadowBlur: 10
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgb(137,189,27)'
|
|
}
|
|
},
|
|
data: dayarr
|
|
}]
|
|
};
|
|
myChart.setOption(option);
|
|
}
|
|
function ajaxScenicTwoKll(){
|
|
var hourarr = [];
|
|
var dayarr = [];
|
|
$.ajax({
|
|
type : 'POST',
|
|
url : '${ctx}/kllstat/getHourScenicKll.do?scenicid='+scenicIdTwo,
|
|
dataType : 'json',
|
|
success : function(json) {
|
|
for(var i = 0; i < json.length; i++){
|
|
hourarr.push(json[i].tdate+"点");
|
|
dayarr.push(json[i].tflownum);
|
|
}
|
|
kllHoursourceTwo(hourarr,dayarr);
|
|
}
|
|
});
|
|
}
|
|
function kllHoursourceTwo(hourarr,dayarr){
|
|
var charts=document.getElementById('div_qs_2');
|
|
var myChart = echarts.init(charts);
|
|
var option = {
|
|
title: {
|
|
text: '',
|
|
textStyle: {
|
|
fontWeight: 'normal',
|
|
fontSize: 16,
|
|
color: '#F1F1F3'
|
|
},
|
|
left: '6%'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
lineStyle: {
|
|
color: '#fff'
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
icon: 'rect',
|
|
itemWidth: 14,
|
|
itemHeight: 5,
|
|
itemGap: 13,
|
|
data: ['今天'],
|
|
right: '4%',
|
|
textStyle: {
|
|
fontSize: 12,
|
|
color: '#F1F1F3'
|
|
}
|
|
},
|
|
grid: {
|
|
top:'13%',
|
|
left: '1%',
|
|
right: '4%',
|
|
bottom: '0%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
data: hourarr
|
|
}],
|
|
yAxis: [{
|
|
type: 'value',
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
margin: 10,
|
|
textStyle: {
|
|
fontSize: 14
|
|
}
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: '#57617B'
|
|
}
|
|
}
|
|
}],
|
|
series: [{
|
|
name: '今天',
|
|
type: 'line',
|
|
smooth: true,
|
|
lineStyle: {
|
|
normal: {
|
|
width: 1
|
|
}
|
|
},
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: 'rgba(0, 136, 212, 0.3)'
|
|
}, {
|
|
offset: 0.8,
|
|
color: 'rgba(0, 136, 212, 0)'
|
|
}], false),
|
|
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
shadowBlur: 10
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgb(0,136,212)'
|
|
}
|
|
},
|
|
data: dayarr
|
|
}]
|
|
};
|
|
myChart.setOption(option);
|
|
}
|
|
function ajaxScenicThreeKll(){
|
|
var hourarr = [];
|
|
var dayarr = [];
|
|
$.ajax({
|
|
type : 'POST',
|
|
url : '${ctx}/kllstat/getHourScenicKll.do?scenicid='+scenicIdThree,
|
|
dataType : 'json',
|
|
success : function(json) {
|
|
for(var i = 0; i < json.length; i++){
|
|
hourarr.push(json[i].tdate+"点");
|
|
dayarr.push(json[i].tflownum);
|
|
}
|
|
kllHoursourceThree(hourarr,dayarr);
|
|
}
|
|
});
|
|
}
|
|
function kllHoursourceThree(hourarr,dayarr){
|
|
var charts=document.getElementById('div_qs_3');
|
|
var myChart = echarts.init(charts);
|
|
var option = {
|
|
title: {
|
|
text: '',
|
|
textStyle: {
|
|
fontWeight: 'normal',
|
|
fontSize: 16,
|
|
color: '#F1F1F3'
|
|
},
|
|
left: '6%'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
lineStyle: {
|
|
color: '#fff'
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
icon: 'rect',
|
|
itemWidth: 14,
|
|
itemHeight: 5,
|
|
itemGap: 13,
|
|
data: ['今天'],
|
|
right: '4%',
|
|
textStyle: {
|
|
fontSize: 12,
|
|
color: '#F1F1F3'
|
|
}
|
|
},
|
|
grid: {
|
|
top:'13%',
|
|
left: '1%',
|
|
right: '4%',
|
|
bottom: '0%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
data: hourarr
|
|
}],
|
|
yAxis: [{
|
|
type: 'value',
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
margin: 10,
|
|
textStyle: {
|
|
fontSize: 14
|
|
}
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: '#57617B'
|
|
}
|
|
}
|
|
}],
|
|
series: [{
|
|
name: '今天',
|
|
type: 'line',
|
|
smooth: true,
|
|
lineStyle: {
|
|
normal: {
|
|
width: 1
|
|
}
|
|
},
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: 'rgba(219, 50, 51, 0.3)'
|
|
}, {
|
|
offset: 0.8,
|
|
color: 'rgba(219, 50, 51, 0)'
|
|
}], false),
|
|
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
shadowBlur: 10
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgb(219,50,51)'
|
|
}
|
|
},
|
|
data: dayarr
|
|
}]
|
|
};
|
|
myChart.setOption(option);
|
|
}
|
|
</script>
|
|
<!-- <script type="text/javascript" src="indexScenicTop3.js"></script> -->
|
|
</body>
|
|
</html>
|
|
|