Echarts + Web实现大屏展示效果（一） - 好文

一、效果展示

二、资源下载

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">  <img src="images/index.gif"
width="960" height="540"> </div>   <div
id="Monitor">  <img src="images/index1.gif"
width="960" height="540"> </div>  </div> </body> </html>
源代码下载地址：猛戳这里 <https://download.csdn.net/download/qq_21419015/10681178>

热门工具换一换