菜单 搜索
首页 前端知识 基于Echarts HTML5可视化数据大屏展示-大数据大屏分析系统

基于Echarts HTML5可视化数据大屏展示-大数据大屏分析系统

2024-09-14 23:09:40 前端知识 前端哥 85 770 我要收藏

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

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

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

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

动图演示：文末白嫖源码

代码结构

主要代码实现

index.html布局

<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>大数据可视化系统数据分析通用模版</title>
	<meta http-equiv="refresh" content="50;url='https://www.maotouyingcc.com/category/bishe/'">
	<script type="text/javascript" src="js/jquery.js"></script>
	<link rel="stylesheet" href="css/comon0.css">
</head>

<body>
	<div class="loading">
		<div class="loadbox"> <img src="images/loading.gif"> 页面加载中... </div>
	  </div>
	<div class="head">
		<h1><a href="https://www.maotouyingcc.com/category/bishe/" style="color: white">大数据可视化系统数据分析</a></h1>
		<div class="time" id="showTime"><a href="https://www.maotouyingcc.com/category/bishe/">2023年12月05日16时16分54秒</a></div>
		<script>
			var t = null;
			t = setTimeout(time, 1000);//開始运行
			function time() {
				clearTimeout(t);//清除定时器
				dt = new Date();
				var y = dt.getFullYear();
				var mt = dt.getMonth() + 1;
				var day = dt.getDate();
				var h = dt.getHours();//获取时
				var m = dt.getMinutes();//获取分
				var s = dt.getSeconds();//获取秒
				var t = null;
				document.getElementById("showTime").innerHTML = y + "年" + Appendzero(mt) + "月" + Appendzero(day) + "日" + Appendzero(h) + "时" + Appendzero(m) + "分" + Appendzero(s) + "秒";
				function Appendzero(obj) {
					if (obj < 10) return "0" + "" + obj;
					else return obj;
				}
				t = setTimeout(time, 1000); //设定定时器，循环运行     
			}
		</script>
	</div>
	<div class="mainbox">
		<ul class="clearfix">
			<li>
				<div class="boxall" style="height: calc(15% - .15rem)">
					<ul class="row h100 row1">
						<li class="col-4">
							<div class="bar1"><img src="images/icon1.png">
								<h3><span>字段名称</span>200个</h3>
							</div>
						</li>
						<li class="col-4">
							<div class="bar1"><img src="images/icon4.png">
								<h3><span>字段名称</span>1200个</h3>
							</div>
						</li>
						<li class="col-4">
							<div class="bar1"><img src="images/icon5.png">
								<h3><span>字段名称
									</span>150家</h3>
							</div>
						</li>
					</ul>
				</div>
				<div class="boxall" style="height: calc(43% - .15rem)">
				
					<ul class="sec h100">
<li>
	<div>
		<p><img src="images/icon4.png">字段名称</p>
		<div class="barnav"><div class="bar2"><span style="width:50%;"></span></div> <span>24356件</span></div>

		
	</div>

	<div>
<div class="zaf">
	<p>同比</p>
	<p><span>34<i>%</i></span><img src="images/up.png"></p>
</div>
	</div>
</li>

<li>
	<div>
		<p><img src="images/icon5.png">字段名称</p>
		
		<div class="barnav"><div class="bar2"><span style="width:50%;"></span></div> <span>243567封</span></div>
	</div>

	<div>
<div class="zaf">
	<p>同比</p>
	<p><span>34<i>%</i></span><img src="images/up.png"></p>
</div>
	</div>
</li>

<li>	
	<div>
		<p><img src="images/icon6.png">字段名称</p>
		<div class="barnav"><div class="bar2"><span style="width:50%;"></span></div> <span>24356笔</span></div>
	</div>
	
	<div>
<div class="zaf">
	<p>同比</p>
	<p><span>50<i>%</i></span><img src="images/down.png"></p>
</div>
	</div>
