根據國家旅遊局創建全域旅遊示範區文件內容，全域旅遊示範區驗收的四個基本標準爲：旅遊對當地經濟和就業的綜合貢獻達到一定水平、建立旅遊綜合管理和執法體系、廁所革命及其他公共服務建設成效明顯、建成旅遊數據中心。
隨着國內旅遊市場的高速發展和政府對於全域旅遊的高度重視，以及全民自駕遊、個性遊、熱點遊趨勢的增強，智慧旅遊數據分析中心的建設刻不容緩。
景區綜合管理服務平臺，統計景區內外客流數據，實時客流數據，客流總數，區域客流排名，新老客戶佔比，遊客停留時長，各時段客流人數，歷史客流等數據，並以圖表的形式直觀展示。監測人員可以實時查看對應監測點的實時客流數量，通過對全景區重點客流監測區域的實時監測和預警處理，提高預警處置能力。
項目截圖
項目在線演示地址 http://yuanbaoshuju.com/preview.html
部分頁面代碼
<!doctype html>
<meta charset="utf-8">
<title>景區圈一站式管理平臺</title>
<link href="css/comon0.css" rel="stylesheet" type="text/css"/>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
<script src="js/jquery.min.js" charset="utf-8"></script>
<script src="js/jquery.limarquee.js" type="text/javascript"></script>
<script src="js/echarts-new.min.js" charset="utf-8"></script>
<script src="js/china.js"></script>
<script src="js/fujian.js"></script>
<script src="js/config.js" charset="utf-8"></script>
<script src="js/index.js" charset="utf-8"></script>
<body>
<div class="wpbox">
<div class="bnt">
<div class="topbnt_left fl">
<ul>
<li class="active"><a href="home.html">綜合分析</a></li>
<li><a href="public.html">輿情分析</a></li>
<li><a href="statistics.html">遊客統計</a></li>
</ul>
</div>
<h1 class="tith1 fl">景區圈一站式綜合服務管理平臺</h1>
<div class=" topbnt_right">
<ul>
<li><a href="scenic.html">景區管理</a></li>
<li><a href="traffic.html">交通分析</a></li>
<span class="newDate"></span>
</ul>
</ul>
</div>
</div>
<!-- bnt end -->
<div class="left1">
<div class="aleftboxttop">
<h2 class="tith2">遊客數量統計</h2>
<div class="lefttoday_number">
<div class="widget-inline-box text-center fl">
<p>當前遊客</p>
<h3 class="ceeb1fd">54121</h3>
<h4 class="text-muted pt6">環比<img src="img/iconup.png" height="16"/>2%</h4>
</div>
<div class="widget-inline-box text-center fl">
<p>昨日遊客</p>
<h3 class="c24c9ff">124545</h3>
<h4 class="text-muted pt6">環比<img src="img/icondown.png" height="16"/>3%</h4>
</div>
<div class="widget-inline-box text-center fl">
<p>今日營業額</p>
<h3 class="cffff00">845151</h3>
<h4 class="text-muted pt6">環比<img src="img/iconup.png" height="16"/>3%</h4>
</div>
<div class="widget-inline-box text-center fl">
<p>昨日營業額</p>
<h3 class="c11e2dd">601541</h3>
<h4 class="text-muted pt6">環比<img src="img/icondown.png" height="16"/>3%</h4>
</div>
</div>
<!-- lefttoday_number end -->
</div>
<div class="aleftboxtmidd">
<h2 class="tith2">票務渠道統計</h2>
<div id="aleftboxtmidd" class="aleftboxtmiddcont"></div>
</div>
<div class="aleftboxtbott">
<h2 class="tith2">景點熱度排行</h2>
<div id="aleftboxtbott" class="aleftboxtbott_cont"></div>
</div>
</div>
<!-- left1 end -->
<div class="mrbox">
<div class="mrbox_topmidd" style="width: 60%;">
<div class="amiddboxttop">
<h2 class="tith2 ">實時客源統計</h2>
<div class="amiddboxttop_map" style="">
<iframe src="map.html" frameborder="0" scrolling="no"
style="width: 100%;height: 100%;"></iframe>
</div>
</div>
<!-- amiddboxttop end-->
<div class="amidd_bott">
<div class="amiddboxtbott1 fl">
<h2 class="tith2 ">遊客熱力分佈</h2>
<div id="amiddboxtbott1" class="amiddboxtbott1content"></div>
</div>
<div class="amiddboxtbott2 fl">
<h2 class="tith2 ">年度客流統計</h2>
<div id="amiddboxtbott2" class="amiddboxtbott2content"></div>
</div>
</div>
<!-- amidd_bott end -->
</div>
<!-- mrbox_top end -->
<div class="mrbox_top_right">
<div class="arightboxtop">
<h2 class="tith2">景區圈輿情監測系統</h2>
<div class="lefttoday_tit">
<p class="fl">今日最新輿情</p>
<p class="fr">時間段：2018-06-10</p>
</div>
<div class="left2_table wrap">
<ul>
<li>
<h3>央視一套官方微博--微博</h3>
<p class="fl jqfl">
《航拍中國》第二季視頻：#江山如此多嬌#【這裏似乎有這個星球最初的慢和從容】在武夷山，能看九曲溪的十八彎，能見玉女峯，能品上好的茶葉。武夷山桐木村早在宋代已經種植茶樹，這裏出產的紅茶“<b
style="color:#14FF00;">正山小種</b>”據考證是世界紅茶的起源。200年前，武夷山下梅村是閩北最大的茶葉交易市場。每到產茶季節，當溪上日行竹筏300艘，轉運不絕。戳視頻，看航拍中的武夷山
</p>
</p>
<p class="fr pt17">2018-06-22</p>
</li>
<li class="bg">
<h3>福建環境--微博</h3>
<p class="fl">
#高素質高顏值福建#
【八閩生態環境協奏曲——<b
style="color:#14FF00;">武夷山</b>深處的大氣環境“耳目”】在武夷山國家自然保護區深處，有一座叫摩天嶺的山峯，在海拔1139米的山頂上佇立着一座國家背景環境空氣質量監測站——福建武夷山站。
</p>
<p class="fr pt17">2018-06-22</p>
</li>
<li>
<h3>黃師傅的悅生活--微博</h3>
<p class="fl">
《印象大紅袍》可能因爲是張藝謀和王潮歌導演早期的作品，<b
style="color: #ef3832;">故事性一般</b>，沒有細說茶馬古道，而是講了幾段編出來的神話故事。亮點是360度旋轉舞臺，引得現場一陣陣驚呼。還是要感謝兩位的印象大紅袍，不然武夷山的夜晚還是挺無聊的。比之前看過的印象劉三姐好看一點點
</p>
<p class="fr pt17">2018-06-22</p>
</li>
<li class="bg">
<h3>武夷山環保局局長解釋水污染問題時<b style="color: #ef3832;">爆粗--人民日報</b></h3>
<p class="fl">
當官員向居民解釋環境問題但不被理解怎麼辦？福建武夷山市環保局局長情急之下爆粗口引發輿論關注。
5月5日，福建武夷山市網友“清霜師太”在微信朋友圈調侃武夷山官方微信公衆號發佈的崇陽溪水質監測數據，以及居民對環境的滿意度調查數據，隨後該市環保局局長王繼文在微信中針對相關問題向她進行了解釋。
</p>
<p class="fr pt17">2018-06-22</p>
</li>
<li>
<h3>天價武夷山岩茶市場水多深--環球健康</h3>
<p class="fl">
近幾年來，武夷山的巖茶，風頭很足，簡單的一盒茶葉，動輒就是所謂大師手工製作，著名坑口的原料，每斤上萬元、十幾萬元甚至幾十萬元。很多消費者都在發出疑問，這些充滿傳說、故事連篇的天價巖茶，真的值那麼多錢嗎？<b
style="color: #ef3832;">315</b>在行動的記者走進了武夷山茶區進行了調查。
</p>
<p class="fr pt17">2018-06-22</p>
</li>
<li class="bg">
<h3>福建武夷山客流平穩有序 茶體驗遊成亮點--央視網</h3>
<p class="fl">
央視網消息：昨天，福建武夷山<b
style="color:#14FF00;">客流</b>平穩有序。雖然自駕遊、休閒度假遊依然是主要的旅遊方式，但研學遊、茶體驗遊等新業態旅遊方式也備受遊客青睞。
</p>
<p class="fr pt17">2018-06-22</p>
</li>
<li>
<h3>多名“賣茶女”被抓，還都說自己來自<b style="color:#14FF00;">武夷山</b>--微信公衆號</h3>
<p class="fl">
網絡的發展令人們的社交方式正在悄悄發生改變，各種類型的即時聊天工具也成爲了人們網絡生活中不可缺少的一部分。然而，在流量龐大的各種社交聊天軟件當中，也有不少不法分子動起了歪腦筋，在虛擬的網絡背後，你永遠不知道和你隔着屏幕聊天的那個人，究竟是何方的妖魔鬼怪
</p>
<p class="fr pt17">2018-06-22</p>
</li>
<li class="bg">
<h3>武夷山<b style="color: #ef3832;">天價</b>麝香肉 餐館有意宰客結賬竟要48元一兩</h3>
<p class="fl">
繼三亞天價扇貝後，福建被爆料稱武夷山驚現天價麝香肉，點菜時口頭告知本是“48元一份”的麝香肉，結賬時卻變成“48元一兩”，中間差價如此大，不得不讓人吃驚！
</p>
<p class="fr pt17">2018-06-22</p>
</li>
</ul>
</div>
</div>
<div class="arightboxbott">
<h2 class="tith2 ">停車場車輛實時數據</h2>
<div id="arightboxbott" class="arightboxbottcont" style=""></div>
</div>
</div>
<!-- mrbox_top_right end -->
</div>
</div>
</div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('aleftboxtmidd'));
option = {
tooltip: {
trigger: 'item',
formatter: "{b} : {d}%"
},
legend: {
right: 10,
top: 30,
height: 140,
itemWidth: 10,
itemHeight: 10,
itemGap: 10,
textStyle: {
color: 'rgba(255,255,255,.6)',
fontSize: 12
},
orient: 'vertical',
data: ['窗口購票', '官網購票', '線上分銷', '團體票', 'OTA渠道']
},
calculable: true,
series: [
{
name: ' ',
color: ['#ff4343', '#f69846', '#f6d54a', '#45dbf7', '#5045f6', '#4777f5', '#ad46f3', '#44aff0'],
type: 'pie',
radius: [30, 100],
center: ['40%', '50%'],
roseType: 'radius',
label: {
normal: {
show: false,
position: 'inside'
},
emphasis: {
show: true
},
},
lableLine: {
normal: {
show: false
},
emphasis: {
show: true
}
},
data: [
{value: 10, name: '窗口購票'},
{value: 15, name: '官網購票'},
{value: 25, name: '線上分銷'},
{value: 30, name: '團體票'},
{value: 30, name: 'OTA渠道'}
]
},
]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('aleftboxtbott'));
option = {
tooltip: {
show: true
},
color: ['#7ecef4'],
// backgroundColor: 'rgba(1,202,217,.2)',
grid: {
left: 20,
right: 20,
top: 13,
bottom: 6,
containLabel: true
},
xAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.2)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0)'
}
},
axisLabel: {
show: true,
color: "rgba(255,255,255,0)"
},
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.5)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,.1)'
}
},
axisLabel: {
color: "rgba(255,255,255,.5)",
show: true
},
data: ['四面佛', '九仙山', '澳角村', '銅山古城', '蘇峯山', '南門灣', '東門嶼', '馬鑾灣', '風動石', '尖峯山']
// data: ['宋街', '水簾洞', '玉女峯', '大王峯', '武夷宮', '青龍大瀑布', '印象大紅袍', '虎嘯巖', '天遊峯', '武夷山九曲溪']
},
series: [
{
name: '景點客流量',
type: 'bar',
barWidth: 20,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
1, 0, 0, 1,
[
{offset: 0, color: 'rgba(75,240,255,0.7)'},
{offset: 1, color: 'rgba(3,42,114,0.7)'}
]
)
}
},
label: {
normal: {
formatter: '{c}',
position: 'insideRight',
show: true,
color: '#fff',
}
},
data: [12154, 15454, 18203, 18789, 23489, 29034, 30124, 35145, 38415, 25112]
}]
};
myChart.setOption(option);
aniScenic(myChart);
</script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('amiddboxtbott1'));
option = {
tooltip: {
trigger: 'item',
formatter: '{c} (人)'
},
visualMap: {
// itemHeight: 0,
min: 800,
max: 60000,
// text: ['High', 'Low5'],
realtime: false,
show: true,
calculable: true,
left: "20",
textStyle: {
color: "white"
},
inRange: {
color: ['aqua', 'lime', 'yellow', 'orange', '#ff3333']
}
},
series: [
{
x: '170',
name: '景區熱力分佈圖',
type: 'map',
mapType: '福建', // 自定義擴展圖表類型
itemStyle: {
normal: {
label: {show: false}
},
emphasis: {label: {show: false}}
},
zoom: 1.2,
data: [
{name: '南平市', value: 1857},
{name: '寧德市', value: 15477},
{name: '福州市', value: 31681},
{name: '莆田市', value: 6926},
{name: '廈門市', value: 44045},
{name: '三明市', value: 40689},
{name: '龍巖市', value: 37659},
{name: '福州市', value: 45180},
{name: '泉州市', value: 55204},
{name: '漳州市', value: 21900},
]
}
]
};
myChart.setOption(option);
</script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('amiddboxtbott2'));
option = {
tooltip: {
show: true
},
// backgroundColor: 'rgba(1,202,217,.2)',
grid: {
left: 60,
right: 60,
top: 50,
bottom: 40
},
toolbox: {
// feature: {
// dataView: { show: true, readOnly: false },
// magicType: { show: true, type: ['line', 'bar'] },
// restore: { show: true },
// saveAsImage: { show: true }
// }
},
legend: {
top: 10,
textStyle: {
fontSize: 10,
color: 'rgba(255,255,255,.7)'
},
data: ['去年', '今年', '同比增速']
},
xAxis: [
{
type: 'category',
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.2)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,.1)'
}
},
axisLabel: {
color: "rgba(255,255,255,.7)"
},
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '',
min: 0,
max: 250,
interval: 50,
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.3)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,.01)'
}
},
axisLabel: {
formatter: '{value} 萬人'
}
},
{
type: 'value',
name: '',
max: 25,
interval: 5,
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.3)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,.1)'
}
}
}
],
series: [
{
name: '去年',
type: 'bar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#5045F6'},
{offset: 1, color: '#121b87'}
]
)
}
},
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name: '今年',
type: 'bar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#4BF0FF'},
{offset: 1, color: '#032a72'}
]
)
}
},
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name: '同比增速',
type: 'line',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#FFEA51'},
{offset: 1, color: '#FFEA51 '}
]
)
}
},
yAxisIndex: 1,
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
};
myChart.setOption(option);
</script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('arightboxbott'));
option = {
color: ['#4BF0FF'],
// backgroundColor: 'rgba(1,202,217,.2)',
grid: {
left: '5%',
right: '8%',
bottom: '7%',
top: '8%',
containLabel: true
},
toolbox: {
feature: {
// saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.2)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,.1)'
}
},
axisLabel: {
color: "rgba(255,255,255,.7)"
},
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.2)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,.1)'
}
},
axisLabel: {
color: "rgba(255,255,255,.7)"
},
},
series: [
{
name: '2014年',
type: 'line',
stack: '總量',
areaStyle: {normal: {}},
}
]
};
myChart.setOption(option);
aniPark(myChart);
</script>
<script>
var wrap = $(".wrap").html();
$(".wrap").html(wrap.replace(/武夷山/g, "東山"));
</script>
</body>
</html>
