HTML+CSS+JS数据可视化大屏平台模板实例23-智慧车联网_python做大屏数据可视化资源-CSDN文库

共13个文件

js：4个

png：4个

css：2个

版权申诉

数据可视化大屏

99 浏览量 2022-03-25 09:23:47 上传评论收藏 582KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

HTML+CSS+JS数据可视化大屏平台模板实例23-智慧车联网.rar （13个子文件）

HTML+CSS+JS数据可视化大屏平台模板实例23-智慧车联网

新能源车联网综合大数据平台_files

info-img-4.png 4KB

echarts.js 43KB

china.js 60KB

info-img-3.png 3KB

map.css 4KB

common.css 1KB

echarts.min.js 691KB

info-img-2.png 5KB

jquery-2.1.1.min.js 82KB

info-img-1.png 3KB

loading.gif 701B

新能源车联网综合大数据平台.html 9KB

HTML+CSS+JS数据可视化大屏平台模板实例23-智慧车联网.JPG 287KB

<!DOCTYPE html>  <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>新能源车联网综合大数据平台</title> <script src="./新能源车联网综合大数据平台_files/jquery-2.1.1.min.js"></script><style type="text/css"></style> <script> $(window).load(function(){ $(".loading").fadeOut() }) </script> <link rel="stylesheet" href="./新能源车联网综合大数据平台_files/common.css"> <link rel="stylesheet" href="./新能源车联网综合大数据平台_files/map.css"> </head> <body> <div class="loading" style="display: none;"> <div class="loadbox"> <img src="./新能源车联网综合大数据平台_files/loading.gif"> 页面加载中... </div> </div> <div class="data"> <div class="data-title"> <div class="title-center ">数据概览演示案例</div> </div> <div class="data-content"> <div class="con-left fl"> <div class="left-top"> <div class="info boxstyle"> <div class="title">实时统计</div> <div class="info-main"> <ul> <li><img src="./新能源车联网综合大数据平台_files/info-img-1.png" alt=""><span>车辆总数(辆)</span><p>12,457</p></li> <li><img src="./新能源车联网综合大数据平台_files/info-img-2.png" alt=""><span>当前在线数(辆)</span><p>12,457</p></li> <li><img src="./新能源车联网综合大数据平台_files/info-img-3.png" alt=""><span>今日活跃数(辆)</span><p>12,457</p></li> <li><img src="./新能源车联网综合大数据平台_files/info-img-4.png" alt=""><span>今日活跃率(%)</span><p>74%</p></li> </ul> </div> </div> <div class="top-bottom boxstyle"> <div class="title">行业分类</div> <div id="echarts_1" class="charts" _echarts_instance_="ec_1648170699824" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;"><div style="position: relative; overflow: hidden; width: 288px; height: 58px; padding: 0px; margin: 0px; border-width: 0px;"><canvas data-zr-dom-id="zr_0" width="432" height="87" style="position: absolute; left: 0px; top: 0px; width: 288px; height: 58px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div></div></div> </div> </div> <div class="left-bottom boxstyle"> <div class="title">车型分类</div> <div id="echarts_2" class="charts" _echarts_instance_="ec_1648170699825" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;"><div style="position: relative; overflow: hidden; width: 288px; height: 69px; padding: 0px; margin: 0px; border-width: 0px;"><canvas data-zr-dom-id="zr_0" width="432" height="103" style="position: absolute; left: 0px; top: 0px; width: 288px; height: 69px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div></div></div> </div> </div> <div class="con-center fl"> <div class="map-num"> <p>实时行驶车辆(辆)</p> <div class="num"> <span>1</span> <span>5</span> <span>4</span> <span>9</span> <span>2</span> <span>6</span> <span>8</span> </div> </div> <div class="cen-top map" id="map" _echarts_instance_="ec_1648170699826" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;"><div style="position: relative; overflow: hidden; width: 619px; height: 298px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="928" height="447" style="position: absolute; left: 0px; top: 0px; width: 619px; height: 298px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas><canvas data-zr-dom-id="zr_1" width="928" height="447" style="position: absolute; left: 0px; top: 0px; width: 619px; height: 298px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div></div></div> <div class="cen-bottom boxstyle"> <div class="title">车辆充电高峰时间</div> <div id="echarts_3" class="charts" _echarts_instance_="ec_1648170699827" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;"><div style="position: relative; overflow: hidden; width: 617px; height: 69px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="925" height="103" style="position: absolute; left: 0px; top: 0px; width: 617px; height: 69px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px / 21px "Microsoft YaHei"; padding: 5px; left: 502px; top: -66px;">星期天<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#a4d8cc;"></span>540</div></div> </div> </div> <div class="con-right fr"> <div class="right-top boxstyle"> <div class="title">本月行驶里程TOP5</div> <div id="echarts_4" class="charts" _echarts_instance_="ec_1648170699828" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;"><div style="position: relative; overflow: hidden; width: 288px; height: 103px; padding: 0px; margin: 0px; border-width: 0px;"><canvas data-zr-dom-id="zr_0" width="432" height="154" style="position: absolute; left: 0px; top: 0px; width: 288px; height: 103px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div></div></div> </div> <div class="right-center boxstyle"> <div class="title">报警车辆TOP5</div> <div id="echarts_5" class="charts" _echarts_instance_="ec_1648170699829" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;"><div style="position: relative; overflow: hidden; width: 288px; height: 80px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="432" height="120" style="position: absolute; left: 0px; top: 0px; width: 288px; height: 80px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas><canvas data-zr-dom-id="zr_1" width="432" height="120" style="position: absolute; left: 0px; top: 0px; width: 288px; height: 80px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas><canvas data-zr-dom-id="zr_2" width="432" height="120" style="position: absolute; left: 0px; top: 0px; width: 288px; height: 80px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div></div></div> </div> <div class="right-bottom boxstyle"> <div class="title">电池报警车辆TOP1

评论收藏

内容反馈

版权申诉