主题:数据可视化大屏通用模板
开发技术:
Echarts+html+css+js
支持平台:
dw,vscode,webstorm,idea,Hbuilderx等
源码:文末附
整体效果
部分js代码
<div class="loading"> <div class="loadbox"> <img src="images/loading.gif"> 页面加载中 </div> </div> <div class="head"> <h1>大数据可视化系统数据分析通用模版</h1> <div class="time" id="showTime">2019/12/05 16:16:54</div> <script> var t = null; t = setTimeout(time,1000);//開始运行 function time() { clearTimeout(t);//清除定时器 dt = new Date(); var y=dt.getFullYear(); var mt=dt.getMonth()+1; var day=dt.getDate(); var h=dt.getHours();//获取时 var m=dt.getMinutes();//获取分 var s=dt.getSeconds();//获取秒 var t = null; document.getElementById("showTime").innerHTML = y+"/"+Appendzero(mt)+"/"+Appendzero(day)+" "+Appendzero(h)+":"+Appendzero(m)+":"+Appendzero(s)+""; function Appendzero(obj){ if(obj<10) return "0" +""+ obj; else return obj; } t = setTimeout(time,1000); //设定定时器，循环运行 } </script> </div> <div class="mainbox"> <ul class="clearfix"> <li> <div class="boxall" style="height: calc(58% - .15rem)"> <div class="alltitle">标题名称</div> <div class=" boxnav " id="echarts4"> </div> </div> <div class="boxall" style="height: calc(42% - .15rem)"> <div class="alltitle">标题名称</div> <div class="boxnav" id="echarts3"></div> </div> </li> <li> <div class="boxall" style="height: calc(20% - .15rem)"> <ul class="row h100 clearfix"> <li class="col-6"> <div class="sqzs h100"> <p>业绩总览</p> <h1><span>30500</span>万</h1> </div>
部分css代码
.boxall{ padding:0 .2rem .2rem .2rem; background: rgba(6,48,109,.5); position: relative; margin-bottom: .15rem; z-index: 10; } .alltitle{ font-size:.2rem; color:#fff; line-height: .5rem; position: relative;padding-left: .15rem} .alltitle:before{position: absolute; height: .2rem; width: 4px; background: #49bcf7; border-radius: 5px; content: ""; left: 0; top: 50%; margin-top: -.1rem;} .boxnav{height: calc(100% - .5rem);} .row>li{ float: left; height: 100%;} .col-6{width: 50%;} .col-3{width: 25%;} .col-4{width: 33.33333%;} .h100{height: 100%;} .tit01{ text-align: center; color: white; font-size: .16rem; padding: .3rem 0 .02rem 0;} .piebox{ height: calc(100% - .5rem); position: relative;} .piebox:before{ width:.6rem; height:.6rem; content: ""; border: 1px solid #49bcf7; border-radius: 1rem; position: absolute; left:50%; top: 50%; margin-left: -.31rem; margin-top: -.31rem; opacity: .7;} .sqzs{margin-right: .2rem;} .sqzs p{ padding: .2rem 0 .1rem 0; font-size: .22rem;} .sqzs h1{height: calc(100% - .65rem); border-bottom: 1px solid rgba(255,255,255,.1); border-top: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; color: #fef000;font-weight: normal; letter-spacing: 2px; font-size: .5rem; justify-content: center;padding-bottom: .05rem;} .sqzs h1 span{ font-size: .8rem; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; } table{ width: 100%; text-align: center;} table th{ font-size: .16rem; background: rgba(0,0,0,.1);} table td{ font-size: .16rem; color: rgba(255,255,255,.6);} table th,table td{ border-bottom:1px solid rgba(255,255,255,.1); padding: .1rem 0;}
想要源码的小伙伴们，请关注公众号Echarts技术专家，点击获取资源。
