admin 管理员组文章数量: 1086019
2024年3月29日发(作者：java核心技术马志强)
基于ECharts的“绿色车间”监控可视化研究
作者：郑菲 陈晓凤 谢豆 刘文军
来源：《电脑知识与技术》2020年第18期
摘要：随着经济发展方式的转变和物联网、云计算和人工智能技术的发展，传统生产车间
逐渐开始向“绿色车间”转变。“绿色车间”监控可视化系统是一种基于ECharts的车间大数据可
视化服务平台，采用Spring Boot实现业务分层，采用Ajax实现后端动态数据加载。通过
ECharts实现对工厂情况监测、设备状态控制、室温数据读取、气体浓度统计分析等功能的动
态可视化呈现，为工厂提供更具有绿色、安全、节能的生产工作环境。
关键词：绿色车间;监控平台;数据可视化;ECharts
中图分类号：TP399 文献标识码：A
文章编号：1009-3044（2020）18-0221-03
開放科学（资源服务）标识码（OSID）：
1 引言
绿色车间监测系统是以生产车间安全、高效、节能为设计目标，综合运用物联网技术、软
件开发和云计算大数据技术，融合软硬件开发和设计，实现车间智能化监控的信息系统。采集
的车间数据通过分析和合理的可视化手段进展展示能够方便用户查看历史数据及实时数据。相
关文献给出了智能车间监测的前端实现方法。文献[1]通过百度ECharts的特点及使用方法并分
析在数据可视化中的应用，文献[2-4]探索了ECharts平台的可视化开发方法，展示了结合Ajax
技术实现动态数据绘制，文献[5]中介绍了可视化监控系统需求分析，数据的实时采集、分析
和处理是可视化检测的重要流程。
车间智能监控系统提供了良好的人机交互与展示界面，通过系统可以实现远程监控。用户
可以设置环境质量标准，通过可视化界面远程查看设备是否关闭，实现远程控制（设备）开
关。同时，可视化图表梳理数据，更容易洞察数据效益，提升管理水平。基于ECharts丰富的
图表展示获取车间的各种参数指标，可以直观的反映出工厂实时情况，使管理者更好统筹工厂
的生产经营状况，有助于提升科学决策水平。
系统可视化呈现综合使用Vue和ECharts技术，Vue的使用实现了前后端分离，在代码上
做到更好的控制和流畅，ECharts的使用提供了丰富的交互功能和直观生动可视化效果。在数
据流方面，前端通过Ajax技术异步调用方式动态读取数据库，将数据以仪表盘、柱形图等各
种图形界面呈现在页面中。此外，为了提升开发效率，通过第三方视频平台接人视频流，将工
厂实时监控接人平台。利用视觉对图形、颜色的快速感知，为用户提供更高效的信息获取方
式。
2 相关技术
2.1 ECharts
ECharts是一款流行的开源可视化图表设计工具，由百度公司推出，具有易于使用，轻便
灵活，表现力强等典型特点。ECharts的使用首先在官网上选择合适的下载版本，随后引入
echarts文件，即。其次，绘制一个简单的图表，即准备一个DOM容器，如
。最后，编写Javas-cript脚本，通过该脚本完成以下工作，其绘制过程如图l所示。
2.2 Vue技术
Vue是一种基于JavaScript的用于构建分层开发中构建Web页面的渐进式框架。Vue采用
自底向上的设计思想，特别关注视图层，通过与其他第三方框架组合使用，提供快速构建前端
页面的能力。Vue的使用首先推荐在浏览器上下载VueDevtools，在运行出问题的时候可以在
界面上更好的审查和调试。由于Vue项目依赖 npm需要先安装，再安装Vue，即cnpm
install -g vue-cli，这里的安装使用了淘宝镜像来加快安装速度。最后通过vue init webpack my-
vue完成项目创建。
2.3 Ajax技术
Ajax是一种广泛使用的用于创建快速动态交互式网页的技术。Ajax提供异步通信功能，
实现高效的数据请求和传递，在前台页面和后台服务器之间进行数据交换，在不重新加载整个
网页情况下进行网页部分更新，以此提供良好的用户体验。其主要工作流程如图2所示下：
3 系统设计
3.1 功能设计
该数据平台功能包括实时运行工况、在线操作设备、现场监测和环境监测，其中在线操作
可控制通风扇、声光报警器、照明灯等设备开关以及查看摄像头等设备所在状态;现场监测包
括视频数据及气体流量传感器、压力传感器、位移传感器、温度传感器、测速传感器、角度传
感器、液位传感器等设备信息;环境监测则包括车间中温湿度传感器、可燃性气体传感器、光
照传感器、PM2.5等数据信息。具体如图3所示。
这些功能通过仪表盘、数据集、象柱状图等多种方式呈现，提供给用户一种友好的交互界
面。
3.2 数据调用
本文“绿色车间”监控可视化服务平台基于Spring Boot框架开发，采用前后端分离模式使
对服务器的压力减小到最小，后台错误也不会直接影响到前台，这种前后端各尽其职能最大程
度上减少开发难度，降低维护成本。采集的车间数据需要长久保存以方便进行即时查询访问和
后期的趋势分析，根据实际需要可以采用关系型数据库，如SQL Server.或文件式数据库，如
JSon。在视图层组合使用Ajax和ECharts来实现前后端数据的交互并完成各种图表的页面呈
现。此系统数据采集节点实现方法分三类：
-IoT数据采集节点，适合于对于需要远程进行数据统计监控，且传输的数据量不高的
情况，如仪表类监测。直接把数据发送到华为OceanConnect平台，再把数据转发到自定义服
务器平台。
485、Zigbee数据采集节点，主要采集环境监测传感器的数据，将采集到的数据按照
统一的数据通讯协议进行封装后传送到智能网关，最后传输到数据平台。
3.视频影像数据节点，主要获取车间设备实时运转和环境影像数据。通过4G/5G等方式进
行传输。特别地，在本地完成数据的预处理以降低通信开销。
3.3 可视化设计与呈现
平台存储了来自车间内传感器和其他一些设备采集各路信息。需要对这些采集的信息进行
处理和分析，并通过合适的图表类型在Web端进行实时更新和展示。比如Space-timecube和
基于堆叠的轨迹可视化用于针对时空数据的可视化，最直接的方法就是在二维空间属性可视化
方法的基础上，添加垂直于地图平面的时间维度，用于表示时间的变化;像折线图、堆叠图可
用于时间变化，Ring-Map则被用于时间周期等。表1给出了车间内各种类型的传感数据以及
相对应的图表呈现方式。结合各种采集数据类型，选用合适的ECharts图表给用户提供和更直
观的解读。
以车间内温度实时状态图为例，介绍在Vue中使用ECharts可视化工具完成数据图表的呈
现方法。室温数据首先通过温度传感器进行采集，通过数模转换后由终端设备通过无线通信发
送至服务器，服务器端按照预定义的通信协议解析并进行计算和存储;然后，页面端利用axios
向服务器发送数据请求，由服务器访问数据库进行数据调用，并将数据返回给页面;最后，动
态ECharts图表呈现在Web页面中。
Vue中使用ECharts先安装依赖，再在文件中引入，具体实现在.vue文件的div容
器中进行图表实现，通过使用setOption方法为图表指定配置项。然后定义axios技术发送请
求，传递参数，最后经后台分析处理从数据库返回数据。实现部分代码如下：
//定义获取实时数据的方法并呈现给图表
searchData0（
var params =（
gatewayld：”31”
）;
currentSensorData（params）.then（res=>{
h（element=>{
if（TypeName==”一体化温度”）{
=
=
）
））;
0;
））;
】
），
mounted 0{
Data0;
time= setInterval（Data，20000）;
）
】
4 系统实现
“绿色车间”监控服务平台通过1/0接口将传感器的数据采集并封装成统一格式的数据发送
给智能网关，数据采集还包括两路视频数据采集模块，可完成视频数据的采集并通过智能网关
或PC上位机软件实时查看视频数据和控制摄像头云台，实现了车间内各路传感器的状态、视
频数据和执行器操作的监控与查询，以可视化方式对相关状态和分析数据进行展示，以典型功
能模块为例展示可视化展现效果。可视化服务数据监控平台如图4所示。
平台可以对车间进行实时监控，监测视频数据气体流量、压力、位移等以及车间环境监控
传感器。为了调整环境温湿度还增加了声光报警器、通风扇、照明灯带车间常用执行器。部分
数据会通过图表方式动态展示。此外，数据的灵活性有所提高，可以按照筛选条件进行各种历
史数据单独或组合查询，以报表方式予以呈现。传感器数据可视化看板如图5所示，用户可以
选择不同的模块，相应地，网页会以象柱状图、仪表盘或者其他形式的图表进行可视化展示。
5 结论
针对车间安全事故频频发生、施工场地敏感，管理不易等典型问题，给出了一种基于
ECharts的可视化设计的解决方案。绿色车间大数据实时监测系统中，将设备工况数据、环境
数据进行收集、处理和综合分析。特别地，当某些值（例如CO浓度、温湿度等）越过临界值
时进行声光报警，有效保障车间作业人员的人身安全。另外，平台还可以对车间内各设备进行
远程控制，节约了人力维护带来的成本。采用前后端分离的开发技术，利用Vue框架和
EChart可视化工具在Web端进行数据呈现，显著提高了开发效率，通过axios技术的综合运
用，提高了数据传输和调用的效率，较好满足了绿色车间实时监控平台的技术要求。
参考文献：
[1]黄宇栋.百度Echarts在数据可视化分析中的应用[J）.金融科技时代，2018，26（6）：
43-45.
[2]崔蓬.ECharts在数据可视化中的应用[Jl.软件工程，2019，22（6）：42-46.
[3]郑幸源，洪亲，蔡坚勇，等.基于AJAX异步传输技术与Echarts3技术的动态数据绘图
实现[Jl.软件导刊，2017，16（3）：143-145.
[4]汤晓燕，刘文军，朱东，等.基于ECharts的电动汽车监控可视化研究[Jl.现代信息科
技，2018（12）：46-48.
[5]卫定惠，汪惠芬，柳林燕.中小型机械加工自动化生产线可视化监控系统[J/OL].中国机
械工程，2020-02-12.
【通联编辑：梁书】
基金支持：江苏省大学生创新创业训练计划项目（ 2Y，2019126860 11Y）;
苏州工业职业技术学院科研启动基金（2017ky-qd017）
作者简介：郑菲（1999-），女，大专，主要研究方向：软件技术;谢豆（1999-），女，大
專，主要研究方向：软件技术;陈晓凤（2000-），男，大专，主要研究方向：软件技术;刘文军
（1981-），男，博士，讲师，主要研究方向：并行与分布式系统、算法设计与分析、无线传
感器网络等。
版权声明：本文标题：基于ECharts的“绿色车间”监控可视化研究 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/b/1711644570a603358.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论