主题:数字化大屏
开发技术:
Echarts+html+css+js
支持平台:
dw,vscode,webstorm,idea,Hbuilderx等
源码:文末附
部分js代码
主题:数字化大屏 开发技术: Echarts+html+css+js 支持平台: dw,vscode,webstorm,idea,Hbuilderx等 源码:文末附 整体效果 图片 部分js代码 <ul class="clearfix nav1"> <li style="width: 22%"> <div class="box"> <div class="tit">模块标题</div> <div class="boxnav" style="height: 330px;"> <div class="yqlist"> <ul class="clearfix"> <li> <div class="yq" id="yq">2634</div> <span>销售总数(1)</span></li> <li> <div class="yq">567</div> <span>数据展示(2)</span></li> <li> <div class="yq">56345</div> <span>数据展示(3)</span></li> <li> <div class="yq">721</div> <span>数据展示(4)</span></li> </ul> </div> </div> </div> <div class="box"> <div class="tit">模块标题</div> <div class="boxnav" style="height: ;"> <div class="" style="height: 406px" id="echart2"></div> </div> </div> </li> <li style="width: 56%"> <div class="box"> <div class="boxnav mapc" style="height: 550px; position: relative"> <div class="map" id="map"></div> </div> </div> <div class="box"> <div class="tit">模块标题</div> <div class="boxnav" style="height: 250px;" id="echart3"> </div> </div> </li> <li style="width: 22%"> <div class="box"> <div class="tit">模块标题</div> <div class="boxnav" id="echart4" style="height: 200px;"> </div> </div> <div class="box"> <div class="tit">模块标题</div> <div class="boxnav" style="height: 250px;" id="echart5" >
部分css代码
.head .menu li{ display: inline-block; position: relative;margin: 30px 15px;;} .head .menu li a{ display: block; font-size: 18px; color: #fff; line-height: 30px; padding: 0 10px; } .head .time{position: absolute; right: 0; line-height: 90px; top: 0;} .menu li:before, .menu li:after{ position:absolute; width:10px; height:5px;opacity: .4; content: ""; border-top: 2px solid #02a6b5; top: -1px;border-radius: 2px;} .menu li:before,.menu li a:before{border-left: 2px solid #02a6b5;left: -1px;} .menu li:after,.menu li a:after{border-right: 2px solid #02a6b5; right: -1px;} .menu li a{ position:relative;} .menu li a:before, .menu li a:after{ position:absolute; width:10px; height:5px; opacity: .4; content: "";border-bottom: 2px solid #02a6b5; bottom:-1px;border-radius: 2px;} .head .menu li a:hover{ color: #f4e925;} .menu li a:hover:before, .menu li a:hover:after, .menu li:hover:before, .menu li:hover:after{border-color: #f4e925; opacity: 1;}
想要源码的小伙伴们，请关注公众号Echarts技术专家，点击获取资源。