</li>

					</ul>
				
				</div>
				<div class="boxall" style="height: calc(42% - .15rem)">
					<div class="alltitle">模块标题</div>
					<div class="boxnav" id="echarts3"></div>
				</div>
			</li>
			<li>
				<div class="boxall" style="height: calc(20% - .15rem)">
					<ul class="row h100 clearfix">
						<li class="col-6">
							<div class="sqzs h100">
								<p>业绩总览</p>
								<h1>1938272</h1>
							</div>
						</li>
						<li class="col-6">
							<ul class="row h100 clearfix">
								<li class="col-4">
									<div class="tit01">字段名称</div>
									<div class="piebox" id="pe01"></div>
								</li>
								<li class="col-4">
									<div class="tit01">“字段名称</div>
									<div class="piebox" id="pe02"></div>
								</li>
								<li class="col-4">
									<div class="tit01">字段名称</div>
									<div class="piebox" id="pe03"></div>
								</li>
							</ul>

						</li>
					</ul>
				</div>
				<div class="boxall" style="height: calc(38% - .15rem)">
					<div class="boxnav h100" id="echarts1"></div>
				</div>
				<div class="boxall" style="height: calc(42% - .15rem)">
					<div class="alltitle">模块标题 </div>
					<div class="boxnav" id="echarts2"></div>
				</div>

			</li>
			<li>

				<div class="boxall" style="height: calc(15% - .15rem)">

					<ul class="row h100 row1">
						<li class="col-4">
							<div class="bar1 bar2"><img src="images/icon7.png">
								<h3><span>字段名称
									</span>251项</h3>
							</div>
						</li>
						<li class="col-4">
							<div class="bar1 bar2"><img src="images/icon8.png">
								<h3><span>字段名称
									</span>34家</h3>
							</div>
						</li>
						<li class="col-4">
							<div class="bar1 bar2"><img src="images/icon9.png">
								<h3><span>字段名称
									</span>150项</h3>
							</div>
						</li>
					</ul>


				</div>
				<div class="boxall" style="height: calc(43% - .15rem)">
					<div class="alltitle">模块标题</div>
					<div class=" boxnav" id="lastecharts">
					</div>

				</div>
				<div class="boxall" style="height: calc(42% - .15rem)">
					<div class="alltitle">排行榜</div>
					<div class=" boxnav paim">
						<ul class="h100">
							<li>
								<span>1</span>
								<div class="pmnav">
									<p>标题名称标题名称标题名称标题名称</p>
									<div class="pmbar"><span style="width:100%"></span><i>500</i></div>
								</div>
							</li>
							<li>
								<span>2</span>
								<div class="pmnav">
									<p>标题名称</p>
									<div class="pmbar"><span style="width:92%"></span><i>400</i></div>
								</div>
							</li>
							<li>
								<span>3</span>
								<div class="pmnav">
									<p>标题名称</p>
									<div class="pmbar"><span style="width:90%"></span><i>180</i></div>
								</div>
							</li>
							<li>
								<span>4</span>
								<div class="pmnav">
									<p>标题名称</p>
									<div class="pmbar"><span style="width:88%"></span><i>160</i></div>
								</div>
							</li>
							<li>
								<span>5</span>
								<div class="pmnav">
									<p>标题名称</p>
									<div class="pmbar"><span style="width:86%"></span><i>140</i></div>
								</div>
							</li>
						</ul>

					</div>

				</div>
			
			</li>
		</ul>
	</div>

	<script>
		$(document).ready(function () {
			var arr = [];
			var max;
			$(".paim li i").each(function () {
				arr.push($(this).text());
			})
			//alert(arr)
			max = Math.max.apply(null, arr);

			$(".paim .pmbar span").each(function () {
				var i = $(this).parents("li").index()
				w = arr[i] / max * 100;
				sw = w.toFixed(0) + '%'

				$(this).css({ width: sw })
			})

		})
	</script>


	<script type="text/javascript" src="js/echarts.min.js"></script>
	<script language="JavaScript" src="js/js.js"></script>

