基于Echarts+HTML5可视化数据大屏展示-全息档案大数据平台

猫头鹰源码(同名B站)

于 2024-09-18 21:04:39 发布

阅读量266

点赞数 4

分类专栏： ECharts+html大数据模板文章标签： html5 前端 html 信息可视化大数据 echarts javascript

本文链接：https://blog.csdn.net/mtyedu/article/details/142343768

版权

ECharts+html大数据模板专栏收录该内容

27 篇文章 0 订阅

订阅专栏

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

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

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

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

动图演示：文末白嫖源码

代码结构

主要代码实现

index.html布局



</head>
<body>
<!-- Main content -->
<section class="content">
 <div class="row" style="width: 1920px;height: 1080px;background: red;padding: 0px;background: url('../img/qxda/qxbj.png') no-repeat 0 0;background-size:100% 100%;">
 	<div class="row" style="height: 150px;width: 100%;">
 		<div style="width: 100%;height: 94px;background: transparent;text-align: center;">
 			<!--<img src="../img/qxda/qxz.png" style="margin-top: 45px;"/>-->
 		</div>
		<div style="width: 833px;height: 25px;background: url('../img/qxda/ssk.png') no-repeat 0 0;background-size:100% 100%;margin: 0 auto;";>
			<div class="ssk" style="width: 303px;padding-top: 3px;">
				<span style="margin-left: 20px;">数据范围</span>
				<span style="margin-left: 30px;">2017-12-01</span>
			</div>
			<div class="ssk" style="margin-left: 13px;height: 24px;width: 303px;text-align: center;padding-top: 3px;">
				2017-12-07
			</div>
			<div class="ssk" style="margin-left: 13px;height: 24px;width: 185px;text-align: center;padding-top: 3px;"> 
				查询
			</div>
		</div>
 	</div>
	<div class="row wd" style="height: 551px;width: 100%;">
		<div style="width: 90%;height: 100%;margin: 0 auto;">
			<div style="width: 40%;float: left;">
				<div class="col-md-3 col-md-offset-2 xwsx_bak" >
					<div class="row" style="height: 80px;text-align: right;padding-top: 50px;">
						行为属性
					</div>
					<div id="pmd_xwsx" style="position: absolute;">
					</div>
					<div class="row" style="height: 441px;">
						<ul id="xwsx" style="padding-left: 0px;">
							<li>
								<div class="col-md-9" style="text-align: right;"></div>
								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
							</li>
							<li>
								<div class="col-md-9 shake_qxda" style="text-align: right;">话单记录</div>
								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
							</li>
							<li>
								<div class="col-md-9 shake_qxda" style="text-align: right;">邮寄物流</div>
								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
							</li>
							<li>
								<div class="col-md-9 shake_qxda" style="text-align: right;">消费记录</div>
								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
							</li>
							<li>
								<div class="col-md-9" style="text-align: right;"></div>
								<div class="col-md-3"><img src="../img/qxda/sx_bottom.png"></div>
							</li>
						</ul>
					</div>
				</div>
				<div class="col-md-3 rcxw_bak">
					<div class="row" style="height: 80px;text-align: right;padding-top: 50px;">
						日常行为
					</div>
					<div id="pmd_rcxw" style="position: absolute;">
					</div>
					<div class="row" style="height: 441px;">
						<ul id="rcxw" style="padding-left: 0px;">
							<li>
								<div class="col-md-9" style="text-align: right;"></div>
								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
							</li>
							<li>
								<div class="col-md-9 shake_qxda" style="text-align: right;">经常活动地</div>
								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
							</li>
							<li>
								<div class="col-md-9 shake_qxda" style="text-align: right;">车辆往返地</div>
								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
							</li>
							<li>
								<div class="col-md-9 shake_qxda" style="text-align: right;">经常消费地</div>
								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
							</li>
							<li>
								<div class="col-md-9 shake_qxda" style="text-align: right;">节点上访地</div>
								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
							</li>
							<li>
								<div class="col-md-9" style="text-align: right;"></div>
								<div class="col-md-3"><img src="../img/qxda/sx_bottom.png"></div>
							</li>
						</ul>
					</div>
				</div>
				<div class="col-md-3 jbsx_bak">
					<div class="row" style="height: 80px;text-align: right;padding-top: 50px;">
						基本属性
					</div>
					<div id="pmd_jbsx" style="position: absolute;">
					</div>
					<div class="row" style="height: 441px;">
						<ul id="jbsx" style="padding-left: 0px;">
							<li>
								<div class="col-md-9" style="text-align: right;"></div>
								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
							</li>
							<li>
								<div class="col-md-9 shake_qxda" style="text-align: right;">联系方式</div>
								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
							</li>
							<li>
								<div class="col-md-9 shake_qxda" style="text-align: right;">居住地址</div>
								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
							</li>
							<li>
								<div class="col-md-9 shake_qxda" style="text-align: right;">工作单位</div>
								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
							</li>
							<li>
								<div class="col-md-9 shake_qxda" style="text-align: right;">证件号码</div>
								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
							</li>
							<li>
								<div class="col-md-9 shake_qxda" style="text-align: right;">虚拟身份</div>
								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
							</li>
							<li>
								<div class="col-md-9" style="text-align: right;"></div>
								<div class="col-md-3"><img src="../img/qxda/sx_bottom.png"></div>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div style="width: 20%;float: left;">
				<div class="row" style="height: 80px;position: relative;">
					<div style="text-align: center;">
						<span style="font-size: 18px">彭西晏/男/吸毒人员/已关注</span>
						<img class="rt_1" src="../img/qxda/person.jpg" />
						<img class="rt_2" src="../img/qxda/person2.jpg" />
					</div>
					<div style="text-align: center;">
						<img  src="../img/qxda/hx.png"/></br>
						<span style="font-size: 16px">321234567342112</span></br>
						<img  src="../img/qxda/hx.png"/>
					</div>
					<div id="pmd_1" style="position: absolute;">
					</div>
					<div id="pmd_2" style="position: absolute;">
					</div>
				</div>
				<div class="row" style="height: 441px;text-align: center;">
					<img id="rt" src="../img/qxda/rt.png" style="transform:scale(.8)"/>
				</div>
			</div>
			<div style="width: 40%;float: left;">
				<div class="col-md-3 col-md-offset-1 shsj_bak">
					<div class="row" style="height: 80px;text-align: left;padding-top: 50px;">
						生活数据
					</div>
					<div id="pmd_shsj" style="position: absolute;">
					</div>
					<div class="row" style="height: 441px;">
						<ul id="shsj" style="padding-left: 0px;">
							<li>
								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
								<div class="col-md-9" style="text-align: left;"></div>
							</li>
							<li>
								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
								<div class="col-md-9 shake_qxda" style="text-align: left;">医保卡号</div>
							</li>
							<li>
								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
								<div class="col-md-9 shake_qxda" style="text-align: left;">房屋信息</div>
							</li>
							<li>
								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
								<div class="col-md-9 shake_qxda" style="text-align: left;">车辆信息</div>
							</li>
							<li>
								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
								<div class="col-md-9 shake_qxda" style="text-align: left;">燃气缴费</div>
							</li>
							<li>
								<div class="col-md-3"><img src="../img/qxda/sx_bottom.png"></div>
								<div class="col-md-9" style="text-align: right;"></div>
							</li>
						</ul>
					</div>
				</div>
				<div class="col-md-3 gjdx_bak">
					<div class="row" style="height: 80px;text-align: left;padding-top: 50px;">
						轨迹动向
					</div>
					<div id="pmd_gjdx" style="position: absolute;">
					</div>
					<div class="row" style="height: 441px;">
						<ul id="gjdx" style="padding-left: 0px;">
							<li>
								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
								<div class="col-md-9" style="text-align: left;"></div>
							</li>
							<li>
								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
								<div class="col-md-9 shake_qxda" style="text-align: left;">室内活动</div>
							</li>
							<li>
								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
								<div class="col-md-9 shake_qxda" style="text-align: left;">流入流出</div>
							</li>
							<li>
								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
								<div class="col-md-9 shake_qxda" style="text-align: left;">敏感时段动向</div>
							</li>
							<li>
								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
								<div class="col-md-9 shake_qxda" style="text-align: left;">重点部位</div>
							</li>
							<li>
								<div class="col-md-3"><img src="../img/qxda/sx_bottom.png"></div>
								<div class="col-md-9" style="text-align: right;"></div>
							</li>
						</ul>
					</div>
				</div>
				<div class="col-md-3 gxry_bak">
					<div class="row" style="height: 80px;text-align: left;padding-top: 50px;">
						关系人员
					</div>
					<div id="pmd_gxry" style="position: absolute;">
					</div>
					<div class="row" style="height: 441px;">
						<ul id="gxry" style="padding-left: 0px;">
							<li>
								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
								<div class="col-md-9" style="text-align: left;"></div>
							</li>
							<li>
								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
								<div class="col-md-9 shake_qxda" style="text-align: left;">亲属关系</div>
							</li>
							<li>
								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
								<div class="col-md-9 shake_qxda" style="text-align: left;">社会关系</div>
							</li>
							<li>
								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
								<div class="col-md-9 shake_qxda" style="text-align: left;">同行同住</div>
							</li>
							<li>
								<div class="col-md-3"><img src="../img/qxda/sx_bottom.png"></div>
								<div class="col-md-9" style="text-align: right;"></div>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div style="position: absolute;" >
				<div class="animate wave">
					<img id="q1" src="../img/qxda/q1.png"  style="position: absolute;top: 360px;left: 395px;"/>
					<img id="q2" src="../img/qxda/q2.png" style="position: absolute;top: 345px;left: 325px;"/>
					<img id="q3" src="../img/qxda/q3.png" style="position: absolute;top: 333px;left: 255px;"/>
					<img id="q4" src="../img/qxda/q4.png" style="position: absolute;top: 320px;left: 185px;"/>
					<img id="q5" src="../img/qxda/q5.png" style="position: absolute;top: 306px;left: 90px;"/>
					<img id="q6" src="../img/qxda/q6.png" style="position: absolute;top: 275px;left: -39px;"/>
				</div>
				
				
				<!--<div id="pmd_gq_1" style="position: absolute;">
				</div>
				<div id="pmd_gq_6" style="position: absolute;">
				</div>-->
				<!--<svg height="551" width="1920">
					<ellipse cx="845" cy="410" rx="300" ry="50" style="fill:transparent;stroke:green;stroke-width: 5; stroke-dasharray: 5,5;"></ellipse>
					<ellipse cx="845" cy="410" rx="350" ry="70" style="fill:transparent;stroke:green;stroke-width: 5; stroke-dasharray: 5,5;"></ellipse>
					<ellipse cx="845" cy="410" rx="400" ry="90" style="fill:transparent;stroke:green;stroke-width: 5; stroke-dasharray: 5,5;"></ellipse>
					<ellipse cx="845" cy="410" rx="300" ry="50" style="fill:transparent;stroke:green;stroke-width: 5; stroke-dasharray: 5,5;"></ellipse>
					<ellipse cx="845" cy="410" rx="300" ry="50" style="fill:transparent;stroke:green;stroke-width: 5; stroke-dasharray: 5,5;"></ellipse>
					<ellipse cx="845" cy="410" rx="300" ry="50" style="fill:transparent;stroke:green;stroke-width: 5; stroke-dasharray: 5,5;"></ellipse>
				</svg>-->
			</div>
			<div style="position: absolute;">
				<img id="q7" src="../img/qxda/gq.png" style="position: absolute;top: 227px;left: -24px;"/>
			</div>
		</div>
	</div>
	<div class="row" style="height: 379px;width: 100%;">
		<div style="width: 1205px;height: 323px;background: url('../img/qxda/blk.png') no-repeat 0 0;background-size:100% 100%;margin: 0 auto;">
			<div style="width: 1184px;padding-left: 10px;height: 55px;padding-top: 20px;">
				<div class="col-md-2">姓名</div>
				<div class="col-md-1">性别</div>
				<div class="col-md-4">身份证号码</div>
				<div class="col-md-1">出发地</div>
				<div class="col-md-1">目的地</div>
				<div class="col-md-1">发现地点</div>
				<div class="col-md-1">发现时间</div>
				<div class="col-md-1">轨迹类型</div>
			</div>
			<ul style="padding-left: 10px;" id="table_1">
				<!--<li>
					<div class="col-md-1">彭西晏</div>
					<div class="col-md-1">男</div>
					<div class="col-md-5">321234567342112</div>
					<div class="col-md-1">银川</div>
					<div class="col-md-1">北京</div>
					<div class="col-md-1">宾馆</div>
					<div class="col-md-1">2018/5/04</div>
					<div class="col-md-1">飞机</div>
				</li>
				<li>
					<div class="col-md-1">彭西晏</div>
					<div class="col-md-1">男</div>
					<div class="col-md-5">321234567342112</div>
					<div class="col-md-1">银川</div>
					<div class="col-md-1">北京</div>
					<div class="col-md-1">网吧</div>
					<div class="col-md-1">2018/5/08</div>
					<div class="col-md-1">火车</div>
				</li>
				<li>
					<div class="col-md-1">彭西晏</div>
					<div class="col-md-1">男</div>
					<div class="col-md-5">321234567342112</div>
					<div class="col-md-1">银川</div>
					<div class="col-md-1">新疆</div>
					<div class="col-md-1">卡口</div>
					<div class="col-md-1">2018/5/22</div>
					<div class="col-md-1">飞机</div>
				</li>
				<li>
					<div class="col-md-1">彭西晏</div>
					<div class="col-md-1">男</div>
					<div class="col-md-5">321234567342112</div>
					<div class="col-md-1">银川</div>
					<div class="col-md-1">杭州</div>
					<div class="col-md-1">网吧</div>
					<div class="col-md-1">2018/5/23</div>
					<div class="col-md-1">大巴</div>
				</li>
				<li>
					<div class="col-md-1">彭西晏</div>
					<div class="col-md-1">男</div>
					<div class="col-md-5">321234567342112</div>
					<div class="col-md-1">银川</div>
					<div class="col-md-1">北京</div>
					<div class="col-md-1">宾馆</div>
					<div class="col-md-1">2018/5/24</div>
					<div class="col-md-1">火车</div>
				</li>
				<li>
					<div class="col-md-1">彭西晏</div>
					<div class="col-md-1">男</div>
					<div class="col-md-5">321234567342112</div>
					<div class="col-md-1">银川</div>
					<div class="col-md-1">北京</div>
					<div class="col-md-1">宾馆</div>
					<div class="col-md-1">2018/5/29</div>
					<div class="col-md-1">飞机</div>
				</li>
				-->
			</ul>
		</div>
		<div style="width: 1920px;height: 56px;background: url('../img/qxda/bottom_bak.png') no-repeat 0 0;background-size:100% 100%;text-align: center;">
			<div style="padding-top: 20px;width: 253px;margin: 0 auto;">
				<div style="float: left;margin-left: 85px;" class="titles">流入流出</div>
			</div>
			
		</div>
	</div>
      
      
     
			
 </div>
        

