211133631_基于ECharts_的备品备件数据统计分析的探索与实现_

智能智造与信息技术

DOI：10.16660/.1674-098X.2207-5640-7963

2022 NO.30

Science and Technology Innovation Herald

科技创新导报

基于ECharts的备品备件数据统计分析的

探索与实现

李剑秋

1

齐奥

1

段野

1

程凯

1

杨坤

2

（1.江苏核电有限公司 江苏连云港 222000；2.山东信诚同舟电力科技有限公司 山东济南 250000）

摘　要： 本文针对继电保护智能运维过程中的相关备品备件管理和数据利用率低的问题进行了讨论与分析，

提出了对继电保护智能运维过程中的相关备品备件进行数字化管理和对数据进行统计分析的方法，利用

ECharts图形框架，把备品备件的各种数据进行图形化的直观展示，让备品备件相关数据能够得到有效利用。

最后，本文以继电保护智能运维系统中对备品备件数据的统计功能为例，详细论述了方案的实现过程，希望

通过研究，可以为备品备件的充分利用与继电保护智能运维提供支持。

关键词：继 电保护智能运维 备品备件 统计分析 ECharts

中图分类号： TM73文献标识码： A文章编号：1 674-098X(2022)10(c)-0109-04

Exploration and Implementation of the Statistical Analysis

of Spare Parts Data Based on EChart

LI Jianqiu

1

QI Ao

1

DUAN Ye

1

CHENG Kai

1

YANG Kun

2

( u Nuclear Power Co., Ltd., Lianyungang, Jiangsu Province, 222000 China;ng Xincheng

TongZhou Power Technology Co., Ltd., Jinan, Shandong Province, 250000 China )

Abstract: This paper discusses and analyzes the problems of low data utilization and management of relevant spare

parts in the intelligent operation and maintenance process of relay protection. Firstly, the method of digital management

of relevant spare parts and statistical analysis of data in the process of intelligent operation and maintenance of relay

protection is proposed. Using ECharts graphic framework, various data of spare parts are graphically and intuitively

displayed, so that relevant data of spare parts can be effectively used. Finally, taking the statistical function of spare

parts data in the relay protection intelligent operation and maintenance system as an example, this paper also introduces

the implementation process of the scheme in detail. It is hoped that the research can provide support for the full use

of spare parts and intelligent operation and maintenance of relay protection.

Key Words: Relay protection intelligent operation and maintenance; Spare parts; Statistical analysis; Echarts

在厂站建设与运维过程中，会采购储备相关备品备

件，如标签打印工具及耗材、开关电源、继电器、安全工

出库、归还、报废等操作，通过一系列的业务流程实现备

品备件的数字化管理。在这个业务流程中会产生大量

的数据，而对于这些数据缺乏统计分析，这就使得这些

数据被浪费，也使得备品备件不能得到有效的管理，并

最终导致出现数据混乱及管理困难等一系列问题。

基于上述现状，本文提出引入相关数据的统计分析

频率的信息，以及备品备件库存告警等维度进行统计。

通过对业务操作流程中产生的数据进行统计处理后，以

表格或者是图形的方式来进行展示，能对备品备件仓库

的库存状态进行直观的反映，让工作人员可以更好地掌

具、防火防爆器材等设备，采购的备品备件会进行入库、功能，主要对备品备件的综合信息、对入库出库数量和

作者简介：李剑秋（1985—），男，本科，高级工程师，研究方向为继电保护。

杨坤（1982—），男，本科，工程师，研究方向为继电。

科技创新导报 Science and Technology Innovation Herald

109

Copyright©博看网. All Rights Reserved.

科技创新导报

2022 NO.30

Science and Technology Innovation Herald

智能智造与信息技术

案，能够被多种编程语言调用，在使用前首先需要将

SWF文件放入服务器中。Fushion Charts使得图表的

源，故首先需要将图标数据转换为Flash能解析的XML

格式，其次在使用过程中需要实例化GraphConfig对

象。使用GraphConfig对象的方法可用来设置图形的

