前言
🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。
本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
⚽精彩专栏推荐👇🏻👇🏻👇🏻
❤ 【150套 HTML+ Echarts大数据可视化源码 】
一、Echart是什么
ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
二、ECharts入门教程
三、作品演示
四、代码实现
1.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>大数据界面车辆监控HTML模板</title>
<link rel="stylesheet" href="css/base.css">
</head>
<body>
<!--顶部-->
<header class="header left">
<div class="left nav">
<ul>
<li class="nav_active"><i class="nav_1"></i><a href="index.html">数据概览</a></li>
<li><i class="nav_2"></i><a href="carContrl.html">车辆监控</a></li>
<li><i class="nav_3"></i><a href="map.html">地图界面</a></li>
</ul>
</div>
<div class="header_center left">
<h2><strong>智慧旅游综合服务平台</strong></h2>
<p class="color_font"><small>Comprehensive service platform for smart tourism</small></p>
</div>
<div class="right nav text_right">
<ul>
<li><i class="nav_7"></i><a href="static.html">查询统计</a></li>
<li><i class="nav_8"></i><a href="message.html">信息录入</a></li>
<li><i class="nav_4"></i><a href="table1.html">表格界面</a></li>
</ul>
</div>
<!--<nav class="left nav">-->
<!--<ul>-->
<!--<li class="nav_active"><i class="nav_1"></i><a href="index.html">数据概览</a></li>-->
<!--<li><i class="nav_2"></i><a href="carContrl.html">车辆监控</a></li>-->
<!--<li><i class="nav_3"></i><a href="map.html">地图界面</a></li>-->
<!--<li><i class="nav_4"></i><a href="javascript:void(0)">表格界面</a><ul class="li_ul">-->
<!--<li><a href="table1.html">表格一</a></li>-->
<!--<li><a href="table2.html">表格二</a></li>-->
<!--</ul></li>-->
<!--<!–<li><i class="nav_5"></i><a href="#">车载视频</a></li>–>-->
<!--<!–<li><i class="nav_6"></i><a href="#">视频监控</a></li>–>-->
<!--<li><i class="nav_7"></i><a href="static.html">查询统计</a></li>-->
<!--<li><i class="nav_8"></i><a href="message.html">信息录入</a></li>-->
<!--</ul>-->
<!--</nav>-->
</header>
<!--内容部分-->
<div class="con left">
<!--选择时间-->
<div class="select_time">
<div class="static_top left"><i></i><span>总体概况</span></div>
</div>
<!--数据总概-->
<div class="con_div">
<div class="con_div_text left">
<div class="con_div_text01 left"><img src="img/info_1.png" class="left text01_img" />
<div class="left text01_div">
<p>车辆总数(辆)</p>
<p>12356</p>
</div>
</div>
<div class="con_div_text01 right"><img src="img/info_2.png" class="left text01_img" />
<div class="left text01_div">
<p>车辆使用数(辆)</p>
<p>12356</p>
</div>
</div>
</div>
<div class="con_div_text left">
<div class="con_div_text01 left"><img src="img/info_4.png" class="left text01_img" />
<div class="left text01_div">
<p>行驶里程总数(km)</p>
<p class="sky">12356</p>
</div>
</div>
<div class="con_div_text01 right"><img src="img/info_5.png" class="left text01_img" />
<div class="left text01_div">
<p>行驶里程平均数(km)</p>
<p class="sky">12356</p>
</div>
</div>
</div>
<div class="con_div_text left">
<div class="con_div_text01 left"><img src="img/info_6.png" class="left text01_img" />
<div class="left text01_div">
<p>行驶时长总数(s)</p>
<p class="org">12356</p>
</div>
</div>
<div class="con_div_text01 right"><img src="img/info_7.png" class="left text01_img" />
<div class="left text01_div">
<p>行驶ihfj平均数(s)</p>
<p class="org">12356</p>
</div>
</div>
</div>
</div>
<!--统计分析图-->
<div class="div_any">
<div class="left div_any01">
<div class="div_any_child">
<div class="div_any_title"><img src="img/title_1.png">车辆类型统计</div>
<p id="char1" class="p_chart"></p>
</div>
<div class="div_any_child">
<div class="div_any_title"><img src="img/title_2.png">车辆状态统计</div>
<p id="char2" class="p_chart"></p>
</div>
</div>
<div class="div_any02 left ">
<div class="div_any_child div_height">
<div class="div_any_title any_title_width"><img src="img/title_3.png">车辆行驶地图</div>
<div id="map_div"></div>
</div>
</div>
<div class="right div_any01">
<div class="div_any_child">
<div class="div_any_title"><img src="img/title_4.png">车辆行驶统计</div>
<p id="char3" class="p_chart"></p>
</div>
<div class="div_any_child">
<div class="div_any_title"><img src="img/title_5.png">车辆报警统计</div>
<p id="char4" class="p_chart"></p>
</div>
</div>
</div>
<!--分析表格-->
<div class="div_table">
<div class="left div_table_box">
<div class="div_any_child">
<div class="div_any_title"><img src="img/title_4.png">行驶里程排名前5位</div>
<div class="table_p">
<table>
<thead>
<tr>
<th>排名</th>
<th>车牌号</th>
<th>里程数（km）</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>京A12345</td>
<td>134.2</td>
</tr>
<tr>
<td>1</td>
<td>京A12345</td>
<td>134.2</td>
</tr>
<tr>
<td>1</td>
<td>京A12345</td>
<td>134.2</td>
</tr>
<tr>
<td>1</td>
<td>京A12345</td>
<td>134.2</td>
</tr>
<tr>
<td>1</td>
<td>京A12345</td>
<td>134.2</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="left div_table_box">
<div class="div_any_child">
<div class="div_any_title"><img src="img/title_4.png">行驶次数车辆前5位</div>
<div class="table_p">
<table>
<thead>
<tr>
<th>排名</th>
<th>车牌号</th>
<th>次数（km）</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>京A12345</td>
<td>134.2</td>
</tr>
<tr>
<td>1</td>
<td>京A12345</td>
<td>134.2</td>
</tr>
<tr>
<td>1</td>
<td>京A12345</td>
<td>134.2</td>
</tr>
<tr>
<td>1</td>
<td>京A12345</td>
<td>134.2</td>
</tr>
<tr>
<td>1</td>
<td>京A12345</td>
<td>134.2</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="left div_table_box">
<div class="div_any_child">
<div class="div_any_title"><img src="img/title_4.png">行驶最高时速前5位</div>
<div class="table_p">
<table>
<thead>
<tr>
<th>排名</th>
<th>车牌号</th>
<th>时速（km）</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>京A12345</td>
<td>134.2</td>
</tr>
<tr>
<td>1</td>
<td>京A12345</td>
<td>134.2</td>
</tr>
<tr>
<td>1</td>
<td>京A12345</td>
<td>134.2</td>
</tr>
<tr>
<td>1</td>
<td>京A12345</td>
<td>134.2</td>
</tr>
<tr>
<td>1</td>
<td>京A12345</td>
<td>134.2</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="left div_table_box">
<div class="div_any_child">
<div class="div_any_title"><img src="img/title_4.png">行驶时长排名前5位</div>
<div class="table_p">
<table>
<thead>
<tr>
<th>排名</th>
<th>车牌号</th>
<th>时长（km）</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>京A12345</td>
<td>134.2</td>
</tr>
<tr>
<td>1</td>
<td>京A12345</td>
<td>134.2</td>
</tr>
<tr>
<td>1</td>
<td>京A12345</td>
<td>134.2</td>
</tr>
<tr>
<td>1</td>
<td>京A12345</td>
<td>134.2</td>
</tr>
<tr>
<td>1</td>
<td><a href="/">京A12345</a></td>
<td>134.2</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery/jQuery-2.2.0.min.js"></script>
<script src="js/echarts-all.js"></script>
<script src="js/base.js"></script>
<script src="js/index.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5ieMMexWmzB9jivTq6oCRX9j&callback"></script>
<script src="js/map.js"></script>
</body>
</html>
2.CSS
a:hover {
text-decoration: none;
}
.left {
float: left;
}
.right {
float: right;
}
.clear {
clear: both;
}
.text_right {
text-align: right;
}
.header {
width: 100%;
height: 80px;
background-color: #030829;
}
.header_center {
width: 30%;
margin: 0px auto;
color: #FFFFff;
text-align: center;
height: 80px;
background-image: url("../img/logoBg.png");
background-size: 100% 100%;
font-family: "微软雅黑" !important;
}
.header_center h2 {
margin-top: 10px !important;
margin-bottom: 10px;
!important;
font-size: 18px !important;
}
.color_font {
color: #e8f7fe !important;
font-size: 12px !important;
}
.header_logo {
margin-left: 1%;
margin-top: 12px;
}
.header_logo img {
height: 56px;
}
.nav {
width: 35%;
}
.nav>ul {}
.nav>ul>li {
display: inline-block;
width: 120px;
text-align: center;
height: 50px;
position: relative;
line-height: 50px;
margin-top: 15px;
box-sizing: border-box;
/*box-shadow: -5px 0px 5px #034c6a inset, !*左边阴影*!*/
/*0px -5px 15px #034c6a inset, !*上边阴影*!*/
/*5px 0px 15px #034c6a inset, !*å³边阴影*!*/
/*0px 5px 15px #034c6a inset;*/
border-radius: 5px;
}
.nav>ul>li:hover {
box-shadow: -10px 0px 15px #034c6a inset, /*左边阴影*/
0px -10px 15px #034c6a inset, /*上边阴影*/
10px 0px 15px #034c6a inset, /*å³边阴影*/
0px 10px 15px #034c6a inset;
box-sizing: border-box;
}
.nav>ul>li i {
width: 16px;
height: 16px;
display: inline-block;
position: relative;
top: 3px;
margin-right: 5px;
}
.nav>ul>li>a {
color: #ffffff;
/*display: inline-block;*/
/*padding: 0 15px 0 5px;*/
font-size: 14px;
}
/*.nav>ul>li:hover .li_ul{*/
/*display: block;*/
/*}*/
.li_ul {
position: absolute;
background-color: #030829;
width: 100%;
/*border-top:4px solid #4b8df8;*/
display: none;
z-index: 999;
}
.li_ul li {
line-height: 40px !important;
}
.li_ul li:hover {
background-color: #4b8df8;
}
.li_ul li a {
color: #ffffff;
font-size: 13px;
}
.nav_1 {
background-image: url("../img/nav_1.png");
}
.nav_2 {
background-image: url("../img/nav_2.png");
}
.nav_3 {
background-image: url("../img/nav_3.png");
}
.nav_4 {
background-image: url("../img/nav_4.png");
}
.nav_5 {
background-image: url("../img/nav_5.png");
}
.nav_6 {
background-image: url("../img/nav_6.png");
}
.nav_7 {
background-image: url("../img/nav_7.png");
}
.nav_8 {
background-image: url("../img/nav_9.png");
}
.nav_active {
border-bottom: 4px solid #4b8df8;
box-shadow: -10px 0px 15px #034c6a inset, /*左边阴影*/
0px -10px 15px #034c6a inset, /*上边阴影*/
10px 0px 15px #034c6a inset, /*å³边阴影*/
0px 10px 15px #034c6a inset;
box-sizing: border-box;
}
.con {
width: 100%;
background-color: #081832;
padding-top: 20px;
padding-bottom: 20px;
}
.con1 {
width: 100%;
background-color: #081832cc;
/*padding-bottom: 4px;*/
box-sizing: border-box;
overflow: auto;
;
}
.find_expend {
display: none;
}
3.JavaScript
$(function() {
char1();
char2();
char3();
char4()
});
function char1() {
var a = echarts.init($("#char1")[0]);
option = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: "vertical",
x: "right",
textStyle: {
color: "#ffffff",
},
data: ["客运车", "危险品车", "网约车", "学生校车"]
},
calculable: false,
series: [{
name: "车类型",
type: "pie",
radius: ["40%", "70%"],
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
},
emphasis: {
label: {
show: true,
position: "center",
textStyle: {
fontSize: "20",
fontWeight: "bold"
}
}
}
},
data: [{
value: 335,
name: "客运车"
}, {
value: 310,
name: "危险品车"
}, {
value: 234,
name: "网约车"
}, {
value: 135,
name: "学生校车"
}]
}]
};
a.setOption(option);
window.addEventListener("resize", function() {
a.resize()
})
}
function char2() {
var a = echarts.init($("#char2")[0]);
option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
grid: {
show: "true",
borderWidth: "0"
},
legend: {
data: ["行驶", "停车", "熄火", "离线"],
textStyle: {
color: "#ffffff",
}
},
calculable: false,
xAxis: [{
type: "value",
axisLabel: {
show: true,
textStyle: {
color: "#fff"
}
},
splitLine: {
lineStyle: {
color: ["#f2f2f2"],
width: 0,
type: "solid"
}
}
}],
yAxis: [{
type: "category",
data: ["客运车", "危险品车", "网约车", "学生校车"],
axisLabel: {
show: true,
textStyle: {
color: "#fff"
}
},
splitLine: {
lineStyle: {
width: 0,
type: "solid"
}
}
}],
series: [{
name: "行驶",
type: "bar",
stack: "总量",
itemStyle: {
normal: {
label: {
show: true,
position: "insideRight"
}
}
},
data: [320, 302, 301, 334]
}, {
name: "停车",
type: "bar",
stack: "总量",
itemStyle: {
normal: {
label: {
show: true,
position: "insideRight"
}
}
},
data: [120, 132, 101, 134]
}, {
name: "熄火",
type: "bar",
stack: "总量",
itemStyle: {
normal: {
label: {
show: true,
position: "insideRight"
}
}
},
data: [220, 182, 191, 234]
}, {
name: "离线",
type: "bar",
stack: "总量",
itemStyle: {
normal: {
label: {
show: true,
position: "insideRight"
}
}
},
data: [150, 212, 201, 154]
}]
};
a.setOption(option);
window.addEventListener("resize", function() {
a.resize()
})
}
function char3() {
var a = echarts.init($("#char3")[0]);
option = {
legend: {
data: ["车辆行驶数量"],
textStyle: {
color: "#ffffff",
}
},
grid: {
show: "true",
borderWidth: "0"
},
calculable: false,
tooltip: {
trigger: "axis",
formatter: "Temperature : <br/>{b}km : {c}°C"
},
xAxis: [{
type: "value",
axisLabel: {
formatter: "{value}",
textStyle: {
color: "#fff"
}
},
splitLine: {
lineStyle: {
width: 0,
type: "solid"
}
}
}],
yAxis: [{
type: "category",
axisLine: {
onZero: false
},
axisLabel: {
formatter: "{value} km",
textStyle: {
color: "#fff"
}
},
splitLine: {
lineStyle: {
width: 0,
type: "solid"
}
},
boundaryGap: false,
data: ["0", "10", "20", "30", "40", "50", "60", "70", "80"]
}],
series: [{
name: "车辆行驶数量",
type: "line",
smooth: true,
itemStyle: {
normal: {
lineStyle: {
shadowColor: "rgba(0,0,0,0.4)"
}
}
},
data: [15, 0, 20, 45, 22.1, 25, 70, 55, 76]
}]
};
a.setOption(option);
window.addEventListener("resize", function() {
a.resize()
})
}
function char4() {
var a = echarts.init($("#char4")[0]);
option = {
grid: {
show: "true",
borderWidth: "0"
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
},
formatter: function(b) {
var c = b[0];
return c.name + "<br/>" + c.seriesName + " : " + c.value
}
},
xAxis: [{
type: "category",
splitLine: {
show: false
},
data: ["客运车", "危险品车", "网约车", "学生校车"],
axisLabel: {
show: true,
textStyle: {
color: "#fff"
}
}
}],
yAxis: [{
type: "value",
splitLine: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: "#fff"
}
}
}],
series: [{
name: "报警数量",
type: "bar",
stack: "总量",
itemStyle: {
normal: {
label: {
show: true,
position: "inside"
}
}
},
data: [2900, 1200, 300, 200, 900, 300]
}]
};
a.setOption(option);
window.addEventListener("resize", function() {
a.resize()
})
};
五、更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、Echarts大数据可视化, 等! 「一起探讨 web前端 ,Node ,Java 知识，互相学习」！
3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
