一、效果展示
二、资源下载
1、图片资源下载 点击这里
2、js+css 文件资源下载 点击这里
三、Demo实现
1、文档结构如下图所示：
2、Demo.html 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>可视化大屏幕</title>
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="css/main_design1.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="js/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="js/echarts.js"></script>
<script language="javascript" type="text/javascript" src="js/china.js"></script>
<script language="javascript" type="text/javascript" src="js/geoCoord.js"></script>
<script language="javascript" type="text/javascript" src="js/big_design1.js"></script>
</head>
<body>
<div id="main">
<!-- 刷新 -->
<div id="refresh">
<span id="refreshTime">当前系统时间：</span>
</div>
<!-- 刷新结束 -->
<!-- 年区域开始 -->
<div id="currentYear">2000年</div>
<!-- 进度条区域开始-->
<div id="y_gauge1"></div>
<div id="y_gauge2"></div>
<div id="y_gauge3"></div>
<div id="y_gauge4"></div>
<!-- 进度条区域结束-->
<!-- 地图开始 -->
<div id="map"></div>
<!-- 地图结束 -->
<!-- 年区域结束 -->
<!-- 月区域开始 -->
<div id="currentMonth">01月</div>
<!-- 进度条区域开始-->
<div id="m_gauge1"></div>
<div id="m_gauge2"></div>
<div id="m_gauge3"></div>
<div id="m_gauge4"></div>
<!-- 进度条区域结束-->
<!-- 生产质量展示开始-->
<div id="quality"></div>
<!-- 生产质量展示结束-->
<!-- 生产计划展示开始-->
<div id="plan"></div>
<!-- 生产计划展示结束-->
<!-- 月区域结束 -->
<!-- 日区域开始 -->
<div id="currentDay">01日</div>
<!-- 进度条区域开始-->
<div id="d_gauge1"></div>
<div id="d_gauge2"></div>
<div id="d_gauge3"></div>
<div id="d_gauge4"></div>
<!-- 进度条区域结束-->
<!-- 生产情况展示开始-->
<div id="produce">
<table width="100%" cellpadding="6" cellspacing="0">
<tr class="row1">
<td rowspan="2"><span id="currentDate">2018/04/25</span></td>
<td colspan="2">L焊装</td>
<td colspan="2">L涂装</td>
<td colspan="2">L总装</td>
</tr>
<tr class="row1">
<td>上线(HW1)</td>
<td>下线(HW3)</td>
<td>上线(HT1)</td>
<td>下线(HA1)</td>
<td>上线(HA2)</td>
<td>下线(HA8)</td>
</tr>
<tr class="row2">
<td>全天计划</td>
<td>48</td>
<td>48</td>
<td>48</td>
<td>48</td>
<td>48</td>
<td>48</td>
</tr>
<tr class="row1">
<td>当天计划</td>
<td>34</td>
<td>34</td>
<td>34</td>
<td>34</td>
<td>34</td>
<td>34</td>
</tr>
<tr class="row2">
<td>当前实际</td>
<td>30</td>
<td>28</td>
<td>28</td>
<td>26</td>
<td>25</td>
<td>8</td>
</tr>
<tr class="row1">
<td>差异</td>
<td><span style="color:#FF0">-4</span></td>
<td><span style="color:#FF0">-4</span></td>
<td><span style="color:#FF0">-6</span></td>
<td><span style="color:#FF0">-8</span></td>
<td><span style="color:#FF0">-9</span></td>
<td><span style="color:#FF0">-26</span></td>
</tr>
<tr class="row2">
<td>JPH</td>
<td colspan="2">5.25</td>
<td colspan="2">5.45</td>
<td colspan="2">5.45</td>
</tr>
<tr class="row1">
<td>在线台数</td>
<td colspan="2">22</td>
<td colspan="2">65</td>
<td colspan="2">44</td>
</tr>
</table>
</div>
<!-- 生产情况展示结束-->
<!-- 仪表盘区域开始-->
<div id="gauge1"></div>
<div class="gaugeTitle" style="left:2200px;top:1250px;">
<sapn id="vg1">32</sapn> m<sup>3</sup>/d
</div>
<div id="gauge2"></div>
<div class="gaugeTitle" style="left:2550px;top:1250px;">
<sapn id="vg2">32</sapn> KVA
</div>
<div id="gauge3"></div>
<div class="gaugeTitle" style="left:2910px;top:1250px;">
<sapn id="vg3">32</sapn> Nm<sup>3</sup>/h
</div>
<div id="gauge4"></div>
<div class="gaugeTitle" style="left:2380px;top:1380px;">
<sapn id="vg4">32</sapn> m<sup>3</sup>/m
</div>
<div id="gauge5"></div>
<div class="gaugeTitle" style="left:2730px;top:1380px;">
<sapn id="vg5">32</sapn> t/h
</div>
<!-- 仪表盘区域结束-->
<!-- 日区域结束 -->
<!-- 视频开始 -->
<div id="video">
<!-- <object id="MediaPlayer" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="960" height="540" standby="Loading Windows Media Player components…" type="application/x-oleobject" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112">
<param name="FileName" value="video/rec008.avi">
<param name="AutoStart" value="true">
<param name="ShowControls" value="false">
<param name="BufferingTime" value="2">
<param name="ShowStatusBar" value="false">
<param name="AutoSize" value="true">
<param name="InvokeURLs" value="false">
<param name="AnimationatStart" value="1">
<param name="TransparentatStart" value="1">
<param name="Loop" value="true">
<param name="MovieWindowHeight" value="540">
<param name="MovieWindowWidth" value="960">
<embed type="application/x-mplayer2" src="video/rec008.avi" name="MediaPlayer" autostart="1" showstatusbar="0" showdisplay="1" showcontrols="0" loop="1" videoborder3d="0" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" width="960" height="540"></embed>
</object> -->
<img src="images/index.gif" width="960" height="540">
</div>
<!-- 视频结束 -->
<!-- 监控视频开始-->
<div id="Monitor">
<!-- <object id="MediaPlayer" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="960" height="540" standby="Loading Windows Media Player components…" type="application/x-oleobject" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112">
<param name="FileName" value="video/monitor.avi">
<param name="AutoStart" value="true">
<param name="ShowControls" value="false">
<param name="BufferingTime" value="2">
<param name="ShowStatusBar" value="false">
<param name="AutoSize" value="true">
<param name="InvokeURLs" value="false">
<param name="AnimationatStart" value="1">
<param name="TransparentatStart" value="1">
<param name="Loop" value="true">
<embed type="application/x-mplayer2" src="video/monitor.avi" name="MediaPlayer" autostart="1" showstatusbar="0" showdisplay="1" showcontrols="0" loop="1" videoborder3d="0" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" width="640" height="360"></embed>
</object> -->
<img src="images/index1.gif" width="960" height="540">
</div>
<!-- 监控视频结束-->
</div>
</body>
</html>源代码下载地址： 猛戳这里
扫描二维码关注公众号，回复：
3784573 查看本文章
