基于Echarts+HTML5可视化数据大屏展示-旅游智慧中心

java水泥工2025-09-07 1:39

效果展示：

代码结构：

主要代码实现

index.html布局

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 &quot;Microsoft YaHei&quot;; 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>

作品来自于网络收集、侵权立删

相关推荐
Fabarta技术团队12 小时前
分析流程自动优化！Fabarta个人专属智能体「数据分析」新功能介绍
数据挖掘·数据分析
用户Taobaoapi201412 小时前
京东商品列表API（JD.item_search）
大数据·数据挖掘·数据分析
用户Taobaoapi201413 小时前
京东商品评论API开发指南
大数据·数据挖掘·数据分析
liliangcsdn13 小时前
结合prompt分析NodeRAG的build过程
java·服务器·人工智能·数据分析·知识图谱
数据智研13 小时前
【数据分享】上市公司数字化转型相关词频统计数据（2000-2024）
大数据·数据分析
云天徽上1 天前
【数据可视化-106】华为2025上半年财报分析：用Python和Pyecharts打造炫酷可视化大屏
开发语言·python·华为·信息可视化·数据分析·pyecharts
桐果云1 天前
解锁桐果云零代码数据平台能力矩阵——赋能零售行业数字化转型新动能
大数据·人工智能·矩阵·数据挖掘·数据分析·零售
CC数分1 天前
组长跟我说，她招人看重的是数据分析能力
学习·数据挖掘·数据分析·大学生·考证
偷心伊普西隆1 天前
Pandas DataFrame 指南
python·数据分析·pandas
热门推荐
012025 年高教社杯全国大学生数学建模竞赛C 题 NIPT 的时点选择与胎儿的异常判定 完整成品思路模型代码分享，全网首发高质量！！！022025年数学建模国赛C题超详细解题思路032025全国大学生数学建模C题保姆级思路模型（持续更新）：NIPT 的时点选择与胎儿的异常判定042025高教社杯国赛数学建模选题建议+初步分析052025国赛B题保姆级教程思路分析 碳化硅外延层厚度的确定06UV安装并设置国内源07奈飞工厂官网，国内Netflix影视在线看|中文网页电脑版入口08KGG转MP3工具|非KGM文件|解密音频09（E题｜AI 辅助智能体测）2025年高教杯全国大学生数学建模国赛解题思路|完整代码论文集合10不再让Windows更新！&Edge游戏助手卸载及关闭自动更新