菜单 搜索
首页 前端知识 基于Echarts HTML5可视化数据大屏展示-大数据智慧旅游城市中心

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

2024-09-06 00:09:39 前端知识 前端哥 550 540 我要收藏

博主主页：猫头鹰源码
博主简介：Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万+、专注Java技术领域和毕业设计项目实战，欢迎高校老师\讲师\同行交流合作
​主要内容：毕业设计(Javaweb项目|小程序|Python|HTML|数据可视化|SSM|SpringBoot|Vue|Jsp|PHP等)、简历模板、学习资料、面试题库、技术咨询、文档编写和辅导、论文降重、长期答辩答疑辅导、腾讯会议一对一专业讲解辅导答辩
☑️ 文末联系获取

👇🏻 精彩专栏推荐订阅👇🏻 不然下次找不到哟

2024年最新计算机软件毕业设计选题大全：数百热门选题推荐✅

2024最新精品毕业设计项目，已整理自取
感兴趣可以先收藏起来，以防走丢，有任何选题、文档编写、代码问题也可以咨询我们

动图演示：文末白嫖源码

代码结构

主要代码实现

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://www.maotouyingcc.com/category/bishe">
    <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>直接免费获取</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://www.maotouyingcc.com/category/bishe"><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>猫头鹰源码</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>

css代码：

@charset "utf-8";
/* CSS Document */
/*------- reset -------*/
/*
author: web63.cn
Date:2015/01/01;
Version:1.0;
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
	}

/* HTML5标签初始化 
--------------------------------------------------*/
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

/* 标签初始化 
--------------------------------------------------*/
body { line-height: 1; color:#333;font:14px/1.5 Arial, Helvetica, Verdana, sans-serif}
ol, ul,li{ list-style: none; }
blockquote, q { 
	quotes: none; 
	border-left: solid 4px #39c;
	margin-left: 10px;
	padding-left: 10px;
	background: whitesmoke;
	margin: 10px auto;
	padding: 6px 10px;
	color: #666;
	font-size: 20px;
}
i,em{
	font-style:normal;
	font-weight:100;
}
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
a img{ border:0; }
h1{ font-size:24px; font-weight: normal;}
h2{ font-size:20px;  font-weight: normal;}
h3{ font-size:18px; font-weight: normal; }
h4{ font-size:14px;  font-weight: normal;}
h5, h6{ font-size:12px;  font-weight: normal;}
a,a:hover{ text-decoration:none; }
div{display:block;}
.tl{text-align: left;}
.tc{text-align: center;}
.tr{text-align: right;}

table{ border-collapse: separate;border-spacing: 0;}th, td {text-align: left; font-weight: normal;} img, iframe {border: none; text-decoration:none;}input, textarea, select, button {font-size: 100%;font-family: inherit;margin:0;padding:0;}select {margin: inherit;} hr {margin: 0;padding: 0;border: 0;color: #000;background-color: #000;height: 1px}
strong,b{font-weight:100;}
input,button{border: 0;outline:none;}
/* 解决Google浏览器字体不小于12px的问题
--------------------------------------------------*/
html{ -webkit-text-size-adjust:none;}
a{color: #39c;
	text-decoration: none;}
a:hover{ text-decoration: underline;}
a{outline: none;}
a:active{*star: expression(this.onFocus=this.blur());}
a:focus{*outline: 0; }

/*清除浮动*/
.clearfix:before,.clearfix:after {content:"";display:table;}
.clearfix:after{ clear:both; }/* For IE 6/7 (trigger hasLayout) */
.clearfix{ zoom:1;}
.clear{clear:both;height:0px;overflow:hidden;}
.clear{clear:both;height:0px;overflow:hidden;}

/*常用样式*/
.pr{ position:relative}
.fb,strong{ font-weight:700;}
.fb0{ font-weight:100;}
.hid{overflow:hidden;}
.f12{ font-size:12px;}
.f14{ font-size:14px;}
.f16{ font-size:16px;}
.f18{ font-size:18px;}
.f20{ font-size:20px;}
.db{display: block;}
.imglink{display: block;text-align: center;}

/*input 框提示文字 html5*/
.placeholder{
	color:#7186AA;
}
input::-webkit-input-placeholder{
	color: #7186AA;
}
input::-moz-placeholder{
	color: #7186AA;
}
textarea::-webkit-input-placeholder{
	color: #7186AA;
}
textarea::-moz-placeholder{
	color: #7186AA;
}

.hide{display: none;}

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

由于js和css过多，上面只粘主页代码，其它的自行下载即可

源码获取

大家点赞、收藏、关注、评论啦 、联系下方获取👇🏻👇🏻👇🏻

专栏推荐阅读：

2024年最新计算机软件毕业设计选题大全：数百热门选题推荐✅

2024最新精品毕业设计项目，已整理自取

转载请注明出处或者链接地址：https://www.qianduange.cn//article/17778.html
标签
旅游大屏端
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

web前端期末项目——HTML CSS JavaScript jQuery Bootstrap 瑞鹏宠物医院

2024-09-27 09:09:59

jquery video视频轮播播放

2024-09-27 09:09:58

掌握jQuery实现Tab组件的完整指南

2024-09-27 09:09:55

大学生网页制作期末作业——html css javascript jquery旅游官网6页 html大学生网站开发实践作业 web网页设计实例作业 (2)

2024-09-27 09:09:46

重拾经典：jQuery 3.4.1 下载与应用指南

2024-09-27 09:09:45

【油猴脚本】00018 案例 Tampermonkey油猴脚本， 仅用于学习，不要乱搞。继续优化UI界面，Jquery爬虫，JavaScript爬虫，HTML Css JavaScript编写

2024-09-27 09:09:42

【echarts】自定义dataZoom样式

2024-09-27 09:09:40

Rollup failed to resolve import “tslib“ from “node_modules/echarts/lib/core/echarts.js“.

2024-09-27 09:09:38

Vue Computed 和 Watch 的区别与运用场景

2024-09-27 09:09:38

flex：弹性盒子布局多行，最后一行左对齐

2024-09-27 09:09:33

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
3

vue使用datav echarts

2024-09-06 00:09:381000
4

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
5

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
6

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
7

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
8

npm的使用

2024-08-18 00:08:131000
9

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000
10

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！