基于Echarts构建停车场数据可视化大屏(文末送书)

这篇具有很好参考价值的文章主要介绍了基于Echarts构建停车场数据可视化大屏(文末送书)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

基于Echarts构建停车场数据可视化大屏(文末送书)

🤵‍♂️ 个人主页:@艾派森的个人主页

✍🏻作者简介:Python学习者
🐋 希望大家多多支持,我们一起进步!😄
如果文章对你有帮助的话,
欢迎评论 💬点赞👍🏻 收藏 📂加关注+


目录

1.项目背景

2.项目简介

3.项目流程

3.1整体布局

3.2左边布局

3.3中间布局 

3.4右边布局


 文章来源地址https://www.toymoban.com/news/detail-479336.html

1.项目背景

        停车场数据可视化大屏是一种用于展示停车场运行数据的可视化工具,它可以帮助停车场管理人员更好地了解停车场的运行情况,以便进行更加有效的管理和优化。随着城市车辆数量的不断增加,停车场管理变得越来越重要,因此停车场数据可视化大屏也成为了一种非常重要的工具。

该实验的研究背景主要包括以下几个方面:

  1. 停车场管理的挑战:随着城市车辆数量的不断增加,停车场的管理变得越来越困难。停车场管理人员需要及时了解停车场的运行数据,以便进行更加有效的管理和优化。

  2. 停车场数据的可视化需求:停车场管理人员需要能够将停车场数据进行可视化展示,以便更好地了解停车场的运行情况。传统的表格和柱状图等方式已经无法满足这种需求,因此需要采用更加直观和生动的可视化方式。

  3. Echarts 的应用:Echarts 是一款基于 JavaScript 的开源可视化工具,它具有灵活、易用、直观等特点,非常适合用于停车场数据可视化大屏的构建。

综上所述,该实验的研究背景主要涉及到停车场管理的挑战、停车场数据的可视化需求以及 Echarts 的应用。

2.项目简介

本次项目是使用Echarts构建大数据招聘岗位信息可视化大屏,使用到的技术为前端三剑客(html、css、javascript)。项目最终效果如下:

基于Echarts构建停车场数据可视化大屏(文末送书)

3.项目流程

3.1整体布局

        首先我们将大屏划分为6个板块,左上角用折线图表示每日的停车数量;左下角用饼图表示及各小时段停车数占比;中间上部分用仪表盘来展示总停车总数、数量最多的星期、时段、地区等数据;中间下用条形图和环形饼图表示月收入情况和停车高峰区间统计;右上角和左上角图表使用一样,展示的是车位平均使用率情况;右下角用玫瑰图展示一周内的停车数量情况。

整体html样式代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>停车场信息可视化大屏</title>
    <link rel="stylesheet" href="main.css">
    <script src="echarts.min.js"></script>
    <script src="jquery-3.6.0.min.js"></script>
    <script src="echarts-wordcloud.min.js"></script>
</head>
<body>
  <div class="title">停车场信息可视化大屏</div>
  <div class="l1" id="l1"></div>
  <div class="l2" id="l2"></div>
  <div class="c1">
    <div class="num"><h1>9281</h1></div>
    <div class="num"><h1>星期六</h1></div>
    <div class="num"><h1>1小时内</h1></div>
    <div class="num"><h1>粤</h1></div>
    <div class="txt"><h2>停车总数</h2></div>
    <div class="txt"><h2>数量最多的星期</h2></div>
    <div class="txt"><h2>数量最多的时段</h2></div>
    <div class="txt"><h2>数量最多的地区</h2></div>
  </div>
    <div class="c2" id="c2" ></div>
    <div class="c3" id="c3" ></div>
    <div class="r1" id="r1"></div>
    <div class="r2" id="r2"></div>

   <script src="ec_l1_data.js"></script>
   <script src="ec_l2_data.js"></script>
   <script src="ec_r1_data.js"></script>
   <script src="ec_r2_data.js"></script>
   <script src="ec_c2_data.js"></script>
   <script src="ec_c3_data.js"></script>
</body>
</html>

整体css样式代码如下:

body{
    margin: 0;
    background-color: #333;
}
.title{
    position: absolute;
    width: 40%;
    height: 10%;
    top: 0;
    left: 30%;
    color: white;
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.l1{
    position: absolute;
    width: 30%;
    height: 45%;
    top: 10%;
    left: 0;
    background-color: aquamarine;
}
.l2{
    position: absolute;
    width: 30%;
    height: 45%;
    top: 55%;
    left: 0;
    background-color: blue;
}
.c1{
    position: absolute;
    width: 40%;
    height: 25%;
    top: 10%;
    left: 30%;
    /* background-color: blue; */
}
.num{
    width: 25%;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    color: gold;
    font-size: 16px;
}
.txt{
    width: 25%;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "幼圆";
    color: whitesmoke;
    font-size: 12px;
}
.c2{
    position: absolute;
    width: 20%;
    height: 65%;
    top: 35%;
    left: 30%;
    background-color: green;
}
.c3{
    position: absolute;
    width: 20%;
    height: 65%;
    top: 35%;
    left: 50%;
    background-color: blue;
}
.r1{
    position: absolute;
    width: 30%;
    height: 45%;
    top: 10%;
    right: 0;
    background-color: burlywood;
}
.r2{
    position: absolute;
    width: 30%;
    height: 45%;
    top: 55%;
    right: 0;
    background-color: brown;
}
.tim{
    position: absolute;
    /* width: 30%; */
    height: 10%;
    top: 5%;
    right: 2%;
    /* background-color: blueviolet; */
    font-size: 20px;
    color: whitesmoke;
}

3.2左边布局

左上js图表代码:

var ec_left1 = echarts.init(document.getElementById('l1'),"dark");
var ec_left1_option = {
	//标题样式
	title : {
	    text : "每日停车数量",
	    textStyle : {
	        color : 'white',
	    },
	    left : 'left'
	},
	  color: ['#3398DB','#EE6666'],
	    tooltip: {
	        trigger: 'axis',
	        axisPointer: {            // 坐标轴指示器,坐标轴触发有效
	            type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
	        }
	    },
    xAxis: {
        type: 'category',
		color : 'white',
        data: [1,
			2,
			3,
			4,
			5,
			6,
			7,
			8,
			9,
			10,
			11,
			12,
			13,
			14,
			15,
			16,
			17,
			18,
			19,
			20,
			21,
			22,
			23,
			24,
			25,
			26,
			27,
			28,
			29,
			30,
			31]
    },
    yAxis: [{
        type: 'value',
		color : 'white',
    },
	
],
    series: [
	{
		name: '数量',
		type: 'line',
		yAxisIndex: 0,
		tooltip: {
		  valueFormatter: function (value) {
			return value;
		  }
		},
		data: [283, 275, 371, 413, 290, 271, 349, 273, 249, 322, 379, 255, 322,
			315, 232, 246, 366, 364, 280, 310, 316, 265, 305, 356, 403, 277,
			325, 321, 178, 164, 206]
	  }
	]
};
ec_left1.setOption(ec_left1_option)

左下图js代码:

var ec_left2 = echarts.init(document.getElementById('l2'),"dark");
var ec_left2_option = {
	//标题样式
	title : {
	    text : "各小时段停车数",
	    textStyle : {
	        color : 'white',
	    },
	    left : 'left'
	},
tooltip: {
    trigger: 'item'
  },

  series : [
    {
        name: '数量',
        type: 'pie',
        radius: '55%',
        data:[
            {value:164, name:'11~12小时'},
            {value:717, name:'12小时以上'},
            {value:871, name:'2~3小时'},
            {value:1101, name:'6~20小时'},
            {value:1393, name:'1~2小时'},
            {value:1643, name:'3~5小时'},
            {value:3392, name:'1小时以内'}
        ]
    }
]
};

ec_left2.setOption(ec_left2_option)

3.3中间布局 

条形图js代码:

var ec_main = echarts.init(document.getElementById('c2'), "dark");

var ec_main_option = {
    title: {
        text: '月收入情况'
    },
    tooltip: {},
    xAxis: {
        data: ["1月","2月","3月"]
    },
    yAxis: {},
    series: [{
        name: '收入',
        type: 'bar',
        data: [37635,40026,32922]
    }]

}
ec_main.setOption(ec_main_option);

环形饼图js代码:

var ec_left2 = echarts.init(document.getElementById('c3'),"dark");
var ec_left2_option = {
	//标题样式
	title : {
	    text : "停车高峰区间统计",
	    textStyle : {
	        color : 'white',
	    },
	    left : 'left'
	},
tooltip: {
    trigger: 'item'
  },
//   legend: {
//     top: '5%',
//     left: 'center'
//   },
  series: [
    {
      name: '数量',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1631, name: '(7.0, 8.0]' },
        { value: 1407, name: '(13.0, 17.0]' },
        { value: 1282, name: '(0.0, 3.0]' },
        { value: 1245, name: '(3.0, 7.0]' },
        { value: 1030, name: '(20.0, 23.0]' },
        { value: 1014, name: '(10.0, 13.0]' },
        { value: 1004, name: '(17.0, 20.0]' },
        { value: 668, name: '(8.0, 10.0]' },

      ]
    }
  ]
};

