一、效果展示



二、资源下载

1、图片资源下载        点击这里 <https://download.csdn.net/download/qq_21419015/10681135>

2、js+css 文件资源下载  点击这里 <https://download.csdn.net/download/qq_21419015/10681149>

三、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>
源代码下载地址: 猛戳这里 <https://download.csdn.net/download/qq_21419015/10681178>