基于Echarts+HTML5可视化数据大屏展示-大数据可视化通用版

于 2024-10-08 22:43:54 发布
阅读量312 收藏 2
点赞数 8
分类专栏： ECharts+html大数据模板 文章标签： echarts 信息可视化 前端 大数据 html5 大屏端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mtyedu/article/details/142771289
版权

博主主页：猫头鹰源码
博主简介：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>
<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://gitee.com/iGaoWei/big-data-view">大数据可视化通用素材</a></h1>
</div>
<div class="mainbox">
  <ul class="clearfix">
    <li>
      <div class="boxall" style="height:calc(33.3333% - .25rem)">
        <div class="tit01">模块标题</div>
		  <div class="boxnav nav01" id="echart1"></div>
        <div class="boxfoot"></div>
      </div>
		<div  style="height:calc(33.3333% - .25rem); margin-bottom: .25rem;">
		
		    <div class="boxall" style="height: 100%; width:calc(50% - .08rem); float: left;">
        <div class="tit01">模块标题</div>
 <div class="boxnav nav01" id="echart2"></div>
        <div class="boxfoot"></div>
      </div>
			
			 <div class="boxall" style="height: 100%; width:calc(50% - .08rem); float: right;">
        <div class="tit01">模块标题</div>
 <div class="boxnav nav01" style="display: flex; align-items: center;">
				 <p class="p2"><span class="counter">19</span>/<span class="counter">25</span></p>
				 </div>
        <div class="boxfoot"></div>
      </div>
			
			
		</div>
		
      <div class="boxall" style="height:calc(33.3333% - .25rem)">
        <div class="tit01">模块标题</div>
         <div class="boxnav nav01" id="echart3"></div>
        <div class="boxfoot"></div>
      </div>
    </li>
    <li>
      
      <div class="boxall" style="height:calc(33.33333% - .25rem)">
        <div class="tit02">本月计划</div>
        <div class="boxnav nav02">
		  	<div>
				<p class="p1">完成/计划</p>
			<p class="p2"><span class="counter">15633</span>/<span class="counter">68000</span></p>
			<p class="p3">
				<span><i class="dot dot1"></i>未完成：52367</span>
				<span><i class="dot dot2"></i>完成率：22.9%</span>
			</p></div>
		  </div>
        <div class="boxfoot"></div>
      </div>
		<div class="boxall"  style="height:calc(66.666666% - .25rem)">
        <div class="tit03">模块标题</div>
			 <div class="boxnav nav03">
				 
				 <div class="listhead listhead1">
				  <span>字段1</span>
					  <span>字段名称</span>
					  <span>字段名称</span>
					  <span>字段名称</span>
					  <span>字段名称</span>
					  <span>字段名称</span>
				 </div>
				 <div class="listnav listnav1 scrollDiv">
				 <ul>
					 <li> <span>201910-01</span> <span>2658/2658</span> <span>2658/2658</span> <span>2658/2658</span> <span>2658/2658</span> <span class="text-green">100%</span></li>
					 <li><span>201910-02</span> <span>2334/2334</span> <span>2334/2334</span> <span>2334/2334</span> <span>2334/2334</span> <span class="text-green">100%</span></li>
					 <li> <span>201910-02</span> <span>2334/2334</span> <span>2334/2334</span> <span>2334/2334</span> <span>2334/2334</span> <span class="text-green">100%</span></li>
					 <li> <span>201910-02</span> <span>2334/2334</span> <span>2334/2334</span> <span>2334/2334</span> <span>2334/2334</span> <span class="text-green">100%</span></li>
					 <li> <span>201910-02</span> <span>2334/2334</span> <span>2334/2334</span> <span>2334/2334</span> <span>2334/2334</span> <span class="text-green">100%</span></li>
					 <li> <span>201910-02</span> <span>2334/2334</span> <span>2334/2334</span> <span>2334/2334</span> <span>2334/2334</span> <span class="text-green">100%</span></li>
					 <li> <span>201910-02</span> <span>2334/2334</span> <span>2334/2334</span> <span>2334/2334</span> <span>2334/2334</span> <span class="text-green">100%</span></li>
					  <li> <span>201910-02</span> <span>2334/2334</span> <span>2334/2334</span> <span>2334/2334</span> <span>2334/2334</span> <span class="text-green">100%</span></li>
					  <li> <span>201910-02</span> <span>2334/2334</span> <span>2334/2334</span> <span>2334/2334</span> <span>2334/2334</span> <span class="text-green">100%</span></li>
					  <li> <span>201910-02</span> <span>2334/2334</span> <span>2334/2334</span> <span>2334/2334</span> <span>2334/2334</span> <span>70%</span></li>
					 </ul>
				 </div>
				 
			
			</div>
        <div class="boxfoot"></div>
      </div>
    </li>
    <li>
      <div class="boxall"   style="height:calc(100% - .25rem); padding: 0;">
        <div class="tit04">模块标题</div>
 <div class="boxnav nav04">
	 
	  <div class="listhead listhead2">        
				  <span>字段名称</span>
					  <span>字段名称</span>
					  <span>字段名称</span>
					 
				 </div>
	 
		  <div class="listnav listnav2 scrollDiv">
						  
						  <ul class="smjl">
			<li>               
				<span>设备名称</span>
				<span class="text-green">正常</span>
				<span> <input type="hidden" name="countDown" value="2019/09/10 13:29:12"> <span></span></span>
			</li>
				<li>               
				<span>设备名称</span>
				<span class="text-red">异常</span>
				<span><span> <input type="hidden" name="countDown" value="2019/10/30 3:23:00"> <span></span></span></span>
			</li>			  
						
							  	<li>               
				<span>设备名称</span>
				<span class="text-green">正常</span>
				<span> <input type="hidden" name="countDown" value="2019/09/10 13:29:12"> <span></span></span>
			</li>
							  	<li>               
				<span>设备名称</span>
				<span class="text-green">正常</span>
				<span> <input type="hidden" name="countDown" value="2019/09/10 13:29:12"> <span></span></span>
			</li>
							  	<li>               
				<span>设备名称</span>
				<span class="text-green">正常</span>
				<span> <input type="hidden" name="countDown" value="2019/09/10 13:29:12"> <span></span></span>
			</li>
							  	<li>               
				<span>设备名称</span>
				<span class="text-green">正常</span>
				<span> <input type="hidden" name="countDown" value="2019/09/10 13:29:9"> <span></span></span>
			</li>
							  	<li>               
				<span>设备名称</span>
				<span class="text-green">正常</span>
				<span> <input type="hidden" name="countDown" value="2019/09/10 13:29:12"> <span></span></span>
			</li>
							  	<li>               
				<span>设备名称</span>
				<span class="text-green">正常</span>
				<span> <input type="hidden" name="countDown" value="2019/09/10 13:29:11"> <span></span></span>
			</li>
							  	<li>               
				<span>设备名称</span>
				<span class="text-green">正常</span>
				<span> <input type="hidden" name="countDown" value="2019/09/10 13:29:12"> <span></span></span>
			</li>
							  	<li>               
				<span>设备名称</span>
				<span class="text-green">正常</span>
				<span> <input type="hidden" name="countDown" value="2019/09/10 13:29:13"> <span></span></span>
			</li>
							  	<li>               
				<span>设备名称</span>
				<span class="text-green">正常</span>
				<span> <input type="hidden" name="countDown" value="2019/09/10 13:29:14"> <span></span></span>
			</li>
							  	<li>               
				<span>设备名称</span>
				<span class="text-green">正常</span>
				<span> <input type="hidden" name="countDown" value="2019/09/10 13:29:15"> <span></span></span>
			</li>
						<li>               
				<span>设备名称</span>
				<span class="text-green">正常</span>
				<span> <input type="hidden" name="countDown" value="2019/09/10 13:29:12"> <span></span></span>
			</li>
							  	<li>               
				<span>设备名称</span>
				<span class="text-green">正常</span>
				<span> <input type="hidden" name="countDown" value="2019/09/10 13:29:12"> <span></span></span>
			</li>
							  	<li>               
				<span>设备名称</span>
				<span class="text-green">正常</span>
				<span> <input type="hidden" name="countDown" value="2019/09/10 13:29:16"> <span></span></span>
			</li>
							  	<li>               
				<span>设备名称</span>
				<span class="text-green">正常</span>
				<span> <input type="hidden" name="countDown" value="2019/09/10 13:29:12"> <span></span></span>
			</li>
							  	<li>               
				<span>设备名称</span>
				<span class="text-green">正常</span>
				<span> <input type="hidden" name="countDown" value="2019/09/10 13:29:12"> <span></span></span>
			</li>
							  	<li>               
				<span>设备名称</span>
				<span class="text-green">正常</span>
				<span> <input type="hidden" name="countDown" value="2019/09/10 13:29:22"> <span></span></span>
			</li>
							  	<li>               
				<span>设备名称</span>
				<span class="text-green">正常</span>
				<span> <input type="hidden" name="countDown" value="2019/09/10 13:29:42"> <span></span></span>
			</li>
							  	<li>               
				<span>设备名称</span>
				<span class="text-green">正常</span>
				<span> <input type="hidden" name="countDown" value="2019/09/10 13:29:19"> <span></span></span>
			</li>
							  	<li>               
				<span>设备名称</span>
				<span class="text-green">正常</span>
				<span> <input type="hidden" name="countDown" value="2019/09/10 13:29:17"> <span></span></span>
			</li>
							  
			</ul>
						  </div>
		  </div>
        <div class="boxfoot"></div>
      </div>

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


