700字范文 > 基于Echarts实现可视化数据大屏交通类大数据展示页面模板

基于Echarts实现可视化数据大屏交通类大数据展示页面模板

时间：2023-08-07 14:25:58

前言

🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作，可以在此基础上重新开发。

本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

文章目录

前言一、Echart是什么二、ECharts入门教程三、作品演示四、代码实现1.HTML2.CSS3.JavaScript4.Echarts五、更多干货

一、Echart是什么

ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器(IE8/9/10/11，Chrome，Firefox，Safari等)，底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

二、ECharts入门教程

5 分钟上手ECharts

三、作品演示

四、代码实现

1.HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>首页界面</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>xx区智慧旅游综合服务平台</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>

</header>

<div class="con left">

<div class="select_time">

<div class="static_top left">

<i></i><span>总体概况</span>

</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 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 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 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 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 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 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 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 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 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 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 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 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>

<script src="/jquery/jquery-1.10.2.js"></script>

<script src="/jquery/echarts-4.2.1.min.js"></script>

<script src="js/base.js"></script>

<script src="js/index.js"></script>

<script type="text/javascript" src="http://api./api?v=2.0&ak=5ieMMexWmzB9jivTq6oCRX9j&callback"></script>

<script src="js/map.js"></script>

</body>

</html>

2.CSS

body{

font-size: 100%;

}

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;

}

.con1::before{

content: "";

display: block;

clear: both;

visibility: hidden;

height: 0;

}

.select_time{

width: 140px;

height: 36px;

margin-bottom: 25px;

margin-left: 1%;

padding-left: 20px;

;

}

.select_time img{

height: 18px;

margin-top: 9px;

}

.select_time input{

border: none;

background-color: transparent;

width: 80px;

height: 20px;

top:-5px;

margin-left: 10px;

position: relative;

text-indent: 1em;

outline: none;

}

.con_div{

height: 110px;

width: 98%;

margin-left: 1%;

margin-bottom: 25px;

}

.con_div_text{

height: 100%;

background-color: #034c6a;

width: 32%;

margin-right: 1.3%;

}

.con_div_text01{

width: 50%;

height: 100%;

}

.text01_img{

width: 40px;

height: 40px;

margin-left: 5%;

margin-top: 35px;

}

.text01_div{

margin-top: 15px;

margin-left: 5%;

text-align: center;

}

.text01_div p{

line-height: 35px;

}

.text01_div p:nth-child(1){

font-size: 13px;

color: #ffffff;

}

.text01_div p:nth-child(2){

font-size: 28px;

color: #ffff43;

font-weight: 600;

}

.red{

color: red !important;

}

.sky{

color: #25f3e6 !important;

}

.org{

color: #ff4e4e !important;

}

.div_any{

width: 98%;

margin-left: 1%;

margin-bottom: 25px;

height: 610px;

}

.div_any01{

width: 23%;

margin-right: 2%;

}

.div_any02{

width: 48%;

margin-right: 2%;

}

.div_any03{

width: 98%;

margin: 15px auto;

}

3.JavaScript

$(function () {

char1();

char2();

char3();

char4();

})

function char1() {

var myChart = 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: '学生校车'

}]

};

myChart.setOption(option);

window.addEventListener('resize', function () {

myChart.resize();

})

}

function char2() {

var myChart = 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]

}]

};

myChart.setOption(option);

window.addEventListener('resize', function () {

myChart.resize();

})

}

function char3() {

var myChart = 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]

}]

};

myChart.setOption(option);

window.addEventListener('resize', function () {

myChart.resize();

})

}

function char4() {

var myChart = echarts.init($("#char4")[0]);

option = {

grid: {

show: 'true',

borderWidth: '0'

},

tooltip: {

trigger: 'axis',

axisPointer: {

type: 'shadow'

},

formatter: function (params) {

var tar = params[0];

return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.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]

}]

};

myChart.setOption(option);

window.addEventListener('resize', function () {

myChart.resize();

})

}

4.Echarts

$(function () {

initMap();

})

//地图界面高度设置

//加载地图

function initMap() {

// 百度地图API功能

var map = new BMap.Map("map_div"); // 创建Map实例

map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别

//添加地图类型控件

var size1 = new BMap.Size(10, 50);

map.addControl(new BMap.MapTypeControl({

offset: size1,

mapTypes: [

BMAP_NORMAL_MAP,

BMAP_HYBRID_MAP,

]

}));

// 编写自定义函数,创建标注

function addMarker(point) {

var marker = new BMap.Marker(point);

map.addOverlay(marker);

}

// 随机向地图添加25个标注

var bounds = map.getBounds();

var sw = bounds.getSouthWest();

var ne = bounds.getNorthEast();

var lngSpan = Math.abs(sw.lng - ne.lng);

var latSpan = Math.abs(ne.lat - sw.lat);

for (var i = 0; i < 25; i++) {

var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));

addMarker(point);

};

map.setCurrentCity("北京"); // 设置地图显示的城市此项是必须设置的

map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

//设备地图颜色

var mapStyle = {

style: "midnight"

};

map.setMapStyle(mapStyle);

//加载城市控件

var size = new BMap.Size(10, 50);

map.addControl(new BMap.CityListControl({

anchor: BMAP_ANCHOR_TOP_LEFT,

offset: size,

}));

}

五、更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.【关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、Echarts大数据可视化, 等! 「一起探讨 web前端 ,Node ,Java 知识，互相学习」！

3.以上内容技术相关问题😈欢迎一起交流学习🔥

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。