X、Y坐标轴及图形标题等，最终将将XML格式的数据

传回前台，调用Fusion Charts的updateChartXML（char⁃

tId，strXML）方法将图形展示出来。

创建过程十分方便，它使用XML格式的数据作为数据

握备品备件仓库的各种信息，以此来对备品备件仓库进

行更好的管理，为后续的采购储备工作提供良好的数据

基础，同时还可以为业务流程的优化提供支持。

1 问题分析

在业务过程中产生的数据是杂乱无章的，需要将

数据进行功能性的划分，如备品备件入库、出库过程中

产生的数据可进行各个流程节点所操作的数量及各种

备品备件的库存告警的统计等，可以将统计分析划分

为以下几个方面：（1）对备品备件各个操作流程数量的

统计（入库、出库、归还、报废）；（2）对备品备件年度时

间范围内每个月的入库数量统计；（3）对备品备件年度

时间范围内每个月的出库数量统计；（4）对备品备件库

存阈值告警的统计。

对于数据而言，人们对数据的关注点往往不在精

确程度上，而在于数据的“量级”“对比”“趋势”上。在

数据的呈现方式上，表格的展示能力有限，无法进行更

形象的数据展现，此时使用图形化的展示会使数据的

展示更加直观，更能方便用户对数据的观察及理解。

能，概括来讲，Fushion Charts的图表下钻功能可分为

Simple link和Chart links两类，调用JavaScript函数的热

面不涉及任何页面刷新。

2.2 ECharts

ECharts是基于Canvas的Javascript图表库，其效果

Fushion Charts中的所有图表都支持向下钻取功

点链接可将动态XML数据同步到服务器并且前端页

［1-2］

生动并且交互性强，可个性定制数据展示的图表。在

使用过程中，经常会用到ECharts提供的拖拽重计算、数

据视图、值域漫游、动态类型切换、图例开关、数据区域选

择等功能，这些功能特性极大地增强了用户体验。

ECharts通过数据进行驱动，数据的改变直接驱动

2 技术方案

在展示方面是用图形库技术将数据以图形的方式

呈现，目前主流的图形库分为两种，一种是基于SVG矢

量图的图表库，另一种为基于Canvas的JavaScript图标

库，其分别以Fushion Charts与ECharts为代表。

2.1 Fushion Charts

它是一个跨浏览器、跨平台的Flash图表组件解决方

［3-4］

图表的变化。这就为动态数据的实现提供了更加

便捷的途径，只要获得相关数据，并将数据填入其中，

ECharts就能够找到两组数据之间的差异，并选择合适

［5-6］

的动画来对数据的变化进行表现，同时配合time⁃

Fushion Charts是基于SVG矢量图的Flash图表库，

line组件，还可以在更广的时间维度上对数据的信息

进行表现，如图1所示。

图1　ECharts实现不同年份数据动态切换

110

科技创新导报 Science and Technology Innovation Herald

Copyright©博看网. All Rights Reserved.

智能智造与信息技术

2.3 技术选型

通过对这两种图形框架的分析，可得出以下结论。

（1）基于开发成本的考虑，Fushion Charts有免费版

本可以使用，ECharts也是完全免费的。

（2）在显示效果方面，免费版本的Fushion Charts显

示效果差强人意，而使用ECharts生成的图形颜色对比度

和鲜明度明显更加出色，效果更加绚丽，并且交互性强。

ECharts的功能性强于Fushion Charts。

器实现3D图形，显示效果非常出色。

Fushion Charts基于SVG矢量图，在性能方面Fushion

Charts的表现更加出色。

（5）在加载速度方面，由于ECharts基于Canvas，而

（3）在功能方面，由于ECharts具有多种组件，使得

（4）双方都支持3D图形，但是ECharts可以在浏览

2022 NO.30

Science and Technology Innovation Herald

科技创新导报

开始

页面Ajax请求

数据

后台接收请求

判断请求参数

（年度范围）

3 应用案例

本文选取了继电保护智能运维系统中备品备件年

