基于ECharts的备品备件数据统计分析的探索与实现.pdf

科技创新导报 Science and Technology Innovation Herald科技创新导报2022 NO.30 Science and Technology Innovation Herald智 能 智 造 与 信 息 技 术基于ECharts的备品备件数据统计分析的探索与实现李剑秋1 齐奥1 段野1 程凯1 杨坤2（1.江苏核电有限公司 江苏连云港 222000；2.山东信诚同舟电力科技有限公司 山东济南 250000）摘要：本文针对继电保护智能运维过程中的相关备品备件管理和数据利用率低的问题进行了讨论与分析，提出了对继电保护智能运维过程中的相关备品备件进行数字化管理和对数据进行统计分析的方法，利用ECharts图形框架，把备品备件的各种数据进行图形化的直观展示，让备品备件相关数据能够得到有效利用。最后，本文以继电保护智能运维系统中对备品备件数据的统计功能为例，详细论述了方案的实现过程，希望通过研究，可以为备品备件的充分利用与继电保护智能运维提供支持。关键词：继电保护智能运维 备品备件 统计分析 ECharts中图分类号：TM73文献标识码：A文章编号：1674-098X(2022)10(c)-0109-04Exploration and Implementation of the Statistical Analysis of Spare Parts Data Based on EChartLI Jianqiu1 QI Ao1 DUAN Ye1 CHENG Kai1 YANG Kun2(1.Jiangsu Nuclear Power Co.,Ltd.,Lianyungang,Jiangsu Province,222000 China;2.Shandong 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在厂站建设与运维过程中，会采购储备相关备品备件，如标签打印工具及耗材、开关电源、继电器、安全工具、防火防爆器材等设备，采购的备品备件会进行入库、出库、归还、报废等操作，通过一系列的业务流程实现备品备件的数字化管理。在这个业务流程中会产生大量的数据，而对于这些数据缺乏统计分析，这就使得这些数据被浪费，也使得备品备件不能得到有效的管理，并最终导致出现数据混乱及管理困难等一系列问题。基于上述现状，本文提出引入相关数据的统计分析功能，主要对备品备件的综合信息、对入库出库数量和频率的信息，以及备品备件库存告警等维度进行统计。通过对业务操作流程中产生的数据进行统计处理后，以表格或者是图形的方式来进行展示，能对备品备件仓库的库存状态进行直观的反映，让工作人员可以更好地掌DOI：10.16660/ki.1674-098X.2207-5640-7963作者简介：李剑秋（1985），男，本科，高级工程师，研究方向为继电保护。杨坤（1982），男，本科，工程师，研究方向为继电。109科技创新导报Science and Technology Innovation Herald2022 NO.30 科技创新导报 Science and Technology Innovation Herald智 能 智 造 与 信 息 技 术握备品备件仓库的各种信息，以此来对备品备件仓库进行更好的管理，为后续的采购储备工作提供良好的数据基础，同时还可以为业务流程的优化提供支持。1 问题分析在业务过程中产生的数据是杂乱无章的，需要将数据进行功能性的划分，如备品备件入库、出库过程中产生的数据可进行各个流程节点所操作的数量及各种备品备件的库存告警的统计等，可以将统计分析划分为以下几个方面：（1）对备品备件各个操作流程数量的统计（入库、出库、归还、报废）；（2）对备品备件年度时间范围内每个月的入库数量统计；（3）对备品备件年度时间范围内每个月的出库数量统计；（4）对备品备件库存阈值告警的统计。对于数据而言，人们对数据的关注点往往不在精确程度上，而在于数据的“量级”“对比”“趋势”上。在数据的呈现方式上，表格的展示能力有限，无法进行更形象的数据展现，此时使用图形化的展示会使数据的展示更加直观，更能方便用户对数据的观察及理解。2 技术方案在展示方面是用图形库技术将数据以图形的方式呈现，目前主流的图形库分为两种，一种是基于SVG矢量图的图表库，另一种为基于Canvas的JavaScript图标库，其分别以Fushion Charts与ECharts为代表。2.1 Fushion ChartsFushion Charts是基于SVG矢量图的Flash图表库，它是一个跨浏览器、跨平台的Flash图表组件解决方案，能够被多种编程语言调用，在使用前首先需要将SWF文件放入服务器中。Fushion Charts使得图表的创建过程十分方便，它使用XML格式的数据作为数据源，故首先需要将图标数据转换为Flash能解析的XML格式，其次在使用过程中需要实例化 GraphConfig 对象。使用GraphConfig对象的方法可用来设置图形的X、Y坐标轴及图形标题等，最终将将XML格式的数据传回前台，调用Fusion Charts的updateChartXML（chartId，strXML）方法将图形展示出来。Fushion Charts中的所有图表都支持向下钻取功能，概括来讲，Fushion Charts的图表下钻功能可分为Simple link和Chart links两类，调用JavaScript函数的热点链接可将动态XML数据同步到服务器并且前端页面不涉及任何页面刷新。2.2 EChartsECharts是基于Canvas的Javascript图表库，其效果生动并且交互性强，可个性定制数据展示的图表 1-2。在使用过程中，经常会用到ECharts提供的拖拽重计算、数据视图、值域漫游、动态类型切换、图例开关、数据区域选择等功能，这些功能特性极大地增强了用户体验。ECharts通过数据进行驱动，数据的改变直接驱动图表的变化3-4。这就为动态数据的实现提供了更加便捷的途径，只要获得相关数据，并将数据填入其中，ECharts就能够找到两组数据之间的差异，并选择合适的动画来对数据的变化进行表现5-6，同时配合timeline组件，还可以在更广的时间维度上对数据的信息进行表现，如图1所示。图1ECharts实现不同年份数据动态切换110科技创新导报Science and Technology Innovation Herald科技创新导报 Science and Technology Innovation Herald2022 NO.30 智 能 智 造 与 信 息 技 术2.3 技术选型通过对这两种图形框架的分析，可得出以下结论。（1）基于开发成本的考虑，Fushion Charts有免费版本可以使用，ECharts也是完全免费的。（2）在显示效果方面，免费版本的Fushion Charts显示效果差强人意，而使用ECharts生成的图形颜色对比度和鲜明度明显更加出色，效果更加绚丽，并且交互性强。（3）在功能方面，由于ECharts具有多种组件，使得ECharts的功能性强于Fushion Charts。（4）双方都支持3D图形，但是ECharts可以在浏览器实现3D图形，显示效果非常出色。（5）在加载速度方面，由于ECharts基于Canvas，而Fushion Charts 基于 SVG 矢量图，在性能方面 Fushion Charts的表现更加出色。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，即提示框，鼠标悬浮交互时的信息提示。（3）legend，即图例，每个图表最多仅有一个图例。（4）toolbox，即工具箱，每个图表最多仅有一个工具箱。（5）calculable，即是否启用拖拽重计算特性，默认关闭。（6）xAxis、yAxis，即直角坐标系中横轴数组与纵轴数组。（7）series，用于设置图表数据之用，series是一个对象嵌套的结构。至此，一个通用的折线图与柱状图数据模板已经定义完成。3.3 展示效果在调用数据展示模板前首先需要将ECharts核心JS文件放入项目中，接下来调用数据展示模板，将后台得到的图表数据放入展示模板中，最终展示的图形如开始页面Ajax请求数据后台接收请求判断请求参数（年度范围）根据年度查询月份入库数量根据年份查询月份出库数量组合数据装入List结束将List转为JSON返回浏览器 图2获得表格数据111科技创新导报Science and Technology Innovation Herald2022 NO.30 科技创新导报 Science and Technology Innovation Herald智 能 智 造 与 信 息 技 术图3所示。在图形右侧会展示工具栏，点击右上角图标可进行柱状图与折线图的切换，切换后的图形如图4所示。如图4所示，可以点选底部年份工具条进行动态切换各个年份的统计数据进行查看。4 结语本文针对目前继电保护智能运维系统相关备品备件数据利用率低，并且没有统一管理的问题进行了讨论，最终采用ECharts图形框架，将备品备件出库、入库及库存告警的信息以图形化的方式进行展现，大大提高了数据的利用率，也为数据分析工作提供了数据基础及环境基础，在后期优化业务流程方面起到了重要的作用。参考文献1 遇炳昕,任光辉,吴金栋,等.基于ECharts的高校实验室使用效益评估系统设计J.实验技术与管理,2020,37(5):241-247.2 沈冰.中鼎物流园C区商品车仓库管理系统设计研究J.铁道运输与经济,2020,42(4):7-11,17.3 朱璐.基于 SpringBoot 和 Echarts 的仪表盘 Dashboard系统的设计与实现D.南京:南京大学,2019.4 张辛桐.基于Echarts的中集物流大数据管理系统的模型展示D.广州:广东工业大学,2019.5 刘斌,唐诚,郑向阳,等.基于ECharts的FerryBox水文数据可视化研究J.海洋科学,2019,43(1):85-94.6 王大伟.ECharts数据可视化：入门、实战与进阶M.北京:机械工业出版社,2020.图3柱状图展示效果图4折线图展示效果112