Echarts + Web實現大屏展示效果（一）
阿新 • • 發佈：2018-12-31
一、效果展示
二、資源下載
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>
原始碼下載地址： 猛戳這裡