毕设项目分享 基于大数据的电力监控数据可视化平台

# 0 前言

Hi，大家好，今天给大家介绍一个大数据可视化项目，大家可以用于自己的课设或毕设，可以灵活耦合任意数据，为自己的项目添加灵活的可视化动态效果！

今天要分享的是：基于大数据的电力监控数据可视化平台

包含内容：

1. 完整可视化实现源码
2. html一键入口(双击直接启动)

项目获取：https://gitee.com/sinonfin/system-sharing

1 介绍

大数据大屏可视化系列：基于大数据的电力监控数据可视化平台
可搭载任意自己想用的数据，动态效果不错

2 实现效果

整体实现效果如下，可以看到CSS优化相对漂亮的，而且动态效果也很好，适合搭载各种数据。

3 部分代码展示

		<div class="time" id="showTime">2018/6/12 17:00:12</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();//获取秒
       document.getElementById("showTime").innerHTML = y+"/"+mt+"/"+day+" "+h+":"+m+":"+s+"";
       t = setTimeout(time,1000); //设定定时器，循环运行     
    } 

</script>
	</div>
	<div class="mainbox">
	
	<ul class="clearfix nav1">
		<li style="width: 25%">
		<div class="box">
			<div class="tit">标题样式</div>
			<div class="boxnav" id="echart1" style="height: 180px;">

			</div>
			</div>
			<div class="box">
			<div class="tit">标题样式</div>
			<div class="boxnav" style="height: 180px;" id="echart21">
			</div>
			</div>
			
			<div class="box">
			<div class="tit">标题样式</div>
			<div class="boxnav" id="echart3" style="height: 240px;">
				
			</div>
			</div>
		</li>
		<li style="width: 50%">
		
		<div class="box">
			<div class="boxnav mapc" style="height: 500px; position: relative; padding: 0">
				
				
				

  <!-- Swiper -->

  <div class="swiper-container gallery-top">
	<div class="mapnav">
				<ul>
					<li><div><span>全部负荷</span><p>358</p></div></li>
					<li><div><span>火电负荷</span><p>913452</p></div></li>
					<li><div><span>风电负荷</span><p>19532</p></div></li>
					<li><div><span>供热负荷</span><p>521711</p></div></li>
					</ul>
					
				</div>
    <div class="swiper-wrapper">
		<div class="swiper-slide" style="background-image:url(images/1.jpg)"></div>
		<div class="swiper-slide" style="background-image:url(images/1.jpg)"></div>
		<div class="swiper-slide" style="background-image:url(images/1.jpg)"></div>
		<div class="swiper-slide" style="background-image:url(images/1.jpg)"></div>
		<div class="swiper-slide" style="background-image:url(images/1.jpg)"></div>
		<div class="swiper-slide" style="background-image:url(images/1.jpg)"></div>
      
   
		
    </div>

    <!-- Add Arrows -->

    <div class="swiper-button-next swiper-button-white"></div>

    <div class="swiper-button-prev swiper-button-white"></div>

  </div>

  <div class="swiper-container gallery-thumbs">

    <div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(images/1.jpg)"></div>
<div class="swiper-slide" style="background-image:url(images/1.jpg)"></div>
<div class="swiper-slide" style="background-image:url(images/1.jpg)"></div>
<div class="swiper-slide" style="background-image:url(images/1.jpg)"></div>
<div class="swiper-slide" style="background-image:url(images/1.jpg)"></div>
<div class="swiper-slide" style="background-image:url(images/1.jpg)"></div>

    </div>

  </div>
 <script>
var galleryThumbs = new Swiper('.gallery-thumbs', {
	spaceBetween: 0,
	slidesPerView: 5,
	freeMode: true,
	watchSlidesVisibility: true,
	watchSlidesProgress: true,
});
var galleryTop = new Swiper('.gallery-top', {
	spaceBetween: 10,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
	thumbs: {
		swiper: galleryThumbs
	}
});
  </script>		
			</div>
			</div>
		<ul class="nav1">
			<li style="width: 50%">
			<div class="box">
			<div class="tit">标题样式</div>
			<div class="boxnav" id="echart4" style="height: 200px;">
				
			</div>
			</div>
			</li>
			<li style="width: 50%">
			
			<div class="box">
			<div class="tit">标题样式</div>
			<div class="boxnav"  id="echart5" style="height: 200px;">
				
			</div>
			</div></li>
			</ul>
			
		</li>
		<li style="width: 25%">
		<div class="box">
			
			<div class="boxnav"  style="height: 76px;">
			<div class="weather">
				<div class="">
				<div class="wt1">
					<div class="wt2"><img src="images/weather.png"><p>29<sup>℃</sup></p></div>
					<span>多云转晴</span>
					</div>
					
				</div>
				<div class="wt03">
				<p><span>气温：</span>20 ~ 32℃</p>
				<p><span>降水量：</span>32毫米</p>
				<p><span>风况：</span>西北风微风</p>
				</div>
				</div>
			</div>
			</div>
		<div class="box">
			<div class="tit">标题样式</div>
			<div class="boxnav" id="echart6" style="height: 170px;"></div>
			</div>
			
			<div class="box">
			<div class="tit">标题样式</div>
			<div class="boxnav" style="height: 170px;" id="echart7"></div>
			</div>
		<div class="box">
			<div class="tit">标题样式</div>
			<div class="boxnav" style="height: 170px;">
			<ul class="gnlb">
				<li><span>月平均小时：<em>119351</em></span></li>
				<li><span>月平均小时：<em>119351</em></span></li>
				<li><span>月平均小时：<em>119351</em></span></li>
				<li><span>月平均小时：<em>119351</em></span></li>
				<li><span>月平均小时：<em>119351</em></span></li>
				<li><span>月平均小时：<em>119351</em></span></li>
				</ul>
			
			</div>
			</div>
		</li>
		</ul>
		
		
		
		
	</div>
</body>

4 最后

项目获取：https://gitee.com/sinonfin/system-sharing