基于Echarts+HTML5可视化数据大屏展示-旅游智慧中心 - 教程
效果展示：
代码结构：
主要代码实现
index.html布局
<!DOCTYPE html>
<html lang="en" style="font-size: 97.5px;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>云南全域智慧旅游智慧中心</title>
<link rel="stylesheet" href="./static/common.css">
<link rel="stylesheet" href="./static/style.css">
<style id="ai-assist-right-style">
html.ai-assist-html {
width: calc(100% - 480px)!important;
position: relative!important;
min-height: 100vh!important
}
.ai-assist-highlight {
background: yellow;
}
</style>
</head>
<body>
<div class="main_box">
<a href="https://gitee.com/iGaoWei/big-data-view">
<div class="header">
<div class="left">
<div class="date">2024-05-21 09:59:20</div>
<div class="week">星期五</div>
</div>
<div class="center">云南全域智慧旅游智慧中心</div>
<div class="right">
<p>关于正式上线“BigDataView模板全部免费”的公告</p>
</div>
</div>
</a>
<div class="content">
<div class="left">
<div class="inner_left">
<div class="item weather">
<div class="head_block">
<p class="level">气象环境：<span class="air_level"></span>
</p>
<p class="time">
<span class="updata_time"></span>更新
<a href="https://gitee.com/iGaoWei/big-data-view"><img class="refresh" src="./static/refresh.png" alt=""></a>
</p>
</div>
<div class="middle_block">
<div class="tem_wrap">
<span class="tem">22</span>
<sup>°</sup>
<sub class="wea">晴朗</sub>
</div>
<div class="win_wrap">风向<span class="win">东</span>
</div>
<div class="meter">风速 <span class="win_meter">20</span>
</div>
</div>
<div class="foot_block">
<div class="foot_item">
<p class="title">湿度</p>
<p class="humidity">适宜</p>
<p>湿润</p>
</div>
<div class="foot_item">
<p class="title">PM2.5</p>
<p class="air_pm25">80</p>
<p class="air_level">20</p>
</div>
<div class="foot_item">
<p class="title">负氧离子</p>
<p>3109/cm<sup>3</sup>
</p>
<p>1级</p>
</div>
<div class="foot_item">
<p class="title">噪声</p>
<p>56.6dB</p>
<p>较安静</p>
</div>
</div>
</div>
<div class="item tourists_flow chartWrap">
<div class="module_title">实时游客流量<span>单位：人</span>
</div>
<div class="inner_wrap chart_wrap" id="touristsFlowChart" _echarts_instance_="ec_1718934889437" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;">
<div style="position: relative; width: 397px; height: 162px; padding: 0px; margin: 0px; border-width: 0px;">
<canvas data-zr-dom-id="zr_0" width="397" height="162" style="position: absolute; left: 0px; top: 0px; width: 397px; height: 162px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
</div>
<div class=""></div>
</div>
</div>
<div class="item car_flow chartWrap">
<div class="module_title">实时车流量</div>
<div class="inner_wrap chart_wrap" id="carFlowChart" _echarts_instance_="ec_1718934889439" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;">
<div style="position: relative; width: 397px; height: 162px; padding: 0px; margin: 0px; border-width: 0px;">
<canvas data-zr-dom-id="zr_0" width="397" height="162" style="position: absolute; left: 0px; top: 0px; width: 397px; height: 162px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
</div>
<div class=""></div>
</div>
</div>
</div>
<div class="inner_right">
<div class="item satisfaction">
<div class="module_title">游客满意度</div>
<div class="inner_wrap">
</div>
</div>
<div class="item chartWrap totalPeopleNum">
<div class="module_title">实时游客流量<span class="num">28567人</span>
</div>
<div class="inner_wrap chart_wrap" id="totalPeopleChart" _echarts_instance_="ec_1718934889438" style="-webkit-tap-highlight-color: transparent; user-select: none;">
<div style="position: relative; width: 257px; height: 162px; padding: 0px; margin: 0px; border-width: 0px;">
<canvas data-zr-dom-id="zr_0" width="257" height="162" style="position: absolute; left: 0px; top: 0px; width: 257px; height: 162px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
</div>
</div>
</div>
<div class="item totalCarFlow">
<div class="module_title">今日累计车流量</div>
<div class="inner_wrap chart_wrap" id="totalCarFlow">
<div class="car_item">
<img src="./static/car.png" alt="">
<p>今日到访</p>
<p class="visiting num">333</p>
</div>
<div class="car_item back_wrap">
<img src="./static/car1.png" alt="">
<p>今日返程</p>
<p class="back num">303</p>
</div>
</div>
</div>
</div>
</div>
<div class="center">
<div class="item chartWrap">
<div class="module_title">旅游景区</div>
<div class="chart_wrap map_wrap" style="position: relative;">
<div class="map_box">
<img id="map" src="./static/map.jpg" alt="">
<div class="city city1 red">
<div class="dotted">858</div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
<div class="city city2 orange">
<div class="dotted">425</div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
<div class="city city3">
<div class="dotted">362</div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
<div class="city city4 orange">
<div class="dotted">245</div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
<div class="city city5">
<div class="dotted">88</div>
<div class="pulse1">10</div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
</div>
<div class="legend">
拥挤程度
<p class="colorBar"></p>
<p class="text">
<span>空闲</span>
<span>拥挤</span>
<span>爆满</span>
</p>
</div>
</div>
</div>
</div>
<div class="right">
<div class="item chartWrap">
<div class="module_title">停车场数据</div>
<div class="inner_wrap chart_wrap" id="carSpaceNum" _echarts_instance_="ec_1718934889440" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;">
<div style="position: relative; width: 345px; height: 267px; padding: 0px; margin: 0px; border-width: 0px;">
<canvas data-zr-dom-id="zr_0" width="345" height="267" style="position: absolute; left: 0px; top: 0px; width: 345px; height: 267px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
</div>
<div class=""></div>
</div>
</div>
<div class="item chartWrap">
<div class="module_title">游客消费占比</div>
<div class="inner_wrap chart_wrap" id="consumptionChart" _echarts_instance_="ec_1718934889441" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;">
<div style="position: relative; width: 345px; height: 267px; padding: 0px; margin: 0px; border-width: 0px;">
<canvas data-zr-dom-id="zr_0" width="345" height="267" style="position: absolute; left: 0px; top: 0px; width: 345px; height: 267px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
</div>
<div class=""></div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="left">
<div class="item chartWrap">
<div class="module_title">景区门票销量</div>
<div class="inner_wrap chart_wrap" id="ticketsChart" _echarts_instance_="ec_1718934889442" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;">
<div style="position: relative; width: 624px; height: 166px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
<canvas data-zr-dom-id="zr_0" width="624" height="166" style="position: absolute; left: 0px; top: 0px; width: 624px; height: 166px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
<div style="position: absolute !important; visibility: hidden !important; padding: 0px !important; margin: 0px !important; border-width: 0px !important; user-select: none !important; width: 0px !important; height: 0px !important; inset: 0px auto auto 0px !important;"></div>
<div style="position: absolute !important; visibility: hidden !important; padding: 0px !important; margin: 0px !important; border-width: 0px !important; user-select: none !important; width: 0px !important; height: 0px !important; inset: 0px 0px auto auto !important;"></div>
<div style="position: absolute !important; visibility: hidden !important; padding: 0px !important; margin: 0px !important; border-width: 0px !important; user-select: none !important; width: 0px !important; height: 0px !important; inset: auto auto 0px 0px !important;"></div>
<div style="position: absolute !important; visibility: hidden !important; padding: 0px !important; margin: 0px !important; border-width: 0px !important; user-select: none !important; width: 0px !important; height: 0px !important; inset: auto 0px 0px auto !important;"></div>
</div>
<div class="" style="position: absolute; display: block; border-style: solid; white-space: nowrap; z-index: 9999999; box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 10px; background-color: rgb(255, 255, 255); border-width: 1px; border-radius: 4px; color: rgb(102, 102, 102); font: 14px / 21px "Microsoft YaHei"; padding: 10px; left: 380px; top: 23px; border-color: rgb(111, 125, 227); pointer-events: none; visibility: hidden; opacity: 0;">
<div style="margin: 0px 0 0;line-height:1;">
<div style="font-size:14px;color:#666;font-weight:400;line-height:1;">销售额</div>
<div style="margin: 10px 0 0;line-height:1;">
<div style="margin: 0px 0 0;line-height:1;">
<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#6f7de3;"></span>
<span style="font-size:14px;color:#666;font-weight:400;margin-left:2px">15时</span>
<span style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900">719</span>
<div style="clear:both"></div>
</div>
<div style="clear:both"></div>
</div>
<div style="clear:both"></div>
</div>
</div>
</div>
</div>
</div>
<div class="center">
<div class="item tourists chartWrap">
<div class="module_title">游客趋势分析 <span>游客人数：人</span>
</div>
<div class="chart_wrap">
<ul class="table_head">
<li>
<span></span>
<span>斑竹山</span>
<span>孽龙洞景区</span>
<span>泉之源</span>
<span>赤山幕冲生态</span>
<span>杨岐山普通寺</span>
</li>
</ul>
<ul class="table_body">
<li class="tr_item">
<span>昨日</span>
<span>1246</span>
<span>2246</span>
<span>2146</span>
<span>2246</span>
<span>2460</span>
</li>
<li class="tr_item">
<span>今日</span>
<span>246</span>
<span>246</span>
<span>246</span>
<span>246</span>
<span>246</span>
</li>
<li class="tr_item">
<span>最近7日</span>
<span>246</span>
<span>246</span>
<span>246</span>
<span>246</span>
<span>246</span>
</li>
<li class="tr_item">
<span>最近30日</span>
<span>更多模板</span>
<span>关注</span>
<span>公众号</span>
<span>DreamCoders</span>
<span>免费获取</span>
</li>
</ul>
</div>
</div>
</div>
<div class="right">
<div class="item chartWrap">
<div class="module_title">12301呼叫</div>
<div class="inner_wrap chart_wrap" id="helpCellChart" _echarts_instance_="ec_1718934889443" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;">
<div style="position: relative; width: 531px; height: 166px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
<canvas data-zr-dom-id="zr_0" width="531" height="166" style="position: absolute; left: 0px; top: 0px; width: 531px; height: 166px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
<canvas data-zr-dom-id="zr_1" width="531" height="166" style="position: absolute; left: 0px; top: 0px; width: 531px; height: 166px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
<canvas data-zr-dom-id="zr_3" width="531" height="166" style="position: absolute; left: 0px; top: 0px; width: 531px; height: 166px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
</div>
<div class=""></div>
</div>
</div>
</div>
</div>
</div>
<script src="./static/rem.js"></script>
<script src="./static/jquery.js"></script>
<script src="./static/date.js"></script>
<script src="./static/weather.js"></script>
<script src="./static/satisfaction.js"></script>
<script src="./static/setData.js"></script>
<script src="./static/echarts.min.js"></script>
<script src="./static/chart.js"></script>
<script src="./static/index.js">
</script>
</body>
</html>作品来自于网络收集、侵权立删
浙公网安备 33010602011771号