</section>
<!-- ./wrapper -->

 
 
 
 

<script src="../content/ui/global/jQuery/jquery.min.js"></script>
<script src="../js/echarts/echartsNew.min.js"></script>


<script src="../js/function/pie_mode.js" charset="utf-8"></script> 
<script src="../js/function/bar_model.js" charset="utf-8"></script> 
<script src="../js/public/num.js" charset="utf-8"></script> 
<!--<!--<script src="./js/public/jquery.vticker.min.js" charset="utf-8"></script>-->
<script src="../js/jquery.liMarquee.js" charset="utf-8"></script> 


<!--<script src="./js/public/jquery.liMarquee.js" charset="utf-8"></script>--> 


<!--<script src="./js/function/map_1.js" charset="utf-8"></script>--> 

<script type="text/javascript">
	/*6个维度依次显示*/
	$(".jbsx_bak").animate({opacity: 1},1000);
	$(".rcxw_bak").animate({opacity:1},2000);
	$(".xwsx_bak").animate({opacity:1},3000);
	$(".shsj_bak").animate({opacity: 1},1000);
	$(".gjdx_bak").animate({opacity:1},2000);
	$(".gxry_bak").animate({opacity:1},3000);
	//文字点击效果
	$(".shake_qxda").click(function(){
		$('.shake_qxda').css({color: 'white',animation:''});
		$(this).css({animation:'shake 1s forwards',color: '#05D6AC'})
		getTable_1($(this).text());
		$(".titles").html($(this).text())
	})
