企亚技术应用
I 子V m 实现屯量屯资退补可杬化展禾
□杭州纪德良钮高蓝李宏敏吴尚远李俊妮
作为电费核算的关键环节，电费退补业务的准确 度、科学度、以及对问题描述的清晰程度，都会对电费 核算工作产生重要影响。根据“大营销”体系建设需 要，各省级电网公司需要逐步完善对供电公司的电费集 约化管理，同时对电量电费退补工单进行逐一审批。从 而减少和杜绝电力营销差错，提高精益化、规范化管理 水平。为了提升电力营销服务质量、监控政策性电量电 费退补工作进展情况，维护供用电双方利益，我们需要 针对不同区域研究电量电费退补数据，尤其是大额退补 业务及重复退补业务数据。如何让人们能够快速理解这 些数据并对数据进行有效利用，从而分析出隐藏的价值 信息，是一个迫切需要解决的问题。数据可视化通过图 形化手段，将数据映射为图形、符号和颜等，清晰有 效地传达了信息，大幅度地提高了人们对数据的感知与 理解程度，便于人们从数据中进一步发现规律。本文实 现了一款基于Vue 的电量电费退补可视化展示系统，该系 统能够将Excel 形式的用户档案数据以柱状图形式展示， 直观的表达了电费电量退补业务情况，便于省内不同区 域行业对标。 居家地毯
组件化开发。在前端开发领域，组件就是将一段 UI 样式和其对应的功能视为独立的整体，无论这个整体 在哪个模块被调用，它都具有一样的功能和样式，从而 实现复用，这就是组件化。由此可知，组件化设计是为 了增加复用性，灵活性，提高系统设计，从而提高开发 效率。
2.
组件化开发与传统开发的区别。传统开发模式存在 一定的弊端：第一，代码无法复用，当多个页面需要相 同或者类似的功能时，会导致代码重复，为后期维护留 下隐患；第二，代码粒度太大，页面运行过程中可能会 加载大量与该功能点无关的代码。过多无用代码会导致 页面解析缓慢；第三，代码无清晰的界限，容易造成测 试瓶颈，也无法获得保证代码质量的有效手段。 针对上述问题，组件化开发应运而生，具有以下显 著特点：第一，高内聚低耦合。将复杂的功能划分成多自动
个组件，以此降低组件之间的依赖；第二，可重用，方 便维护。抽象出项目中公有的UI 元素及功能点，封装成 组件。这样在使用该功能点时，无需重复已有的代码。 另外，当需求变更时，直接修改该组件，便于维护。
3. Vue 的组件化。Vue 环境下的组件是具有标识的可 复用的Vue 实例。组件在模板中使用之前需要先
进行注 册。Vue 提供全局注册和局部注册两种注册组件的方式， 不过目前项目中组件都是通过Vue ponentd ®行全局注 册。组件注册时，需要通过Prop 定义组件的一些自定义 特性，作用类似于函数中自定义的变量。组件的每次调用 都会创建一个新实例，因此每个组件会独立维护自身的 变量。
二、组件化方案设计
本文借助Vue 组件化开发，封装Echarts 的柱状图表 库，抽象出标题、系列数据、图例、坐标轴、背景颜 、系列颜、字体颜等配置信息，实现可复用的柱 状图组件。
uv转印胶1.
柱状图组件注册。本文通过Echarts 注册柱状图组
件，即<echarts-bar>，如下所7T C 。①通过 echarts.init 方 法初始化一■个针对参数id 的echarts 实例，varbarChart=
echarts.init ( ElementByld ( id ) ) 〇 ②设置
option。Option 是图表组件的关键，决定图表所展本的数
蒸汽消音器
据及样式，具体设置如下：标题中text 设置为参数
name, textStyle 的color 属性设置为参数textColor；背景颜 backgroundColor 设置为参数backColor ; X 轴和Y 轴位置的
确定由参数axisType 决定，当axisType 取值为0时，横向
的X 轴作为标签轴，纵向的Y 轴作为数值轴；否则，X 轴
作为数值轴，Y 轴作为标签轴；图表中柱体的颜color 属 性设置为参数seriesColor；数据系列series 取值于
realData 。通过循环r e a l D a t a ，将数值转换成系列名与
数值一一对应的数组。③通过setOption 方法生成图表。
barChart. setOption ( option ) 〇
2. 组件调用。对于电量电费退补业务的五个展示主
负离子灯题，系统调用注册的<eC hartS -bar >组件，并传递相应的 prop 参数。本文以退补笔数为例，展示（
下转第113页）
89
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议