主题:智慧社区可视化大屏
开发技术:
Echarts+html+css+js
支持平台:
dw,vscode,webstorm,idea,Hbuilderx等
源码:文末附
如需定制开发大屏,可在公众号内联系作者
整体效果
部分js代码
<div class="top_box_right"> <div class="p2_rT"> <span class="j_1"></span> <span class="j_2"></span> <span class="j_3"></span> <span class="j_4"></span> <div class="title"><img src="img/page2/icon3.png" />社区概览</div> <div class="data_sqgl"> <div class="data_box"> <font class="font shenlan" face="font01">10025</font><span>人</span> <div class="data_title2">社区实有人口</div> </div> <div class="data_box"> <font class="font zise" face="font01">8962</font><span>个</span> <div class="data_title2">户籍人口总数</div> </div> </div> <span class="line"></span> <div class="data_sqgl"> <div class="data_box"> <font class="font qianlan" face="font01">10025</font><span>人</span> <div class="data_title2">暂住证未办理人数</div> </div> <div class="data_box"> <font class="font huangse" face="font01">8962</font><span>个</span> <div class="data_title2">持有暂住证人数</div> </div> </div> <ul class="home_data2"> <li class="home_data_one"> <div class="home_data_num"> <font class="font1 shenlan" face="font01">456</font> <span>户</span> </div> <div class="home_data_name">流动人口</div> </li> </ul> <ul class="home_data2"> <li class="home_data_two"> <div class="home_data_num"> <font class="font1 qianlan" face="font01">456</font> <span>户</span> </div> <div class="home_data_name">特殊人群</div> </li> </ul> </div> </div>
部分CSS代码
/*中间*/ .center_bottom{ margin-top: 1.2rem; width: 100%; height: 340px; border: #1a3f72 solid 2px; background: rgba(41,85,252,.2); position: relative; box-sizing: border-box;} .main_right{ width: 23.7%; height: 100%; float: right;} .right_top{ width: 100%; height: 200px; border: #1a3f72 solid 2px; background: rgba(41,85,252,.2); position: relative; box-sizing: border-box;} .right_bottom{ margin-top: 1.2rem; width: 100%; height: 740px; border: #1a3f72 solid 2px; background: rgba(41,85,252,.2); position: relative; box-sizing: border-box;} .top_box{ width: 100%; height: 730px;} .top_box_left{ width: 50%; height: 100%; border: #1a3f72 solid 2px; background: rgba(41,85,252,.2); position: relative; box-sizing: border-box; float: left;} .top_box_center{ width: 22.7%; height: 100%; float: left; margin: 0 1.5rem 0 1.5rem;} .p2_cT{ width: 100%; height: 49.5%; border: #1a3f72 solid 2px; background: rgba(41,85,252,.2); position: relative; box-sizing: border-box; margin-bottom: 25px;} .p2_cB{ width: 100%; height: 46.9%; border: #1a3f72 solid 2px; background: rgba(41,85,252,.2); position: relative; box-sizing: border-box;} .top_box_right{ width: 24.7%; height: 100%; float: left;} .p2_rT{ width: 100%; height: 75.2%; border: #1a3f72 solid 2px; background: rgba(41,85,252,.2); position: relative; box-sizing: border-box; margin-bottom: 25px;}
想要源码的小伙伴们，请关注公众号Echarts技术专家，点击获取资源。