getTable_1('');	
function getTable_1(t){
	var html_data='';
	for(var i=0;i<6;i++){
		html_data+='<li>'+
					'<div class="col-md-2">彭西晏_'+t+'</div>'+
					'<div class="col-md-1">男</div>'+
					'<div class="col-md-4">321234567342112</div>'+
					'<div class="col-md-1">银川</div>'+
					'<div class="col-md-1">北京</div>'+
					'<div class="col-md-1">宾馆</div>'+
					'<div class="col-md-1">2018/5/04</div>'+
					'<div class="col-md-1">飞机</div>'+
				'</li>';
	}
	$("#table_1").html(html_data)
}
</script>
</body>
</html>

css文件：

/*开关的大小*/
.switch-container {
    height: 25px;
    width: 60px;
    margin-left: 150px;
    margin-top: -23px;
}

/*设置checkbox不显示*/
.switch {
    display: none;
}

/*设置label标签为椭圆状*/
label {
    display: block;
    background-color: #EEEEEE;
    height: 100%;
    width: 100%;
    cursor: pointer;
    border-radius: 25px;
}

/*在label标签内容之前添加如下样式，形成一个未选中状态*/
label:before {
    content: '';
    display: block;
    border-radius: 25px;
    height: 100%;
    width: 24px;
    background-color: white;
    opacity: 1;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.08);
    -webkit-transition: all 0.2s ease;
}

/*在label标签内容之后添加如下样式，形成一个选中状态*/
label:after {
    position: relative;
    top: -25px;
    left: 36px;
    content: '';
    display: block;
    border-radius: 25px;
    height: 100%;
    width: 24px;
    background-color: white;
    opacity: 0;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.08);
    -webkit-transition: all 0.2s ease;
}


/* ~ 兄弟选择符。
   p~ul ：位于 p 元素之后的所有 ul 元素
*/

/*选中后，选中样式显示*/
#switch:checked~label:after {
    opacity: 1;
}

/*选中后，未选中样式消失*/
#switch:checked~label:before {
    opacity: 0;
}

/*选中后label的背景色改变*/
#switch:checked~label {
    background-color: green;
}

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

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