🍅 作者主页:Java李杨勇
🍅 简介:Java领域优质创作者🏆、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我,都给你】
🍅 欢迎点赞 👍 收藏 ⭐留言 📝
动图演示: 文末获取源码
代码目录:
主要代码实现:
主页HTML布局:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>新能源车联网综合大数据平台</title><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/map.css">
</head>
<body>
<div class="data"><div class="data-title"><div class="title-left fl"></div><div class="title-center fl"></div><div class="title-right fr"></div></div><div class="data-content"><div class="con-left fl"><div class="left-top"><div class="info"><div class="info-title">实时统计</div><img src="img/bj-1.png" alt="" class="bj-1"><img src="img/bj-2.png" alt="" class="bj-2"><img src="img/bj-3.png" alt="" class="bj-3"><img src="img/bj-4.png" alt="" class="bj-4"><div class="info-main"><div class="info-1"><div class="info-img fl"><img src="img/info-img-1.png" alt=""></div><div class="info-text fl"><p>车辆总数(辆)</p><p>12,457</p></div></div><div class="info-2"><div class="info-img fl"><img src="img/info-img-2.png" alt=""></div><div class="info-text fl"><p>当前在线数(辆)</p><p>12,457</p></div></div><div class="info-3"><div class="info-img fl"><img src="img/info-img-3.png" alt=""></div><div class="info-text fl"><p>今日活跃数(辆)</p><p>12,457</p></div></div><div class="info-4"><div class="info-img fl"><img src="img/info-img-4.png" alt=""></div><div class="info-text fl"><p>今日活跃率(%)</p><p>83</p></div></div></div></div><div class="top-bottom"><div class="title">行业分类</div><img src="img/bj-1.png" alt="" class="bj-1"><img src="img/bj-2.png" alt="" class="bj-2"><img src="img/bj-3.png" alt="" class="bj-3"><img src="img/bj-4.png" alt="" class="bj-4"><div id="echarts_1" class="charts"></div></div></div><div class="left-bottom"><div class="title">车型分类</div><img src="img/bj-1.png" alt="" class="bj-1"><img src="img/bj-2.png" alt="" class="bj-2"><img src="img/bj-3.png" alt="" class="bj-3"><img src="img/bj-4.png" alt="" class="bj-4"><div id="echarts_2" class="charts"></div></div></div><div class="con-center fl"><div class="map-num"><p>实时行驶车辆(辆)</p><div class="num"><span>1</span><span>,</span><span>2</span><span>3</span><span>4</span><span>,</span><span>5</span><span>6</span><span>7</span></div></div><div class="cen-top" id="map"></div><div class="cen-bottom"><div class="title">车辆充电高峰时间</div><img src="img/bj-1.png" alt="" class="bj-1"><img src="img/bj-2.png" alt="" class="bj-2"><img src="img/bj-3.png" alt="" class="bj-3"><img src="img/bj-4.png" alt="" class="bj-4"><div id="echarts_3" class="charts"></div></div></div><div class="con-right fr"><div class="right-top"><div class="title">本月行驶里程TOP5</div><img src="img/bj-1.png" alt="" class="bj-1"><img src="img/bj-2.png" alt="" class="bj-2"><img src="img/bj-3.png" alt="" class="bj-3"><img src="img/bj-4.png" alt="" class="bj-4"><div id="echarts_4" class="charts"></div></div><div class="right-center"><div class="title">报警车辆TOP5</div><img src="img/bj-1.png" alt="" class="bj-1"><img src="img/bj-2.png" alt="" class="bj-2"><img src="img/bj-3.png" alt="" class="bj-3"><img src="img/bj-4.png" alt="" class="bj-4"><div id="echarts_5" class="charts"></div></div><div class="right-bottom"><div class="title">电池报警车辆TOP10</div><img src="img/bj-1.png" alt="" class="bj-1"><img src="img/bj-2.png" alt="" class="bj-2"><img src="img/bj-3.png" alt="" class="bj-3"><img src="img/bj-4.png" alt="" class="bj-4"><div id="echarts_6" class="charts"></div></div></div></div>
</div></body>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/china.js"></script>
<script src="js/echarts.js"></script>
</html>
CSS样式文件
/*css 初始化 */
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {margin: 0;padding: 0;
}/*将标签原有的默认内外边距去掉*/fieldset, img, input, button {border: none; /*去掉边框*/padding: 0;margin: 0;outline-style: none; /*去掉环绕边框*/
}ul, ol {list-style: none; /*去掉原样式中的小黑点*//*ctrl+alt+l*/
}input {padding-top: 0;padding-bottom: 0;}select, input {vertical-align: middle; /*输入字居中显示*/
}select, input, textarea {font-size: 14px;margin: 0;
}/**/
textarea {resize: none; /*防止拖动*/
}img {border: 0;vertical-align: middle; /* 去掉图片底部默认的3像素空白缝隙*/
}table {border-collapse: collapse; /*合并外边线*/
}body {font-family: Microsoft YaHei, Arial, "\5b8b\4f53";
}.clearfix:before, .clearfix:after {content: "";display: table;
}.clearfix:after {clear: both;
}.clearfix {*zoom: 1; /*IE/7/6*//*兼容IE6下的写法*/
}h1, h2, h3, h4, h5, h6 {text-decoration: none; /**/font-weight: normal; /*不加粗*/font-size: 100%;
}
a{text-decoration: none;
}
s, i, em {/*一般起装饰作用*/font-style: normal; /*将字体变成正常字体*/text-decoration: none; /*去掉中划线*/
}
.fl{float: left;
}
.fr{float: right;
}
作品来自于网络收集、侵权立删
上面的图片文件以及js文件等需要引入进来
源码获取
大家点赞、收藏、关注、评论啦 、查看👇🏻👇🏻👇🏻微信公众号获取👇🏻👇🏻👇🏻
打卡 文章 更新 58/ 100天
专栏推荐阅读:
ECharts+HTML5大数据模板《100套》
HTML5大作业实战案例《100套》
Java毕设项目精品实战案例《100套》