admin 管理员组文章数量: 1087652
2024年4月25日发(作者：java程序设计教程第三版雍俊海)
龙源期刊网
基于ECharts的电动汽车监控可视化研究
作者：汤晓燕 刘文军 朱东 浦信 吴新兵
来源：《现代信息科技》2018年第12期
摘 要：随着电动汽车的推广和普及，设计满足电动汽车特征的数据可视化监控平台成为
一种新的需求。本文设计了一种基于ECharts的电动汽车可视化服务平台，平台采用Spring
MVC实现业务分层，采用Ajax实现后端动态数据加载。通过ECharts实现对车辆状态监测、
位置服务管理、维保及统计分析等功能的动态可视化呈现，为用户提供直观、友好和易用的数
据呈现服务。
关键词：电动汽车；监控平台；数据可视化；ECharts
中图分类号：TP311.52 文献标识码：A 文章编号：2096-4706（2018）12-0046-03
Study on Monitoring Visualization of Electric Vehicle Service Platform
Based on ECharts
TANG Xiaoyan1，LIU Wenjun1，ZHU Dong1，PU Xin2，WU Xinbin2
（ Vocational Institute of Industrial Technology，Suzhou 215004，China；
Hige New Energy Vehicle Electric Control System Technology Co.，Ltd.，Suzhou
215021，China）
Abstract：With the promotion and popularization of electric vehicles，the design of data
visualization monitoring platform to meet the characteristics of electric vehicles has become a new
demand. This paper designs a visualization service platform of electric vehicle based on ECharts. The
platform adopts Spring MVC to realize business stratification，and uses Ajax to realize back-end
dynamic data loading. ECharts enables dynamic visualization of vehicle status monitoring，location
service management，maintenance and statistical analysis，providing users with intuitive，friendly
and easy-to-use data presentation services.
Keywords：electric vehicles；service platform；data visualization；ECharts
0 引 言
新能源汽车为缓解我国能源危机、完成节能减排目标和汽车产业转型升级提供了重要突破
口，是实现汽车产业可持续发展的重要战略举措[1]。随着新能源电动车辆的逐步推广，汽车
龙源期刊网
保有量不断增长，车辆的远程监控[2]、位置服务[3]、维保管理[4]成为整车厂、运营车队、用
户及监管部门的迫切需求。随着数据量的增长和对系统实时性的要求，传统的监控系统及其呈
现方式无法满足新能源电动汽车对动力电池、驱动电机、整车控制等特定参数的记录、统计、
分析和查看需求。探索新的可视化车辆监控技术及其实现已经成为一种趋势[5-8]。
新能源車辆监控平台既可满足车辆管理部门对车辆的监控要求，也可以为车辆服务部门提
供故障及安全预警等相关数据服务。将可视化技术应用于监控平台，把繁杂的车辆运行数据以
图形图表的形式展现，能够为用户提供更直观形象的信息内容，更快速、精准地反映状态的变
化和数据间的关联，并通过良好的界面达到与用户友好交互的目的。
系统平台可视化开发以ECharts为工具，前端通过Ajax技术异步调用方式动态读取数据
库，将数据以地图、柱形图、饼图等各种图形界面呈现在页面中，利用视觉对图形、颜色的快
速感知，为用户提供更高效的信息获取方式。
1 相关技术
1.1 ECharts
ECharts是百度公司推出的一款开源可视化图表设计工具，具有方便使用、交互性强、定
制灵活等优点。它是一个纯JavaScript的商业级图表库，可以流畅地运行在PC和移动设备
上，兼容当前绝大部分浏览器，底层依赖轻量级的Canvas类库ZRender，能够提供直观、生
动、可交互、可高度个性化定制的数据可视化图表。创新的拖拽计算、数据视图、值域漫游等
特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
1.2 Ajax技术
Ajax全称“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交
互式网页应用的网页开发技术。其优点是使用异步模式，通过少量数据传递和交换，刷新更新
数据，从而带来更好的用户体验。同时，Ajax可以减轻服务器和带宽负担，提供更好的服务
响应。其主要工作流程如下：首先客户端通过Ajax发送请求；然后，服务器端Servlet接收请
求后生成JSON数据并返回给客户端；最后客户端接收数据后进行显示。
2 可视化设计
2.1 功能结构
本文的新能源电动汽车监控可视化服务平台基于Spring MVC框架开发，它是一种基于
Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架。数据库采用MySQL，
在视图层使用Ajax和ECharts来实现前后端数据的交互并完成图表的页面呈现。系统总体框架
如图1所示，平台分为数据存储层、业务逻辑层、可视化展示层三部分。车辆信息的可视化展
龙源期刊网
示，包括车辆的运行状态、位置管理、故障管理、统计与分析等，在具体表现方式上以柱形
图、饼图、热力图等多种方式呈现，提供给用户一种友好的交互界面。
2.2 ECharts的引入与图表绘制
首先，用户从官网下载ECharts库文件，像普通Java Script库一样用script标签进行引
入，如。其次，在页面绘制图表的位置，为ECharts设置一个具备高宽的DOM容器，一个带
有id属性的div层。最后，编写JavaScript脚本，通过该脚本完成以下工作：
（1）基于已有的DOM容器，使用init方法初始化ECharts实例；（2）准备图表的配置
项，并获取图表相关数据，图表数据常常通过Ajax技术异步调用数据库访问技术获取；（3）
通过setOption方法，为ECharts实例图表指定配置项和数据。
图表绘制总体流程如图2所示。
2.3 ECharts可视化实现
以新能源汽车燃料电池电压实时状态图的绘制为例，介绍基于ECharts工具的图表可视化
应用方法。具体流程如下：首先，电池的状态数据通过车载终端设备发送给服务器，通过无线
传输后在服务器端被解析并写入数据库存储；然后，利用Ajax异步传输技术实时向服务器发
送请求，服务器访问数据库后，以JSON格式数据返回给页面；最后，由Ajax传递给ECharts
进行绘制，终将图表呈现在Web页面中。
在具体实现上，需要创建div容器放置ECharts图表并初始化，然后使用setOption方法为
图表指定配置项。接下来，定义getBattery_VoltageData（）方法。通过Ajax技术，向Spring
MVC的控制器发送请求，并传递车牌和当前时间两个参数，url配置项提供请求地址，经后台
处理后，从数据库返回电池电压实时数据。
3 可视化效果
新能源电动汽车监控服务平台实现了在线车辆的状态监控与查询、位置管理、维保等功
能，以可视化方式对相关状态和分析数据进行展示。
3.1 监控与统计分析
该服务平台收集车辆运行数据，可以基于实际应用需求对车辆运行的历史数据进行统计分
析，包括能源转换率，电流电压状态，驾驶行为分析、故障分析等。如故障汇总和分析方面，
基于电动汽车所有故障数据分析汇总，包括BMS数据、驱动电机数据、充放电数据等故障报
警，方便电动汽车实时发现故障并及时进行处理，为售后和运营安全保驾护航。
龙源期刊网
3.2 查询与显示
服务平台首先实现对运行车辆的实时监控，包括整车、驱动电机、发动机、极值信息、电
池信息、位置信息、运行轨迹等关键信息，可以按照筛选条件对车辆运行的各种历史数据进行
单独或组合查询，以报表方式予以呈现或通过折线图、仪表盘或者其他形式的图表进行可视化
展示。
4 结 论
本文针对新能源电动汽车监控和服务可视化应用的实际需求，给出了一种基于ECharts的
可视化设计和实现。该监控服务平台根据实际需要，通过ECharts工具实现地图、关系图、仪
表盘等多种形式的动态数据制图，对日常运行中新能源车辆各类监控信息和分析结果进行展
示，帮助管理机构更直观、全面地了解车辆运行的实时状态，更有效地进行车辆管理和用户服
务。相比其他的可视化开发工具，ECharts具有易于使用、开发高效等特点，成为大数据时代
实现图表可视化的重要工具。在新能源汽車监控平台可视化开发中配合Ajax等技术的运用，
很好地满足了应用需求。
参考文献：
[1] 赵佳，赵浩，王力，等.新能源汽车远程监控系统平台的设计与搭建 [J].汽车电器，
2013（12）：16-20.
[2] 刘文军，蒋中，蒋骊冬.新能源汽车数据采集与状态监测系统 [J].计算机系统应用，
2017，26（6）：103-107.
[3] 任慧君，许涛，李响.利用车载GPS轨迹数据实现公交车驾驶安全性分析 [J].武汉大学
学报（信息科学版），2014，39（6）：739-744.
[4] 王春芳，姜朋昌，侯素礼，等.基于远程监控的纯电动汽车故障分析技术 [J].汽车工程
师，2016（3）：36-39.
[5] 冀潇，李杨.采用ECharts可视化技术实现的数据体系监控系统 [J].计算机系统应用，
2017，26（6）：72-76.
[6] 杨建业，耿建平.基于HTML5的实时Web数据监测系统 [J].桂林电子科技大学学报，
2015，35（2）：136-141.
[7] 庞聪，杜瑞林，王磊.基于ECharts Library和File API的本地数据绘图技术 [J].温州职业
技术学院学报，2016，16（4）：53-55.
龙源期刊网
[8] 郑幸源，洪亲，蔡坚勇，等.基于AJAX异步传输技术与Echarts3技术的动态数据绘图
实现 [J].软件导刊，2017，16（3）：143-145.
[9] Yunpeng Wang，Yuzhou Li，Daxin Tian，et al. A method of visual management platform
for connected vehicles data，in Proc of en，China，2016：175-179.
作者简介：汤晓燕（1981-），女，江苏苏州人，本科，教师，讲师。主要研究方向：软
件开发及数据可视化；刘文军（1981-），男，山东临沂人，博士，CCF会员。主要研究方
向：无线传感器网络、算法优化与分析。
版权声明：本文标题：基于ECharts的电动汽车监控可视化研究 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1713980096a660341.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论