效果图
技术
jquery, echarts
代码
<div class="t_left_box">
<img class="t_l_line" src="img/left_line.png" alt="">
<div class="t_mbox t_rbox">
<i></i>
<span>本月订单数</span>
<h2>18000</h2>
</div>
<div class="t_mbox t_gbox">
<i></i>
<span>本月新增会员</span>
<h2>1000</h2>
</div>
<div class="t_mbox t_ybox">
<i></i>
<span>一次消费会员</span>
<h2>600</h2>
</div>
<img class="t_r_line" src="img/right_line.png" alt="">
</div>
<div class="t_center_box">
<div class="t_top_box">
<img class="t_l_line" src="img/left_line.png" alt="">
<ul class="t_nav">
<li>
<span>设备数</span>
<h1>500</h1>
<i></i>
</li>
<li>
<span>上月设备增加数</span>
<h1>30</h1>
<i></i>
</li>
<li>
<span>增值率</span>
<h1>75%</h1>
</li>
</ul>
<img class="t_r_line" src="img/right_line.png" alt="">
</div>
<div class="t_bottom_box">
<img class="t_l_line" src="img/left_line.png" alt="">
<div id="chart_3" class="echart" style="width: 100%; height: 3.6rem;"></div>
<img class="t_r_line" src="img/right_line.png" alt="">
</div>
</div>
下载链接
设备监测、环境监测、终端监测大屏展示模板