<script type="text/javascript" src="js/echarts.min.js"></script> 
<script src="js/jquery.liMarquee.js"></script> 
<script language="JavaScript" src="js/js.js"></script> 
<script type="text/javascript" src="js/jquery.countup.min.js"></script> 
<script type="text/javascript" src="js/jquery.waypoints.min.js"></script> 
<script type="text/javascript">
$('.counter').countUp();

$(function(){
	$('.scrollDiv').liMarquee({
		direction: 'up',//身上滚动 
		runshort: false,//内容不足时不滚动
		scrollamount: 20//速度
	});
});

</script> 
 
  <script src="js/countDown.js"></script>
<script type="text/javascript">
    $("input[name='countDown']").each(function () {
        var time_end=this.value;
        var con=$(this).next("span");
        var _=this.dataset;
        countDown(con,{
            time_end:time_end//开始时间
        })
        //提供3个事件分别为:启动,重启,停止
        .on("countDownStarted countDownRestarted  countDownEnded ",function (arguments) {
            console.info(arguments);
        });
    });

</script>
</body>
</html>

css文件：


.loading{position:fixed; left:0; top:0; font-size:.3rem; 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:#bde4ff; text-align: center; font-size: .4rem; line-height:1.05rem; letter-spacing: .06rem;}
.head h1 img{ width:1.5rem; display: inline-block; vertical-align: middle; margin-right: .2rem}

html,body{height: 100%;}
.mainbox{ padding:.4rem 0rem 0rem 0rem; height:calc(100% - 1.05rem); }
.mainbox>ul{ margin-left:.1rem; margin-right:.1rem; height: 100%;}
.mainbox>ul>li{ float: left; padding: 0 .13rem;height: 100%;}
.mainbox>ul>li{ width: 25%}
.mainbox>ul>li:nth-child(2){ width: 50%}

.boxall{ border: 1px solid #3486da; background: rgba(0,70,190,.1); padding:.15rem; position: relative; margin-bottom: .25rem; z-index: 10;}
.boxall:before,
.boxall:after{ position:absolute; width: .15rem; height: .15rem; content: "";  border-top: 3px solid #3486da; top: -2px;}
.boxall:before,.boxfoot:before{border-left: 3px solid #3486da;left:-2px;}
.boxall:after,.boxfoot:after{border-right: 3px solid #3486da; right: -2px;}

.boxfoot{ position:absolute; bottom: 0; width: 100%; left:0;}
.boxfoot:before,
.boxfoot:after{ position:absolute; width: .15rem; height: .15rem;  content: "";border-bottom:3px solid #3486da; bottom:-2px;}

.tit01{background: linear-gradient(to right,rgba(48,82,174,1),rgba(48,82,174,0)); color: #fff; font-size: .17rem; padding: .03rem .1rem;}
.tit02{ background: #3aafe8;  color: #021132; position: absolute; font-size: .25rem; padding: .02rem 0; text-align: center; width: 2.4rem; left: 50%; margin-left: -1.2rem; margin-top: -.35rem; letter-spacing: .05rem;}
.tit03{text-align: center; color: #fff;font-size: .25rem; line-height: .5rem; letter-spacing: .05rem;}
.tit04{text-align: center; background: #0c2854; color: #fff;font-size: .25rem; line-height: .6rem; letter-spacing: .05rem;}

.wrap{ height:2.54rem; overflow: hidden;}
.wrap li{  line-height:.42rem; height:.42rem; font-size: .18rem; text-indent: .24rem; margin-bottom: .1rem; }
.wrap li p{border: 1px solid rgba(25,186,139,.17);color: rgba(255,255,255,.6); }

.boxnav{}
.nav01{ height: calc(100% - .3rem); padding-top: .2rem;}
.nav02{ height: calc(100%); display: flex; align-items: center;}
.nav03{ height: calc(100% - .47rem); padding-top: .2rem;}
.nav04{ height: calc(100% - .7rem);}
.nav02>div{width: 100%;}
.nav02 p{text-align: center; color: #fff;}
.nav02 .p1{font-size: .3rem; letter-spacing: .02rem;}
.p2{font-size: .6rem; letter-spacing: .05rem; padding: .1rem 0; width: 100%; text-align: center;}
.nav02 .p3 span{text-align: center; color: #fff; display: inline-block; width: 45%;font-size: .3rem;}
.dot{width: .2rem;height: .2rem; display: inline-block; border-radius: 1rem; position: relative; top: .04rem; margin-right: .1rem; }
.dot1{background: #ff0006}
.dot2{background: #00ea37}
.text-green{ color: #00ea37}
.text-red{ color: #ff0006;}

.listhead{height: .55rem;display: flex; justify-content: space-between; }
.listnav{height:calc(100% - .55rem); }
.listnav ul li{height: 100%; display: flex; justify-content: space-between;}
.listhead span,.listnav li span{width: 100%; align-items: center; justify-content: center; display: flex;height: .55rem;}
.listhead1 span,.listnav1 li span{border: 1px solid #3486da;}
.listnav ul li span{ font-size:.18rem;}
.listnav2 ul li:nth-child(odd){ background: #0c2854;}
.listhead1 span{background: #0c2854; font-size: .2rem; color: #3486da; font-weight: bold;}
.listhead2 span{ font-size: .2rem; color: #3486da; border-bottom: 1px solid #0c2854; font-weight: bold;}

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

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

源码获取

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

专栏推荐阅读：

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

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

猫头鹰源码(同名B站)
关注
专栏目录
ECharts+html大数据可视化大屏展示模板.zip
10-13
ECharts+html大数据可视化大屏展示模板25套,可以根据自己需求修改数据和样式,都是基于ECharts的大数据可视化展示html的模板，直接打开html即可看到展示效果。内含：智慧物流大数据展示模板，智慧医疗大数据展示模板...
ECharts+html大数据可视化大屏展示模板：智慧物流人口活动情况警情矛盾纠纷舆情交通分析大数据.zip
12-22
本压缩包"智慧物流人口活动情况警情矛盾纠纷舆情交通分析大数据.zip"包含了一系列基于ECharts的HTML模板，旨在帮助用户快速构建大数据可视化大屏展示。以下是对每个模板的详细说明： 1. **001智慧物流大数据展示...
基于Echarts+HTML5可视化数据大屏展示—大数据管理平台中心
java李阳勇的博客
09-17 4124
???? 作者主页：Java李杨勇 ???? 简介：Java领域优质创作者????、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我，都给你】 ???? 欢迎点赞 ???? 收藏 ⭐留言 ???? 效果演示：文末获取源码 实时监控&统计分析一&统计分析二 实时监控&统计分析一&统计分析二 代码目录： 主要代码实现： 主页HTML布局： <div class="index_nav" &gt
基于Echarts+HTML5可视化数据大屏展示—设备管理大数据平台
java李阳勇的博客
09-23 2873
???? 作者主页：Java李杨勇 ???? 简介：Java领域优质创作者????、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我，都给你】 ???? 欢迎点赞 ???? 收藏 ⭐留言 ???? 动图演示：文末获取源码 大数据平台中心 具体数据模块详情 代码目录： 主要代码实现： 主页HTML布局： <!DOCTYPE html> <html> <head> <meta cha
基于Echarts+HTML5可视化数据大屏展示-大学迎新实时大数据可视化
weixin_mtyeducation
09-09 619
基于Echarts+HTML5可视化数据大屏展示-大学迎新实时大数据可视化
基于Echarts+HTML5可视化数据大屏展示-当天实时发稿量大数据可视化
weixin_mtyeducation
09-18 497
基于Echarts+HTML5可视化数据大屏展示-当天实时发稿量大数据可视化
基于Echarts+HTML5可视化数据大屏展示—北斗车联网大数据平台
java李阳勇的博客
09-23 3517
???? 作者主页：Java李杨勇 ???? 简介：Java领域优质创作者????、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我，都给你】 ???? 欢迎点赞 ???? 收藏 ⭐留言 ???? 动图演示：文末获取源码 车联网大数据平台展示 车辆各情况排名统计表格分析 代码目录： 主要代码实现： 主页HTML布局： <!DOCTYPE html> <html lang="zh-CN"&gt
基于Echarts+HTML5可视化数据大屏展示-大数据可视化
weixin_mtyeducation
09-08 598
基于Echarts+HTML5可视化数据大屏展示-大数据可视化
基于Echarts+HTML5可视化数据大屏展示-大数据可视化数据分析
weixin_mtyeducation
09-14 592
基于Echarts+HTML5可视化数据大屏展示-大数据可视化数据分析
基于Echarts+HTML5可视化数据大屏展示—大数据管理平台中心（二）
java李阳勇的博客
09-17 2247
???? 作者主页：Java李杨勇 ???? 简介：Java领域优质创作者????、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我，都给你】 ???? 欢迎点赞 ???? 收藏 ⭐留言 ???? 效果演示：文末获取源码 交通分析 舆情分析 矛盾纠纷分析 人口分析 活动情况分析 代码目录： 部分代码实现： 全局CSS样式： /****** PLACE YOUR CUSTOM STYLES HERE ******
基于Echarts+HTML5可视化数据大屏展示-公司大数据大屏展示
weixin_mtyeducation
09-10 619
基于Echarts+HTML5可视化数据大屏展示-公司大数据大屏展示
基于Echarts+HTML5可视化数据大屏展示-echart大数据大屏分析
weixin_mtyeducation
09-11 326
基于Echarts+HTML5可视化数据大屏展示-echart大数据大屏分析
ECharts+html大数据可视化大屏展示模板，共整合了30多套源码+效果图，做大屏效果的不容错过
04-06
ECharts+html大数据可视化大屏展示模板，共整合了30多套源码+效果图，做大屏效果的不容错过。
28【源码】数据可视化：基于 Echarts + Python Flask 动态实时大屏范例 - 数据分析看板.zip
04-11
更多Python&Echarts版的数据可视化大屏源码： https://yydatav.blog.csdn.net/article/details/120705616 更多Java SpringBoot&Echarts版的数据可视化大屏源码： ... 更多《工厂订单出入库信息管理系统》案例源码： ...
6【源码】数据可视化：基于 Echarts + Java SpringBoot 实现的动态实时大屏范例-互联网大数据统计
03-26
YYDatav的数据可视化大屏《精彩案例汇总》（Java SpringBoot&Echarts源码） https://yydatav.blog.csdn.net/article/details/123652970 另有：2&TLZ【源码】数据可视化：基于Echarts&PyQT&Flask实现的动态实时...
【D3.js in Action 3 精译_027】3.4 让 D3 数据适应屏幕（下）—— D3 分段比例尺的用法
PeacefulWinter的博客
10-03 1077
本篇为《D3.js in Action》全新第3版3.4.3节内容，详细介绍了示例条形图需要的第二类比例尺——分段比例尺（band scale）的用法及注意事项。通过对绑定数据的定义域于作用域的设置，大幅免去了手动计算的繁琐操作。建议感兴趣的朋友在本地实测。建议先收藏起来。
基于大数据的二手房价数据可视化系统
计算机学姐的博客
09-30 1298
【2025最新】基于大数据+大屏可视化+Python+Django+Vue+MySQL的二手房价数据分析及可视化系统。
用示波器测动态滞回线
m0_73918454的博客
10-01 479
大学物理实验数据处理绘图
【D3.js in Action 3 精译_028】3.4 小节 DIY 实战：使用 Observable 在线绘制 D3 条形图
最新发布
PeacefulWinter的博客
10-04 1521
本篇根据《D3.js in Action》全新第3版3.4节内容，将第三章的示例条形图的绘制放到了 Observable 平台，并详细介绍了 Observable Notebook 的使用方法及注意事项。Observable 是 D3.js 创始人 Mike Bostock 为其量身打造的线上可视化项目演练平台，几乎汇集了全世界所有 D3 顶尖高手的一线最佳实践，非常值得 D3 爱好者一探究竟。建议收藏本篇，持续精进 D3 技术！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

猫头鹰源码(同名B站)

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值