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.
688 lines
28 KiB
688 lines
28 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
|
<link type="text/css" rel="stylesheet" href="css/cjy_style2.css"/>
|
|
<!--衡水旅游大数据-->
|
|
<link type="text/css" rel="stylesheet" href="css/hs_data.css"/>
|
|
<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="/" class="nav_home"><i
|
|
class="nav_icon icon_zhuye"></i>主页</a></div>
|
|
<div class="zuoce cbp-spmenu-left" id="cbp-spmenu-s1"><a href="#"><i class="nav_icon icon_zhuye"></i>首页</a> <a
|
|
href="#"><i class="nav_icon kljc_icon"></i>客流量监测</a> <a href="#"><i class="nav_icon tous_icon"></i>旅游投诉分析</a>
|
|
<a href="#"><i class="nav_icon eav_icon"></i>网络评价分析</a> <a href="#" class="on"><i class="nav_icon basic_icon"></i>旅游基础资源</a>
|
|
<a href="#"><i class="nav_icon video_icon"></i>视频监控管理</a> <a href="#"><i class="nav_icon yjzh_icon"></i>视频监控管理</a>
|
|
</div>
|
|
<!--左侧----->
|
|
<div class="index_left left">
|
|
<div class="left_top_big">
|
|
<!--游客属性-->
|
|
<div class="w320_hs" style="margin-left: 0">
|
|
<h3 class="box_bt">游客属性</h3>
|
|
<div class="box_top_s"></div>
|
|
<div class="box_center_s">
|
|
<div class="con">
|
|
<!--年龄分布-->
|
|
<h3 class="hsyk_tit"> 年龄分布 </h3>
|
|
<div class="hs_agefb" style="height: 200px; "><img src="img_hs/img_yknl.png"></div>
|
|
<!--性别比例-->
|
|
<h3 class="hsyk_tit">性别比例</h3>
|
|
<div class="sex_box">
|
|
<!--男女图标展示-->
|
|
<div class="hs_sex">
|
|
<div class="sex_half"><img src="img_hs/sex_nan.png">
|
|
<h5>男性 <span>56.23%</span></h5>
|
|
</div>
|
|
<div class="sex_half"><img src="img_hs/sex_nv.png">
|
|
<h5>女性 <span>26.09%</span></h5>
|
|
</div>
|
|
</div>
|
|
<!--男女比例进度条-->
|
|
<div class="scale_bar">
|
|
<!--取男性比例值-->
|
|
<div class="get_nan" style="width: 56.9%;"></div>
|
|
</div>
|
|
<!--总人数-->
|
|
<p class="scale_whole">总人数：32322万</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="box_bottom_s"></div>
|
|
</div>
|
|
<!--热力图-->
|
|
<div class="rel_warp">
|
|
<div class="rel_img"><img src="img_hs/rlt.png"></div>
|
|
<div class="rel_klnum">
|
|
<div>
|
|
<div class="tjsl">
|
|
<p class="tjbt">实时客流量(<span id="num1-span" class="tjbt">0</span>个景区)</p>
|
|
<div class="gdsz" style="width:200px;">
|
|
<div class="shuzi">
|
|
<div class="numberRun1" id="numberRun1"></div>
|
|
</div>
|
|
<p class="szdw">人次</p>
|
|
<div class="mb_left"></div>
|
|
<div class="mb_right"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="padding-top:100px;">
|
|
|
|
|
|
<div>
|
|
<div class="tjsl">
|
|
<p class="tjbt">当月客流量(<span id="num2-span" class="tjbt">0</span>个景区)</p>
|
|
<div class="gdsz" style="width:250px;">
|
|
<div class="shuzi">
|
|
<div id="numberRun2"></div>
|
|
</div>
|
|
<p class="szdw">人次</p>
|
|
<div class="mb_left"></div>
|
|
<div class="mb_right"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="tjsl">
|
|
<p class="tjbt">当年客流量(<span id="num3-span" class="tjbt">0</span>个景区)</p>
|
|
<div class="gdsz" style="width:250px;">
|
|
<div class="shuzi">
|
|
<div id="numberRun3"></div>
|
|
</div>
|
|
<p class="szdw">人次</p>
|
|
<div class="mb_left"></div>
|
|
<div class="mb_right"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!--右侧----->
|
|
<div class="index_right right">
|
|
<div class="w320_hs">
|
|
<h3 class="box_bt" id="visitor-prefer-h3">游客偏好景区</h3>
|
|
<div class="box_top_s"></div>
|
|
<div class="box_center_s" style=" height:560px;">
|
|
<div class="con">
|
|
|
|
<!--景区Top10-->
|
|
<h3 class="hsyk_tit"> 景区Top10 </h3>
|
|
<div class="ykph_box" id="visitor-prefer-div">
|
|
<!--每个条目-->
|
|
<div class="entry_one"><span class="eny_num">1</span>
|
|
<div class="eny_inf">
|
|
<h3>衡水湖衡水湖衡水湖衡水湖衡水湖衡水湖衡水湖衡水湖衡水湖衡水湖衡水湖衡水湖衡水湖衡水湖衡水湖衡水湖</h3>
|
|
<div class="inf_item">
|
|
<div class="inf_strip" style="width: 98%"></div>
|
|
</div>
|
|
</div>
|
|
<h6 class="eny_figure">212,235,2</h6>
|
|
</div>
|
|
<!--每个条目-->
|
|
<div class="entry_one"><span class="eny_num">2</span>
|
|
<div class="eny_inf">
|
|
<h3>衡水湖</h3>
|
|
<div class="inf_item">
|
|
<div class="inf_strip" style="width: 90%"></div>
|
|
</div>
|
|
</div>
|
|
<h6 class="eny_figure">2122</h6>
|
|
</div>
|
|
<div class="entry_one"><span class="eny_num">3</span>
|
|
<div class="eny_inf">
|
|
<h3>衡水湖</h3>
|
|
<div class="inf_item">
|
|
<div class="inf_strip" style="width: 82%"></div>
|
|
</div>
|
|
</div>
|
|
<h6 class="eny_figure">2122</h6>
|
|
</div>
|
|
<div class="entry_one"><span class="eny_num">4</span>
|
|
<div class="eny_inf">
|
|
<h3>衡水湖</h3>
|
|
<div class="inf_item">
|
|
<div class="inf_strip" style="width: 76%"></div>
|
|
</div>
|
|
</div>
|
|
<h6 class="eny_figure">2122</h6>
|
|
</div>
|
|
<div class="entry_one"><span class="eny_num">5</span>
|
|
<div class="eny_inf">
|
|
<h3>衡水湖</h3>
|
|
<div class="inf_item">
|
|
<div class="inf_strip" style="width: 68%"></div>
|
|
</div>
|
|
</div>
|
|
<h6 class="eny_figure">2122</h6>
|
|
</div>
|
|
<div class="entry_one"><span class="eny_num">6</span>
|
|
<div class="eny_inf">
|
|
<h3>衡水湖</h3>
|
|
<div class="inf_item">
|
|
<div class="inf_strip" style="width: 50%"></div>
|
|
</div>
|
|
</div>
|
|
<h6 class="eny_figure">2122</h6>
|
|
</div>
|
|
<div class="entry_one"><span class="eny_num">7</span>
|
|
<div class="eny_inf">
|
|
<h3>衡水湖</h3>
|
|
<div class="inf_item">
|
|
<div class="inf_strip" style="width: 32%"></div>
|
|
</div>
|
|
</div>
|
|
<h6 class="eny_figure">2122</h6>
|
|
</div>
|
|
<div class="entry_one"><span class="eny_num">8</span>
|
|
<div class="eny_inf">
|
|
<h3>衡水湖</h3>
|
|
<div class="inf_item">
|
|
<div class="inf_strip" style="width: 18%"></div>
|
|
</div>
|
|
</div>
|
|
<h6 class="eny_figure">2122</h6>
|
|
</div>
|
|
<div class="entry_one"><span class="eny_num">9</span>
|
|
<div class="eny_inf">
|
|
<h3>衡水湖</h3>
|
|
<div class="inf_item">
|
|
<div class="inf_strip" style="width: 12%"></div>
|
|
</div>
|
|
</div>
|
|
<h6 class="eny_figure">2122</h6>
|
|
</div>
|
|
<div class="entry_one"><span class="eny_num">10</span>
|
|
<div class="eny_inf">
|
|
<h3>衡水湖</h3>
|
|
<div class="inf_item">
|
|
<div class="inf_strip" style="width: 8%"></div>
|
|
</div>
|
|
</div>
|
|
<h6 class="eny_figure">2122</h6>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
<div class="box_bottom_s"></div>
|
|
</div>
|
|
</div>
|
|
<div class="bot_layout">
|
|
<!--消费量-->
|
|
<div class="left w452_hs">
|
|
<h3 class="box_bt" id="visitor_in_area_latest-h3">外省游客在衡水市消费</h3>
|
|
<div class="box_top_s"></div>
|
|
<div class="box_center_s">
|
|
<div class="con">
|
|
<div id="visitor_in_area_latest-div" class="hs_xflev" style="height:218px;"><img
|
|
src="img_hs/img_xfl.png"></div>
|
|
</div>
|
|
</div>
|
|
<div class="box_bottom_s"></div>
|
|
</div>
|
|
|
|
<!--消费水平-->
|
|
<div class="w452_hs left">
|
|
<h3 class="box_bt" id="visitor_in_area-h3">外省游客在衡水市消费分析Top5</h3>
|
|
<div class="box_top_s"></div>
|
|
<div class="box_center_s">
|
|
<div class="con">
|
|
<div class="hs_xflev pay_1" style="height:218px;">
|
|
<!--TOP5-->
|
|
<img src="img_hs/pay_1.png" class="pay_1_img"/>
|
|
<div class="pay_1_lst">
|
|
<ul id="visitor_in_area-ul">
|
|
<li><h3>121245万元</h3>
|
|
<p>衡水市</p></li>
|
|
<li><h3>121245万元</h3>
|
|
<p>衡水市</p></li>
|
|
<li><h3>121245万元</h3>
|
|
<p>衡水市</p></li>
|
|
<li><h3>121245万元</h3>
|
|
<p>衡水市</p></li>
|
|
<li><h3>121245万元</h3>
|
|
<p>衡水市</p></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="box_bottom_s"></div>
|
|
</div>
|
|
<!--消费省份-->
|
|
<div class="w452_hs left">
|
|
<h3 class="box_bt" id="citizen_out_area-h3">衡水市居民出衡水市消费分析Top5</h3>
|
|
<div class="box_top_s"></div>
|
|
<div class="box_center_s">
|
|
<div class="con">
|
|
<div class="hs_xflev pay_2" style="height:218px;">
|
|
<!--TOP5-->
|
|
<img src="img_hs/pay_2.png" class="pay_2_img"/>
|
|
<div class="pay_2_lst">
|
|
<ul id="citizen_out_area-ul">
|
|
<li>衡水市<span>121245万元</span></li>
|
|
<li>衡水衡水市市<span>121245万元</span></li>
|
|
<li>衡水衡市<span>121245万元</span></li>
|
|
<li>衡水市<span>121245万元</span></li>
|
|
<li>衡水市<span>121245万元</span></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="box_bottom_s"></div>
|
|
</div>
|
|
<!-- 外省游客在衡水市平均消费 -->
|
|
<div class="w452_hs left">
|
|
<h3 class="box_bt" id="visitor_in_area_hotel-h3">外省游客在衡水市平均消费</h3>
|
|
<div class="box_top_s"></div>
|
|
<div class="box_center_s">
|
|
<div class="con">
|
|
<div class="hs_xflev pay_province" style="height:218px;">
|
|
<!--TOP5-->
|
|
<div class="ykph_box " id="visitor_in_area_hotel-div">
|
|
<!--每个条目-->
|
|
<div class="entry_one"><span class="eny_num">1</span>
|
|
<div class="pay_adr">河北省</div>
|
|
<h6 class="eny_figure">2,235,2万元</h6>
|
|
</div>
|
|
<div class="entry_one"><span class="eny_num">2</span>
|
|
<div class="pay_adr">河北省</div>
|
|
<h6 class="eny_figure">212,235,2</h6>
|
|
</div>
|
|
<div class="entry_one"><span class="eny_num">3</span>
|
|
<div class="pay_adr">河北省</div>
|
|
<h6 class="eny_figure">212,235,2</h6>
|
|
</div>
|
|
|
|
<div class="entry_one"><span class="eny_num">4</span>
|
|
<div class="pay_adr">河北省</div>
|
|
<h6 class="eny_figure">212,235,2</h6>
|
|
</div>
|
|
<div class="entry_one"><span class="eny_num">5</span>
|
|
<div class="pay_adr">河北省</div>
|
|
<h6 class="eny_figure">212,235,2</h6>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="box_bottom_s"></div>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<!--数字滚动-->
|
|
<script src="js/jquery.min.js"></script>
|
|
<script type="text/javascript" src="js/numberRun.js"></script>
|
|
|
|
<!--左侧滑动菜单-->
|
|
<script src="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>
|
|
|
|
<!-- echarts -->
|
|
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
|
|
<script type="text/javascript"
|
|
src="/js/common/cjy_common.js"
|
|
></script>
|
|
<script type="text/javascript">
|
|
|
|
|
|
/**
|
|
*
|
|
* @param domId element dom 的 id
|
|
* @param prefixStr 例如 2019年 或 2019年10月 或 实时 等等(结尾字符串)
|
|
*/
|
|
function renderChartTitle(domId, prefixStr) {
|
|
var dom = $('#' + domId);
|
|
dom.text(dom.text() + '(' + prefixStr + ')');
|
|
}
|
|
|
|
/**
|
|
* 游客偏好景区(实时?)
|
|
* domId: visitor-prefer-div
|
|
* @param date {Date}
|
|
*/
|
|
function renderPassengerPrefer(date) {
|
|
var jqDom = $('#visitor-prefer-div');
|
|
renderChartTitle('visitor-prefer-h3', '实时');
|
|
$.get("/kllstat/getKllScenicZd.do", function (resp) {
|
|
/**
|
|
* <div class="entry_one"><span class="eny_num">1</span>
|
|
<div class="eny_inf">
|
|
<h3>衡水湖衡水湖衡水湖衡水湖衡水湖衡水湖衡水湖衡水湖衡水湖衡水湖衡水湖衡水湖衡水湖衡水湖衡水湖衡水湖</h3>
|
|
<div class="inf_item">
|
|
<div class="inf_strip" style="width: 98%"></div>
|
|
</div>
|
|
</div>
|
|
<h6 class="eny_figure">212,235,2</h6>
|
|
</div>
|
|
* */
|
|
var text = "";
|
|
resp = JSON.parse(resp);
|
|
if (resp != null && resp.length > 0) {
|
|
|
|
var totalNum = 0;
|
|
for (var i = 0; i < resp.length; i++) {
|
|
totalNum += resp[i].sumpeo; //计算总人数..
|
|
}
|
|
|
|
|
|
for (i = 0; i < resp.length; i++) {
|
|
var scenicName = resp[i].scenicname; //景区名
|
|
var peopleNum = resp[i].sumpeo; //客流量
|
|
|
|
text += '<div class="entry_one"><span class="eny_num">' + (i + 1) + '</span>' +
|
|
' <div class="eny_inf">' +
|
|
' <h3>' + scenicName + '</h3>' +
|
|
' <div class="inf_item">' +
|
|
' <div class="inf_strip" style="width: ' + (peopleNum / totalNum).toFixed(2) * 100 +
|
|
'%"></div>' +
|
|
' </div>' +
|
|
' </div>' +
|
|
' <h6 class="eny_figure">' + peopleNum + '</h6>' +
|
|
' </div>'
|
|
}
|
|
jqDom.html(text);
|
|
}
|
|
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 景区全部客流量(当前实时)
|
|
* url 接口 /indexaccuse/selectGuestCount.do
|
|
* @param date {Date}
|
|
*/
|
|
function renderPassengerFlow(date) {
|
|
$.get('/indexaccuse/selectGuestCount.do', function (resp) {
|
|
|
|
if (resp != null && resp.IndexGuestCount != null) {
|
|
var data = resp.IndexGuestCount[0];
|
|
var realTime = data.intime_count;
|
|
var dayCount = data.day_count;
|
|
var monthCount = data.monthcount;
|
|
var yearCount = data.year_count;
|
|
if (dayCount <= 0) {
|
|
dayCount = realTime + 200;
|
|
}
|
|
|
|
// 景区数量
|
|
var realTimeScenicCount = data.intime_count_total;
|
|
var dayScenicCount = data.day_count_total;
|
|
var monthScenicCount = data.monthcount_total;
|
|
var yearScenicCount = data.year_count_total;
|
|
$('#num1-span').text(realTimeScenicCount);
|
|
$('#num2-span').text(monthScenicCount);
|
|
$('#num3-span').text(yearScenicCount);
|
|
|
|
var numRealTime = $("#numberRun1");
|
|
|
|
var numMonth = $('#numberRun2');
|
|
var numYear = $('#numberRun3');
|
|
numRealTime.numberAnimate({
|
|
num: realTime,
|
|
speed: 2000
|
|
});
|
|
numMonth.numberAnimate({
|
|
num: monthCount,
|
|
speed: 2000
|
|
});
|
|
numYear.numberAnimate({
|
|
num: yearCount,
|
|
speed: 2000
|
|
});
|
|
|
|
}
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 外省游客在本地消费 Top5 (当前年)<br/>
|
|
* url:/statistic/consume/visitor_in_area?time=2019
|
|
* @param date {Date}
|
|
*/
|
|
function renderVisitorInArea(date) {
|
|
var year = date.getFullYear() + '年';
|
|
renderChartTitle('visitor_in_area-h3', '近12个月');
|
|
$.get('/statistic/consume/visitor_in_area', {
|
|
'start': getIntervalMonthStr(date),
|
|
'end': dateFtt('yyyyMM', date),
|
|
'type': 'top'
|
|
}, function (resp) {
|
|
if (resp != null && resp.data != null && resp.data.length > 0) {
|
|
var list = resp.data;
|
|
// dom 操作
|
|
var dom = $('#visitor_in_area-ul');
|
|
var html = '';
|
|
var length = list.length <= 5 ? list.length : 5;
|
|
for (var i = 0; i < length; i++) {
|
|
var it = list[i];
|
|
/*
|
|
<li><h3>121245万元</h3><p>衡水市</p></li>
|
|
|
|
*/
|
|
html += '<li><h3>' +
|
|
(it.consume_amount / 10000).toFixed(2)
|
|
+ '万元</h3><p>' + (it.region_name || '未知') + '</p></li>';
|
|
}
|
|
dom.html(html)
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 本地居民外地消费 Top5 (当前年)<br/>
|
|
* url: /statistic/consume/citizen_out_area?time=2019
|
|
* @param date {Date}
|
|
*/
|
|
function renderCitizenOutArea(date) {
|
|
var year = date.getFullYear() + '年';
|
|
renderChartTitle('citizen_out_area-h3', '近12个月');
|
|
$.get("/statistic/consume/citizen_out_area", {
|
|
'start': getIntervalMonthStr(date),
|
|
'end': dateFtt('yyyyMM', date),
|
|
'type': 'top'
|
|
}, function (resp) {
|
|
if (resp != null && resp.data != null && resp.data.length > 0) {
|
|
var list = resp.data;
|
|
// dom 操作
|
|
var dom = $('#citizen_out_area-ul');
|
|
var html = '';
|
|
var length = list.length <= 5 ? list.length : 5;
|
|
for (var i = 0; i < length; i++) {
|
|
var it = list[i];
|
|
// <li>衡水市<span>121245万元</span></li>
|
|
html += '<li>' + it.des_name + '<span>' +
|
|
(it.consume_amount / 10000).toFixed(2)
|
|
+ '万元</span></li>';
|
|
}
|
|
dom.html(html)
|
|
}
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 外省游客在衡水市平均消费 (近12个月)
|
|
* @param date {Date}
|
|
*/
|
|
function renderConsumeHotel(date) {
|
|
var year = date.getFullYear() + '年';
|
|
renderChartTitle('visitor_in_area_hotel-h3', '近12个月');
|
|
$.get('/statistic/consume/visitor_in_area/average/top', {
|
|
start: getIntervalMonthStr(date),
|
|
end: dateFtt('yyyyMM', date),
|
|
type: 'top'
|
|
}, function (resp) {
|
|
if (resp != null) {
|
|
//var list = resp.data;
|
|
var list = resp;
|
|
var dom = $('#visitor_in_area_hotel-div');
|
|
var length = list.length <= 5 ? list.length : 5;
|
|
/*
|
|
<div class="entry_one"><span class="eny_num">1</span>
|
|
<div class="pay_adr">河北省</div>
|
|
<h6 class="eny_figure">2,235,2万元</h6>
|
|
</div>
|
|
*/
|
|
var html = '';
|
|
for (var i = 0; i < length; i++) {
|
|
var it = list[i];
|
|
html += '<div class="entry_one"><span class="eny_num">' + (i + 1) + '</span>' +
|
|
' <div class="pay_adr">' + it.region_name + '</div>' +
|
|
' <h6 class="eny_figure">' +
|
|
(it.avg / 10000).toFixed(2)
|
|
+ '万元</h6>' +
|
|
' </div>'
|
|
}
|
|
dom.html(html);
|
|
}
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 外省游客在衡水市消费 近 12个 月
|
|
* url: /statistic/consume/visitor_in_area?start=201805&end=201905 必须传 start,end！
|
|
* @param date {Date}
|
|
*/
|
|
function renderConsumeLatest(date) {
|
|
renderChartTitle('visitor_in_area_latest-h3', '近12个月');
|
|
var endMonth = dateFtt('yyyyMM', date);
|
|
var tempDate = new Date(date.getTime());
|
|
tempDate.setFullYear(tempDate.getFullYear() - 1);
|
|
tempDate.setMonth(tempDate.getMonth() + 1);
|
|
var startMonth = dateFtt('yyyyMM', tempDate);
|
|
$.get('/statistic/consume/visitor_in_area', {
|
|
'start': startMonth, 'end': endMonth, 'type': 'group'
|
|
}, function (resp) {
|
|
if (resp != null) {
|
|
var i;
|
|
var list = resp.data;
|
|
var ySeriesArr = [];
|
|
var x = getMonthArr("yyyy年MM月", endMonth, startMonth);//yyyy年
|
|
var map = {};
|
|
list = list || [];
|
|
for (i = 0; i < list.length; i++) {
|
|
var it = list[i];
|
|
map[it.format_time] = (it.month_total / 10000).toFixed(2);
|
|
}
|
|
for (i = 0; i < x.length; i++) {
|
|
ySeriesArr.push(map[x[i].replace(/[年|月]/g, '')] || 0)
|
|
}
|
|
|
|
var option = {
|
|
color: ['#3398DB'],
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: x,
|
|
axisTick: {
|
|
alignWithLabel: true
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#ddd', // 颜色
|
|
width: 1 // 粗细
|
|
}
|
|
},
|
|
axisLabel: {
|
|
fontSize: 10,
|
|
interval: 'auto'
|
|
}
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
name: '万元',
|
|
type: 'value',
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#ddd', // 颜色
|
|
width: 1 // 粗细
|
|
}
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
barMinHeight: 10,
|
|
name: '合计消费',
|
|
type: 'bar',
|
|
barWidth: '60%',
|
|
data: ySeriesArr,
|
|
tooltip: {
|
|
show: true,
|
|
trigger: 'item'
|
|
/* ,formatter: function (i, ticket) {
|
|
var num = eval(i.data);
|
|
if (num > 0) {
|
|
return '合计消费: ' + num + '万元';
|
|
}
|
|
return '合计消费: ' + 0;
|
|
}*/
|
|
}
|
|
}
|
|
]
|
|
};
|
|
var charts = document.getElementById('visitor_in_area_latest-div');
|
|
var myChart = echarts.init(charts);
|
|
myChart.setOption(option);
|
|
|
|
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
$(function () {
|
|
var date = new Date();
|
|
renderPassengerPrefer(date);
|
|
renderPassengerFlow(date);
|
|
renderVisitorInArea(date);
|
|
renderCitizenOutArea(date);
|
|
renderConsumeHotel(date);
|
|
renderConsumeLatest(date);
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|