</body>
</html>

css：

@charset "utf-8";
/* CSS Document */
*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box}
*,body{padding:0px;	margin:0px;font-family: "微软雅黑";}
body{ background:#000d4a url(../images/bg.jpg) center center; background-size:cover;color:#fff; font-size: .1rem; }
li{ list-style-type:none;}
@font-face{font-family:electronicFont;src:url(../font/DS-DIGIT.TTF)}
i{ margin:0px; padding:0px; text-indent:0px;}
img{ border:none; max-width: 100%;}
a{ text-decoration:none; color:#399bff;}
a.active,a:focus{ outline:none!important; text-decoration:none;}
ol,ul,p,h1,h2,h3,h4,h5,h6{ padding:0; margin:0}
a:hover{ color:#06c; text-decoration: none!important}

html,body{height: 100%;}
.clearfix:after, .clearfix:before {display: table;content: " "}
 .clearfix:after {clear: both}
.pulll_left{float:left;}
.pulll_right{float:right;}
/*谷哥滚动条样式*/
  ::-webkit-scrollbar {width:5px;height:5px;position:absolute}
  ::-webkit-scrollbar-thumb {background-color:#5bc0de}
  ::-webkit-scrollbar-track {background-color:#ddd}
/***/

.loading{position:fixed; left:0; top:0; font-size:18px; z-index:100000000;width:100%; height:100%; background:#1a1a1c; text-align:center;}
.loadbox{position:absolute; width:160px;height:150px; color: #324e93; left:50%; top:50%; margin-top:-100px; margin-left:-75px;}
.loadbox img{ margin:10px auto; display:block; width:40px;}

.head{ height:1.05rem; background: url(../images/head_bg.png) no-repeat center center; background-size: 100% 100%; position: relative}
.head h1{ color:#fff; text-align: center; font-size: .4rem; line-height:.8rem; letter-spacing: -1px;}
.head h1 img{ width:1.5rem; display: inline-block; vertical-align: middle; }
.time{ position:absolute; right:.15rem; top:0; line-height: .75rem;color:rgba(255,255,255,.7); font-size: .26rem; padding-right: .1rem;}

.mainbox{ padding:0 .2rem 0rem .2rem; height:90%}
.mainbox>ul{ margin-left:-.1rem; margin-right:-.1rem; height:100%}
.mainbox>ul>li{ float: left; padding: 0 .1rem;height:100%;width: 30%}
.mainbox>ul>li:nth-child(2){ width: 40%}

.boxall{ padding:0 .2rem .2rem .2rem;  background: rgba(6,48,109,.5); position: relative; margin-bottom: .15rem; z-index: 10; }
.alltitle{ font-size:.2rem; color:#fff;  line-height: .5rem; position: relative;padding-left: .15rem}
.alltitle:before{position: absolute; height: .2rem; width: 4px; background: #49bcf7; border-radius: 5px; content: ""; left: 0;  top: 50%; margin-top: -.1rem;}
.boxnav{height: calc(100% - .5rem);}
.row>li{ float: left; height: 100%;}
.col-6{width: 50%;}
.col-3{width: 25%;}
.col-4{width: 33.33333%;}
.h100{height: 100%;}
.tit01{ text-align: center; color: white; font-size: .16rem; padding: .3rem 0 .05rem 0;}
.piebox{ height: calc(100% - .5rem); position: relative;}


.row1 .bar1{ height: 100%; background: url(../images/bg01.png) no-repeat; background-size: 100% 100%; position: relative;}
.bar1 img{ width: .4rem; margin-right: .15rem;;}
.bar1{ display: flex; justify-content: center; align-items: center;}
.bar1 span{ color: #fff; font-size: .16rem; display: block; font-weight: normal;}
.bar1 h3{ color: #fef000; font-size: .22rem;;}
.row1 li{ padding: .2rem .1rem 0 .1rem;}
.row1{margin-left: -.1rem; margin-right: -.1rem;}
.row1 .bar2{ background: url(../images/bg02.png) no-repeat; background-size: 100% 100%;}
.row1 .bar2 h3{ text-align: right;}
.paim li>span{width: .3rem; height: .3rem; text-align: center; line-height: .3rem;  background: #878787; border-radius: .05rem; margin-right: .1rem; font-size: .16rem;}
.paim li:nth-child(1)>span{ background: #ed405d}
.paim li:nth-child(2)>span{background: #f78c44}
.paim li:nth-child(3)>span{background: #49bcf7}
.paim li{display: flex; align-items: center; height:20%;}

.pmbar{position: relative; display: flex;}

.pmbar span{ background: linear-gradient(to right,#14b6ff,#9cefff); display: inline-block; vertical-align: middle; height: .15rem; border-radius: .5rem;}
.pmbar i{ line-height: .2rem; font-style: normal; padding-left: .1rem; color: #49bcf7}
.pmnav{width:calc(100% - .5rem)}
.pmnav p{color: #fff; opacity: .6; font-size: .15rem; padding-bottom: .05rem; white-space: nowrap; 
  overflow: hidden; text-overflow: ellipsis;}
.sqzs{margin-right: .2rem;}
.sqzs p{ padding: .2rem 0; font-size: .22rem;}
.sqzs h1{height: calc(100% - .65rem); border-bottom: 1px solid rgba(255,255,255,.1); border-top: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; color: #fef000; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-weight: normal; letter-spacing: 2px; font-size: .85rem; justify-content: center;padding-bottom: .05rem;}



.sec li{height: 33.3333%;  display: flex; align-items: center; justify-content: space-between}
.sec li>div:nth-child(1){width: 85%}
.sec li>div:nth-child(2){}
.sec .bar2{width: 70%; margin: .1rem 0; display: inline-block; vertical-align: middle;border: 1px solid #00deff; height: .3rem; padding: .07rem; border-radius: 1rem;}
.sec .bar2 span{ display: block; height: 100%;background: linear-gradient(to right,#14b6ff,#9cefff);border-radius: 1rem;}

.sec p{display: flex; align-items: center; font-size: .26rem;}
.sec p img{width: .35rem; margin-right: .15rem;}
.barnav span{text-align: center; color: #f7e80d; font-size: .24rem; padding-left: .1rem; line-height:.3rem;}

.zaf{text-align: center;}
.zaf p{justify-content: center}
.zaf p img{ width: .18rem; margin-right: 0;;}
.zaf span{color: #00d3ff; font-family: Impact; font-size: .35rem;}
.zaf span i{font-style: normal; font-size: .18rem;}

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

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

源码获取

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

专栏推荐阅读：

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

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

转载请注明出处或者链接地址：https://www.qianduange.cn//article/18314.html
标签
数据分析
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

C#解析JSON的常用库--Newtonsoft.Json

2024-11-30 11:11:42

jsonfield 项目常见问题解决方案

2024-11-30 11:11:42

【SpringMVC】_SpringMVC项目返回HTML与JSON

2024-11-30 11:11:41

BugJson因为json格式问题OOM怎么办

2024-11-30 11:11:41

python 解读JSON文件，一文搞懂！

2024-11-30 11:11:40

Redisson同时使用jackson、fastjson、kryo、protostuff序列化（含效率对比）

2024-11-30 11:11:40

开源项目“Pretty JSON”安装与配置完全指南

2024-11-30 11:11:39

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

2024-11-30 11:11:39

解决全局安装pnpm后无法使用的问题

2024-11-30 11:11:39

安装Nodejs后，npm无法使用

2024-11-30 11:11:38

大家推荐的文章
1

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

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

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

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

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

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

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

2024-08-19 22:08:161000
9

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

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

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

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

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

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

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