主题:数字化大屏
开发技术:
Echarts+html+css+js
支持平台:
dw,vscode,webstorm,idea,Hbuilderx等
源码:文末附
整体效果
部分js代码
<meta charset="utf-8"> <title>index</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/echarts.min.js"></script> <script type="text/javascript" src="js/china.js"></script> <script type="text/javascript" src="js/map.js"></script> <script type="text/javascript" src="js/js.js"></script> <script type="text/javascript" src="js/Bubble.js"></script> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="head clearfix"> <h1 class="pulll_left">某公司大数据监控平台</h1> <div class="menu menu2 pulll_left"> <ul> <li><a href="#">标题样式</a></li> <li><a href="#">标题样式</a></li> <li><a href="#">标题样式</a></li> <li><a href="#">标题样式</a></li> <li><a href="#">标题样式</a></li> <li><a href="#">标题样式</a></li> </ul> </div> <div class="time" id="showTime">2018/6/12 17:00:12</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();//获取秒 document.getElementById("showTime").innerHTML = y+"/"+mt+"/"+day+" "+h+":"+m+":"+s+""; t = setTimeout(time,1000); //设定定时器，循环运行 } </script> </div> <div class="mainbox"> <ul class="clearfix nav1"> <li style="width: 22%"> <div class="box"> <div class="tit">版块标题1</div> <div class="boxnav" style="height: 200px;"> <table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <th>业务类型</th> <th>计划完成</th> <th>实际完成</th> <th>增长率</th>
.head{position: relative; height: 90px; margin: 0 15px; padding-right: 60px;} .head h1{ font-size: 30px; letter-spacing: -2px; text-align: center; line-height: 90px; padding-right: 55px; color: #daf9ff;} .head .menu{} .head .menu ul{ font-size: 0;} .head .menu li{ display: inline-block; position: relative;margin: 25px 15px;;} .head .menu li a{ display: block; font-size: 18px; color: #fff; line-height: 40px; padding: 0 15px; } .head .time{position: absolute; right: 0; line-height: 90px;} .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;}
想要源码的小伙伴们，请关注公众号Echarts技术专家，点击获取资源。
