详细介绍：基于Echarts+HTML5可视化数据大屏展示-车辆综合管控平台
效果展示：
代码结构：
主要代码实现
index.html布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>车辆综合管控平台</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/style2.0.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
$(function () {
$('.myscroll').myScroll({
speed: 60, //数值越大，速度越慢
rowHeight: 38 //li的高度
});
})
</script>
</head>
<body>
<!--头部-->
<header id="header">
<div class="header">
<h1 class=""><a href="https://gitee.com/iGaoWei/big-data-view" style="color: white">车辆综合管控平台</a></h1>
</div>
</header>
<!--内容-->
<section id="data_content">
<div class="data_info">
<div class="info_1 fl">
<div class="text_1">
<div class="fl">
<img src="images/info_1.png" alt="更多资源：https://gitee.com/iGaoWei/big-data-view">
<div class="fl count">
<p>车辆总数(辆)</p>
<p class="conuts">46625</p>
</div>
</div>
<div class="fl">
<img src="images/info_2.png" alt="更多资源：https://gitee.com/iGaoWei/big-data-view">
<div class="fl count">
<p>车辆总数(辆)</p>
<p class="conuts">46625</p>
</div>
</div>
<div class="fl">
<img src="images/info_3.png" alt="更多资源：https://gitee.com/iGaoWei/big-data-view">
<div class="fl count">
<p>车辆总数(辆)</p>
<p class="conuts">46625</p>
</div>
</div>
</div>
</div>
<div class="info_2 fl">
<div class="text_2">
<div class="fl">
<img src="images/info_4.png" alt="更多资源：https://gitee.com/iGaoWei/big-data-view">
<div class="fl count">
<p>车辆总数(辆)</p>
<p class="conuts">46625</p>
</div>
</div>
<div class="fl">
<img src="images/info_5.png" alt="更多资源：https://gitee.com/iGaoWei/big-data-view">
<div class="fl count">
<p>车辆总数(辆)</p>
<p class="conuts">46625</p>
</div>
</div>
</div>
</div>
<div class="info_3 fr">
<div class="text_2">
<div class="fl">
<img src="images/info_6.png" alt="更多资源：https://gitee.com/iGaoWei/big-data-view">
<div class="fl count">
<p>车辆总数(辆)</p>
<p class="conuts">46625</p>
</div>
</div>
<div class="fl">
<img src="images/info_7.png" alt="更多资源：https://gitee.com/iGaoWei/big-data-view">
<div class="fl count">
<p>车辆总数(辆)</p>
<p class="conuts">46625</p>
</div>
</div>
</div>
</div>
</div>
<div class="data_content">
<!--左边-->
<div class="data_left fl">
<div class="left_top">
<!--/*左边第一部分*/-->
<div class="info public">
<div class="min-title">
<span>车辆总数</span>
</div>
<div id="char4" style="width:100%;height: 100%;"></div>
<div class="boxfoot"></div>
</div>
<!--左边第二部分-->
<div class="top_bottom public">
<div class="min-title">
<span>车辆类型</span>
</div>
<div id="echarts_1" style="width:100%;height: 100%;"></div>
<div class="boxfoot"></div>
</div>
<!--左边第三部分-->
<div class="left_bottom public">
<div class="min-title">
<span>车辆状态</span>
</div>
<div id="chart_2" style="width:100%;height: 100%;"></div>
<div class="boxfoot"></div>
</div>
</div>
</div>
<!--中间-->
<div class="data_c fl">
<div class="data_c_1">
<div id="contPar" class="contPar">
<div id="page1" style="z-index:1">
<div class="title0">车辆综合管控平台</div>
<div class="title1">旅游、交通、危险品、校车、大数据</div>
<div id="drag-container" style="z-index: 1">
<div id="spin-container">
<img alt="更多资源：https://gitee.com/iGaoWei/big-data-view" class="infoBtn" src="picture/page1_0.png">
<img alt="更多资源：https://gitee.com/iGaoWei/big-data-view" class="" src="picture/page1_1.png">
<img alt="更多资源：https://gitee.com/iGaoWei/big-data-view" class="" src="picture/page1_2.png">
<img alt="更多资源：https://gitee.com/iGaoWei/big-data-view" class="" src="picture/page1_1.png">
<img alt="更多资源：https://gitee.com/iGaoWei/big-data-view" class="" src="picture/page1_2.png">
</div>
<div id="ground"></div>
</div>
<img alt="更多资源：https://gitee.com/iGaoWei/big-data-view" class="img3 png" src="images/newdz.png" >
</div>
</div>
</div>
<div class="data_c_2 public">
<div id="echart4" style="width: 100%;height: 100%;padding-top: 10px;"></div>
<div class="boxfoot"></div>
</div>
</div>
<!--右边-->
<div class="data_right fr">
<div class="right_top">
<!--/*右边第一部分*/-->
<div class="right_info public">
<div class="min-title">
<span>收费站收费数量</span>
</div>
<div class="echart wenzi">
<div class="gun">
<span>小型车</span>
<span>中型车</span>
<span>大型车</span>
</div>
<div id="FontScroll" class="myscroll">
<ul>
<li>
<div class="fontInner clearfix">
<span >253万</span>
<span>65万</span>
<span>182万</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span >253万</span>
<span>65万</span>
<span>182万</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span >253万</span>
<span>65万</span>
<span>182万</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span >253万</span>
<span>65万</span>
<span>182万</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span >253万</span>
<span>65万</span>
<span>182万</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span >253万</span>
<span>65万</span>
<span>182万</span>
</div>
</li><li>
<div class="fontInner clearfix">
<span >253万</span>
<span>65万</span>
<span>182万</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span >253万</span>
<span>65万</span>
<span>182万</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span >253万</span>
<span>65万</span>
<span>182万</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span >253万</span>
<span>65万</span>
<span>182万</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span >253万</span>
<span>65万</span>
<span>182万</span>
</div>
</li>
</ul>
</div>
</div>
<div class="boxfoot"></div>
</div>
<!--右边第二部分-->
<div class="right_content public">
<div class="min-title">
<span>抓拍车辆</span>
</div>
<div id="chart_3" style="width:100%;height: 100%;"></div>
<div class="boxfoot"></div>
</div>
<!--右边第三部分-->
<div class="right_bottom public">
<div class="min-title">
<span>车辆类型</span>
</div>
<div id="echarts_2" style="width:100%;height: 100%;padding-top: 10px;"></div>
<div class="boxfoot"></div>
</div>
</div>
</div>
</div>
</section>
<script src="js/script.js"></script>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/echart.js"></script>
<!--<script type="text/javascript" src="js/com.js"></script>-->
<script src="js/index.js"></script>
<script src="js/fontscroll.js"></script>
</body>
</html>作品来自于网络收集、侵权立删
浙公网安备 33010602011771号