度时间范围内每个月的入库数量统计功能为例，从数

据获取、数据处理及图形展示等方面进行说明，完整地

介绍一个具体的统计功能的实现。

3.1 数据获取

首先获取表格数据，表格数据是获得图形展示数

据的基础，其获得表格数据的流程图如图2所示。

在得到表格数据List后，接下来对表格数据进行

处理最终得到图形数据，具体步骤如下。

（1）设置图形的属性，如X轴项标签旋转角度、是

否显示缩放条、缩放比例等。

（2）遍历表格数据List，取出List中相应的文件类

型ID、文件类型名称，应上传数量、实际上传数量等信

息，将信息分别放入rList中。

（3）设置图形的标题、副标题、X轴、Y轴名称等

信息。

（4）若rList不为空，遍历rList，将各个附属文件的

数据放入Dto中。

（5）返回Dto数据至前台。

此时后台取数据过程结束，要想生成想要的图形

还需要定义数据模板。

3.2 定义数据模板

故本功能通过柱状图来展示数据，此时需定义柱

状图与折线图option，需要定义图形以下几种属性。

（1）title，即标题，每个图表最多仅有一个标题控

件，每个标题控件可设主副标题。

（2）tooltip，即提示框，鼠标悬浮交互时的信息

提示。

根据年度查询

月份入库数量

根据年份查询

月份出库数量

组合数据装入

List

将List转为JSON

返回浏览器

结束

图2　获得表格数据

（3）legend，即图例，每个图表最多仅有一个图例。

（4）toolbox，即工具箱，每个图表最多仅有一个工

具箱。

（5）calculable，即是否启用拖拽重计算特性，默认

关闭。

（6）xAxis、yAxis，即直角坐标系中横轴数组与纵轴

数组。

（7）series，用于设置图表数据之用，series是一个

对象嵌套的结构。

至此，一个通用的折线图与柱状图数据模板已经

定义完成。

3.3 展示效果

JS文件放入项目中，接下来调用数据展示模板，将后台

科技创新导报 Science and Technology Innovation Herald

在调用数据展示模板前首先需要将ECharts核心

得到的图表数据放入展示模板中，最终展示的图形如

111

Copyright©博看网. All Rights Reserved.

科技创新导报

2022 NO.30

Science and Technology Innovation Herald

智能智造与信息技术

图3　柱状图展示效果

图4　折线图展示效果

图3所示。

在图形右侧会展示工具栏，点击右上角图标可进

行柱状图与折线图的切换，切换后的图形如图4所示。

如图4所示，可以点选底部年份工具条进行动态

切换各个年份的统计数据进行查看。

参考文献

[1]遇炳昕,任光辉,吴金栋,等.基于ECharts的高校实

验室使用效益评估系统设计[J].实验技术与管理,

2020,37(5):241-247.

[2]沈冰.中鼎物流园C区商品车仓库管理系统设计研

究[J].铁道运输与经济,2020,42(4):7-11,17.

[3]朱璐.基于SpringBoot和Echarts的仪表盘Dash⁃

[4]张辛桐.基于Echarts的中集物流大数据管理系统

的模型展示[D].广州:广东工业大学,2019.

[5]刘斌,唐诚,郑向阳,等.基于ECharts的FerryBox水

文数据可视化研究[J].海洋科学,2019,43(1):85-94.

北京:机械工业出版社,2020.

[6]王大伟.ECharts数据可视化：入门、实战与进阶[M].

board系统的设计与实现[D].南京:南京大学,2019.

4 结语

本文针对目前继电保护智能运维系统相关备品备

件数据利用率低，并且没有统一管理的问题进行了讨

论，最终采用ECharts图形框架，将备品备件出库、入库

及库存告警的信息以图形化的方式进行展现，大大提

高了数据的利用率，也为数据分析工作提供了数据基

础及环境基础，在后期优化业务流程方面起到了重要

的作用。

112

科技创新导报 Science and Technology Innovation Herald

Copyright©博看网. All Rights Reserved.