主题:大数据可视化大屏
开发技术:
Echarts+html+css+js
支持平台:
dw,vscode,webstorm,idea,Hbuilderx等
源码:文末附
如需定制开发大屏,可在公众号内联系作者
整体效果
部分js代码
<div class="container m-20"> <div class="row"> <div class="col-lg-3"> <div class="box1"> <div class="title">标题标题</div> <div class="box1_con" id="box1"></div> </div> <div class="box2 m-20"> <div class="title">标题标题</div> <div class="box2_con" id="box2"></div> </div> </div> <div class="col-lg-6"> <div class="box3"> <div class="title">标题标题</div> <div class="box3_con"> <div class="box3_con_left" id="box3_left"></div> <div class="box3_con_right"> <div class="box3_con_right_top"> <div class="row"> <div class="col-lg-4 data_bg"><p>12569台</p><small>设备总数</small></div> <div class="col-lg-4 data_bg"><p>12375台</p><small>运行设备</small></div> <div class="col-lg-4 data_bg"><p>178台</p><small>月修设备</small></div> </div> </div> <div class="box3_con_right_bot" id="box3_right"></div> </div> </div> </div> <div class="box4 m-20"> <div class="title">标题标题</div> <div class="box4_con" id="box4"></div> </div> </div> <div class="col-lg-3 box5"> <div class="title">标题标题</div> <div class="box5_con"> <div class="box5_con_top" id="box5"></div> <div class="title m-20">标题标题</div> <div class="box5_con_bot">
部分CSS代码
.title{width: 100%; height: 60px; font-size: 20px; color: #ff9000; line-height: 60px; padding-left: 20px; background: url(../img/title_icon.png) left center no-repeat; float: left;} .box1{width: 455px; height: 400px; padding: 0 0 25px 25px; background: url(../img/bg_box1.png) no-repeat; float: left;} .box1_con{width: 455px; height: 340px; float: left;} .box2{width: 455px; height: 537px; padding: 0 0 25px 25px; background: url(../img/bg_box2.png) no-repeat; float: left;} .box2_con{width: 455px; height: 500px; float: left;} .box3{width: 950px; height: 500px; padding: 0 25px 25px 25px; background: url(../img/bg_box3.png) no-repeat; float: left;} .box3_con{width: 950px; height: 470px; float: left;} .box3_con .box3_con_left{width: 270px; height: 380px; float: left; margin-top: 30px;} .box3_con .box3_con_right{width: 680px; height: 470px; float: left;} .box3_con_right .box3_con_right_top{width: 680px; height: 120px;} .box3_con_right .box3_con_right_bot{width: 630px; height: 270px; margin-top: 30px;} .data_bg{width: 180px; height: 120px; background: url(../img/data_icon.png) no-repeat; margin-left: 30px; text-align: center; font-size: 24px; color: #FFFFFF; padding-top: 20px;} small{font-size: 18px; color: #FF9000;} .box4{width: 950px; height: 435px; padding: 0 25px 25px 25px; background: url(../img/bg_box4.png) no-repeat; float: left;} .box4_con{width: 950px; height: 370px; float: left;} .box5{width: 455px; height: 957px; padding: 0 25px 25px 25px; background: url(../img/bg_box5.png) no-repeat; float: right; }
想要源码的小伙伴们，请关注公众号Echarts技术专家，点击获取资源。
