基于Echarts+HTML5可视化数据大屏展示

基于Echarts+HTML5可视化数据大屏展示—大屏数据统计

🍅 作者主页：Java李杨勇

🍅 简介：Java领域优质创作者🏆、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我，都给你】

🍅 欢迎点赞 👍 收藏 ⭐留言 📝

效果演示： 文末获取源码

中间仪盘表数据可以自己添加会引用布局展示

代码目录：

主要代码实现：

主页HTML布局：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<link href="css/public.css" rel="stylesheet" type="text/css"/>
<link href="css/jianlisw.css" rel="stylesheet" type="text/css"/>
<title>大屏数据统计</title>
</head>
<body>
<!-- banner start -->
<div class="caption-title"><i class="fl"><img src="images/title-left.png" ></i><span class="biaoti fl">大屏数据统计</span><i class="fr"><img src="images/title-right.png" ></i>
</div>
<!-- 内容正文 -->
<div class="zhenwen"><div class="left_zs fl"><!-- 项目概览 --><div class="data-box1 left_tb fl"><i class="topL"></i><i class="topR"></i><i class="bottomL"></i><i class="bottomR"></i><div class="data-title"><b class="data-title-left fl">[</b><span>项目概览</span><b class="data-title-right fr">]</b></div><!-- 项目概览--><div class="xmglan">        <ul class="xmgl_heard"><li>当前</li><li class="hove">历史</li></ul>            <div id="xmgl_cen">              <div class="xmgl_tb"><ul class="xm_cszs"><li>在建项目（个）:<span>100</span>个</li><li> 在建工地面积（平米）：<span>100</span>万M</li><li><p>市政（%）:<span>100</span><cite>%</cite></p>  <p>绿化（%）:<span>100</span><cite>%</cite></p><p>房建（%）<span>100</span><cite>%</cite></p> </li><li><p>交建（%）<span>100</span><cite>%</cite></p><p>其他（%）<span>100</span><cite>%</cite></p></li></ul></div> <div class="xmgl_tb none"><ul class="xm_cszs"><li>在建项目（个）:<span>140</span>个</li><li> 在建工地面积（平米）：<span>120</span>万M</li><li><p>市政（%）:<span>110</span><cite>%</cite></p>  <p>绿化（%）:<span>140</span><cite>%</cite></p><p>房建（%）<span>180</span><cite>%</cite></p> </li><li><p>交建（%）<span>10</span><cite>%</cite></p><p>其他（%）<span>140</span><cite>%</cite></p></li></ul></div>  </div></div>     </div>     <!-- 项目人员信息状态 --><div class="data-box1 left_tb fl mtop40"><i class="topL"></i><i class="topR"></i><i class="bottomL"></i><i class="bottomR"></i><div class="data-title"><b class="data-title-left fl">[</b><span>项目人员信息状态</span><b class="data-title-right fr">]</b></div><!-- 项目人员信息状态--><div class="xmglan">        <div id="lytj" class="lytj"></div>   <div class="wgrytj"><span class="wgrytj_bt">务工人员工种统计</span><div class="wgrytj_tb"><div id="gztj" style="height:163px"></div>                    </div></div><div class="wgrytj"><span class="wgrytj_bt">各公司现场人员统计</span><div class="wgrytj_tb"><div id="xcrytj" style="height:163px"></div>                    </div></div></div>     </div></div><!--仪表盘等展示--><div class="center_zs fl"><div class="data-box1 box1-back"><i class="topL"></i><i class="topR"></i><i class="bottomL"></i><i class="bottomR"></i><div class="data-title"><b class="data-title-left">[</b><span>仪表盘等展示</span><b class="data-title-right">]</b></div></div></div>    <!--右侧图表展示 --><div class="right_zs fl"><!-- 巡检风险状态 -->        <div class="data-box1 right_tb "><i class="topL"></i><i class="topR"></i><i class="bottomL"></i><i class="bottomR"></i><div class="data-title"><b class="data-title-left">[</b><span>巡检风险状态</span><b class="data-title-right">]</b></div><!--巡检风险状态--><div class="ryclts"> <div id="xjfxzt" style="height:300px"></div></div> </div>  <!-- 风险变化趋势 -->        <div class="data-box1 right_tb mtop40"><i class="topL"></i><i class="topR"></i><i class="bottomL"></i><i class="bottomR"></i><div class="data-title"><b class="data-title-left">[</b><span>风险变化趋势</span><b class="data-title-right">]</b></div><!--问题等级--><div class="ryclts">          			<div class="clearfix"><div id="fxbhqs" style="height:300px"></div></div><div class="wgrytj">                	<div class="wenti_dj"><div id="wentidj" style="height:100px"></div></div><div  class="wenti_bg">
<table width="200" border="1"><tr><td>类别</td><td>发现总是</td><td>重大问题</td><td>一般问题</td></tr><tr><td>质量问题</td><td class="green">45</td><td class="orange">300</td><td class="green">40</td></tr><tr><td>安全问题</td><td class="green">36</td><td class="orange">100</td><td class="green">78</td></tr>
</table></div></div></div> </div>   </div></div>      <div class="h30 clearfix"></div>      
</body>
<script src="js/jquery.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/monitor_sw.js"></script><script>
$(function(){//分类选择	$(".xmgl_heard li").click(function(){$(this).attr("class","");$(this).siblings().attr("class","hove");$("#xmgl_cen").find(".xmgl_tb").eq($(this).index()).removeClass("none").siblings().addClass("none")});
})
</script></html>

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

上面的图片文件以及js文件等需要引入进来

源码获取

大家点赞、收藏、关注、评论我啦、查看👇🏻👇🏻👇🏻微信公众号获取👇🏻👇🏻👇🏻

打卡文章更新 56/ 100天

专栏推荐阅读：

ECharts+HTML5大数据模板《100套》

HTML5大作业实战案例《100套》

Java毕设项目精品实战案例《100套》