ec_left2.setOption(ec_left2_option)

3.4右边布局

右上图形js代码:

var ec_right1 = echarts.init(document.getElementById('r1'),"dark");
var ec_right1_option = {
	//标题样式
	title : {
	    text : "车位平均使用率",
	    textStyle : {
	        color : 'white',
	    },
	    left : 'left'
	},
	  color: ['#3398DB','#EE6666'],
	    tooltip: {
	        trigger: 'axis',
	        axisPointer: {            // 坐标轴指示器,坐标轴触发有效
	            type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
	        }
	    },
    xAxis: {
        type: 'category',
		color : 'white',
        data: [1,
			2,
			3,
			4,
			5,
			6,
			7,
			8,
			9,
			10,
			11,
			12,
			13,
			14,
			15,
			16,
			17,
			18,
			19,
			20,
			21,
			22,
			23,
			24,
			25,
			26,
			27,
			28,
			29,
			30,
			31]
    },
    yAxis: [{
        type: 'value',
		 color : 'white',
    },

],
    series: [
	{
		name: '使用率',
		type: 'line',
		yAxisIndex: 0,
		tooltip: {
		  valueFormatter: function (value) {
			return value;
		  }
		},
		data: [82.86925795, 82.77090909, 84.3638814 , 76.72639225, 79.25862069,
			88.45756458, 85.96275072, 83.72893773, 84.91164659, 85.08385093,
			74.43271768, 83.99215686, 86.5931677 , 89.62539683, 94.24568966,
			96.10569106, 78.70765027, 82.18681319, 86.47857143, 89.57741935,
			87.13607595, 82.21886792, 75.01967213, 80.14044944, 80.24565757,
			80.31768953, 75.77846154, 74.01246106, 82.41011236, 90.23170732,
			96.44174757]
	  }
]
};
ec_right1.setOption(ec_right1_option)

右下图形js代码:

var ec_right2 = echarts.init(document.getElementById('r2'), "dark");

var ec_right2_option = {
   //标题样式
	title : {
	    text : "一周停车数量",
	    textStyle : {
	        color : 'white',
	    },
	    left : 'left'
	},
tooltip: {
    trigger: 'item'
  },
  series : [
    {
        name: '数量',
        type: 'pie',
        radius: '55%',
        roseType: 'angle',
        data:[
            {value:1111, name:'星期三'},
            {value:1113, name:'星期二'},
            {value:1139, name:'星期一'},
            {value:1172, name:'星期四'},
            {value:1173, name:'星期日'},
            {value:1720, name:'星期五'},
            {value:1853, name:'星期六'},
        ]
    }
]
};

ec_right2.setOption(ec_right2_option);

文末福利

618,清华社 IT BOOK 多得图书活动开始啦!

活动时间为2023年6月7日至6月18日

清华社为您精选多款高分好书,涵盖了 C++、Java、Python、前端、后端、

数据库、算法与机器学习等多个IT开发领域,适合不同层次的读者。

全场5折,扫码领券更有优惠哦!快来京东点击链接 IT BOOK 多得

(IT BOOK 多得)

