基于Echarts+HTML5可视化数据大屏展示—新能源车联网综合大数据平台

🍅 作者主页: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套》

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/561917.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于Echarts+HTML5可视化数据大屏展示—大屏数据统计

&#x1f345; 作者主页&#xff1a;Java李杨勇 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我&#xff0c;都给你】 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f…

基于Echarts+HTML5可视化数据大屏展示—大数据统计展示大屏

&#x1f345; 作者主页&#xff1a;Java李杨勇 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我&#xff0c;都给你】 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f…

基于Echarts+HTML5可视化数据大屏展示—大数据运维总览图

&#x1f345; 作者主页&#xff1a;Java李杨勇 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我&#xff0c;都给你】 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f…

基于Echarts+HTML5可视化数据大屏展示—物联网平台数据统计平台

&#x1f345; 作者主页&#xff1a;Java李杨勇 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我&#xff0c;都给你】 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f…

windos 2008安装php5.3,windows 2008 + php 5.3.29配置

windows 2008 php的教程网上一大堆&#xff0c;也很详细&#xff0c;主要步骤就是配置IIS&#xff0c;配置PHP环境。参照下面这两篇文章把IIS和PHP安装好。http://www.phpabc.cn/win2008r2-iis7-php5-fastcgi-mysql5-install-howto.html一、环境说明&#xff1a;操作系统&…

基于Echarts+HTML5可视化数据大屏展示—运营大数据平台

&#x1f345; 作者主页&#xff1a;Java李杨勇 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我&#xff0c;都给你】 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f…

基于Echarts+HTML5可视化数据大屏展示—设备环境监测平台大数据平台

&#x1f345; 作者主页&#xff1a;Java李杨勇 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我&#xff0c;都给你】 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f…

基于Echarts+HTML5可视化数据大屏展示—企业生产销售作战指挥室数据平台

&#x1f345; 作者主页&#xff1a;Java李杨勇 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我&#xff0c;都给你】 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f…

基于Echarts+HTML5可视化数据大屏展示—大数据智慧数据平台

&#x1f345; 作者主页&#xff1a;Java李杨勇 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我&#xff0c;都给你】 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f…

基于Echarts+HTML5可视化数据大屏展示—新能源车联网综合大数据平台(二)

&#x1f345; 作者主页&#xff1a;Java李杨勇 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我&#xff0c;都给你】 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f…

linux lanmp 安装教程,Linux 安装 lanmp

Lanmp介绍lanmp一键安装包是wdlinux官网2010年底开始推出的web应用环境的快速简易安装包.执行一个脚本&#xff0c;整个环境就安装完成就可使用&#xff0c;快速,方便易用,安全稳定lanmp一键安装包是用shell脚本编写,且是开源的,你也可以根据业务需求,做相应的调整,来安装自己所…

基于Echarts+HTML5可视化数据大屏展示—交通大数据分析平台

&#x1f345; 作者主页&#xff1a;Java李杨勇 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我&#xff0c;都给你】 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f…

linux脚本安装gcc,在Linux系统下不需要编译安装GCC9,有仓库安装模板脚本

本文给出[安装GCC9]仓库安装模板脚本&#xff0c;在Linux系统可以编译安装GCC9&#xff0c;但很多编译安装的应用&#xff0c;有难度。复制以下代码&#xff0c;把它们保存到文本&#xff0c;然后给可执行权限&#xff0c;双击&#xff0c;终端运行&#xff0c;应为需要输入用户…

基于Echarts+HTML5可视化数据大屏展示—某省物流大数据平台

&#x1f345; 作者主页&#xff1a;Java李杨勇 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我&#xff0c;都给你】 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f…

基于Echarts+HTML5可视化数据大屏展示—北斗车联网大数据平台

&#x1f345; 作者主页&#xff1a;Java李杨勇 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我&#xff0c;都给你】 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f…

基于Echarts+HTML5可视化数据大屏展示—Echart图例使用

&#x1f345; 作者主页&#xff1a;Java李杨勇 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我&#xff0c;都给你】 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f…

linux如何卸载conky,Linux Deepin 15.10.2 下折腾 简单自制的 Conky Conky-manager

前言Conky是Linux下的桌面美化工具&#xff0c;可以把一些系统信息&#xff0c;以各种酷炫的形式&#xff0c;显示到你的桌面上。很久以前在Ubunut折腾过&#xff0c;最近把工作开发环境切换到了Deepin 15.10.2&#xff0c;打算再从零折腾一次Conky一、安装由于新版Deepin商店还…

基于Echarts+HTML5可视化数据大屏展示—设备管理大数据平台

&#x1f345; 作者主页&#xff1a;Java李杨勇 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我&#xff0c;都给你】 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f…

linux 下i2c读写命令,S3C2440 Linux下的I2C驱动以及I2C体系下对EEPROM进行读写操作

成员。我们可以看到消息结构体里面有从设备地址&#xff0c;读写标志&#xff0c;数据长度以及存储数据buf。这些成员我们看完之后会发现它大致符合先给设备地址&#xff0c;然后给写信号以及数据的时序。其实但我们写代码的时候并不一定是addr非得定义在flags前面&#xff0c;…

基于Echarts+HTML5可视化数据大屏展示—电子商务公共服务平台大数据中心

&#x1f345; 作者主页&#xff1a;Java李杨勇 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java李阳勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我&#xff0c;都给你】 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f…