主题:数据共享平台
开发技术:
Echarts+html+css+js
支持:
dw,vscode,webstorm,idea,Hbuilderx等
源码:文末附
部分js代码
<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/js.js"></script> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="head clearfix"> <div class="home"><a href="#"><img src="images/Home.png" width="28"> <i> 首页</i></a></div> <div class="menu menu1 pulll_left"> <ul> <li><a href="#">功能菜单一 </a></li> <li><a href="#">功能菜单二</a></li> </ul> </div> <h1 class="pulll_left">公司名称有限公司大数据监控平台</h1> <div class="menu menu2 pulll_left"> <ul> <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); //设定定时器，循环运行 } (function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define(['exports', 'echarts'], factory); } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') { // CommonJS factory(exports, require('echarts')); } else { // Browser globals factory({}, root.echarts); } }(this, function (exports, echarts) { var log = function (msg) { if (typeof console !== 'undefined') { console && console.error && console.error(msg); } } if (!echarts) { log('ECharts is not Loaded'); return; } if (!echarts.registerMap) { log('ECharts Map is not loaded') return; }
部分css代码
*{ box-sizing: border-box; box-sizing: border-box; box-sizing: border-box} *,body{padding:0px; margin:0px;font-family: "微软雅黑";} body{color:#fff;font-size: 16px; background: #033c76;} li{ list-style-type:none;} table{} i{ margin:0px; padding:0px; text-indent:0px;} img{ border:none; max-width: 100%;} a{ text-decoration:none; color:#fff;} a.active,a:focus{ outline:none!important; text-decoration:none;} ol,ul,p,h1,h2,h3,h4,h5,h6{ padding:0; margin:0} a:hover{ color:#06c; text-decoration: none!important} .clearfix:after, .clearfix:before { display: table; content: " " } .clearfix:after { clear: both } .pulll_left{float:left;} .pulll_right{float:right;} i{font-style: normal;} .head{position: relative; height: 90px; margin: 0 15px; padding-right: 60px;} .head h1{ width: 44%; font-size: 32px; text-align: center; line-height: 90px; color: #daf9ff; font-weight: bolder;} .head .menu{ width: 28%} .head .menu ul{ font-size: 0;} .head .menu1 ul{text-align: right} .head .menu2 ul{text-align: left} .head .menu li{ display: inline-block; position: relative;margin: 25px 15px;} .head .menu li a{ display: block; font-size: 14px; color: #fff; line-height: 40px; padding: 0 15px; } .head .home{position: absolute; left: 0; line-height: 90px;} .head .home a *{display: inline-block; vertical-align: middle;} .head .time{position: absolute; right: 0; line-height: 90px;}
想要源码的小伙伴们，请关注公众号Echarts技术专家，点击获取资源。