基于Echarts构建停车场数据可视化大屏(文末送书)


 参与福利 

  • 抽奖方式:评论区随机抽取5位幸运小伙伴!
  • 参与方式:关注博主、点赞、收藏、评论区评论“人生苦短,拒绝内卷!”(切记要点赞+收藏,否则抽奖无效,每个人最多评论三次!
  • 幸运小伙伴的奖励:清华大学出版社推出的49编程书任选其一!
  • 活动截止时间:2023-06-16 20:00:00

名单公布时间:2023-06-16 21:00:00    

基于Echarts构建停车场数据可视化大屏(文末送书)

 

到了这里,关于基于Echarts构建停车场数据可视化大屏(文末送书)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于微信小程序的停车场停车小程序(源码+文档+包运行)

    毕设帮助、技术解答、源码交流 联系方式见文末。 随着社会经济的发展,城市居民汽车持有量大幅度增长,停车难问题困扰着众多汽车用户。为了解决这一难题。开发了基于微信小程序的停车场管理系统,可实现停车场信息共享,使用户能准确,实时地掌握目标停车位的使用情

    2024年02月03日
    浏览(54)
  • 【开源】基于JAVA的停车场收费系统

    基于JAVA+Vue+SpringBoot+MySQL的停车场收费系统,包含了车辆管理模块、停车场模块、停车记录模块、IC卡档案模块和IC卡挂失模块,还包含系统自带的用户管理、部门管理、角色管理、菜单管理、日志管理、数据字典管理、文件管理、图表展示等基础模块,停车场收费系统基于角

    2024年01月22日
    浏览(46)
  • 基于 SpringBoot + Vue 的智能停车场项目。

    一、开源项目简介 智能停车场管理平台!科学计费 多种计费方案灵活切换,商场、小区、停车场等场景均适用!无人值守 云端控制实现无岗亭模式下的车辆自主进出,降低人工成本! 使用MIT开源协议 系统管理:角色管理、接口管理、系统菜单、全局配置 账号管理:用户管

    2024年02月01日
    浏览(116)
  • 基于python的停车场管理系统的设计与实现/智能停车管理系统

    车位信息 是 停车场供应用户 必不可少的一个部分。在 停车场发展 的整个过程中, 车位信息 担负着最重要的角色。为满足如今日益复杂的管理需求,各类 系统管理 程序也在不断改进。本课题所设计的 停车场管理系统 , 使用 Django 框架 , Python语言 进行开发,它的优点代

    2024年02月10日
    浏览(42)
  • 基于Web的停车场管理系统(Java)

    目录 一、系统介绍 1.开发的环境 2.本系统实现的功能 3.数据库用到的表 4.工程截图 二、系统展示 1、登录页面  2、首页 3、系统信息管理模块   4、车位信息管理模块  5、IC卡信息管理模块 ​编辑6、固定车主停车管理模块 7、临时车主停车管理模块 8、系统功能操作模块 三

    2024年02月10日
    浏览(36)
  • 一种基于智能手机的地下停车场寻车系统

    原文来自于《Help You Locate the Car: a Smartphone-based Car-finding System in Underground Parking Lot》 这篇论文提出了一种基于智能手机的地下停车场寻车系统。该系统旨在帮助驾驶员在没有额外设备和地图支持的情况下找到他们的车辆。主要内容和贡献如下: 系统概述 : 目标 :解决在室内

    2024年01月17日
    浏览(46)
  • 【开源】基于Vue+SpringBoot的停车场收费系统

    基于JAVA+Vue+SpringBoot+MySQL的停车场收费系统,包含了车辆管理模块、停车场模块、停车记录模块、IC卡档案模块和IC卡挂失模块,还包含系统自带的用户管理、部门管理、角色管理、菜单管理、日志管理、数据字典管理、文件管理、图表展示等基础模块,停车场收费系统基于角

    2024年02月04日
    浏览(48)
  • 基于单片机停车场刷卡收费的设计与实现

     功能介绍 以51单片机作为主控系统; 通过液晶显示当前时间,车位、剩余车位、时间等信息; 进电机正反转表示开关门; 按键可以设置当前时间/单价/分钟; RC522射频卡识别,当刷卡后模拟汽车驶入,开始收费 再次刷卡模拟车辆驶出停车场停止计费 液晶显示当前卡号,计

    2024年02月16日
    浏览(34)
  • 【开源】基于Vue.js的停车场收费系统

    文末获取源码,项目编号: S 076 。 color{red}{文末获取源码,项目编号:S076。} 文末获取源码,项目编号: S 076 。 基于JAVA+Vue+SpringBoot+MySQL的停车场收费系统,包含了车辆管理模块、停车场模块、停车记录模块、IC卡档案模块和IC卡挂失模块,还包含系统自带的用户管理、部门

    2024年02月05日
    浏览(38)
  • JAVA毕业设计119—基于Java+Springboot+vue的智能停车场管理系统(源代码+数据库+9000字论文)

    毕设所有选题: https://blog.csdn.net/2303_76227485/article/details/131104075 本项目前后端不分离 登录、控制台、停车场管理、车牌识别、车辆管理 角色管理、系统菜单、全局配置、停车记录、财务管理 控制台管理、系统日志、账号管理、用户管理、合作单位管理、密码修改、个人信息

    2024年02月03日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包