基于Vue实现电量电费退补可视化展示

纪德良 钮高蓝 李宏敏 吴尚远 李俊妮

作为电费核算的关键环节，电费退补业务的准确度、科学度、以及对问题描述的清晰程度，都会对电费核算工作产生重要影响。根据“大营销”体系建设需要，各省级电网公司需要逐步完善对供电公司的电费集约化管理，同时对电量电费退补工单进行逐一审批。从而减少和杜绝电力营销差错，提高精益化、规范化管理水平。为了提升电力营销服务质量、监控政策性电量电费退补工作进展情况，维护供用电双方利益，我们需要针对不同区域研究电量电费退补数据，尤其是大额退补业务及重复退补业务数据。如何让人们能够快速理解这些数据并对数据进行有效利用，从而分析出隐藏的价值信息，是一个迫切需要解决的问题。数据可视化通过图形化手段，将数据映射为图形、符号和颜色等，清晰有效地传达了信息，大幅度地提高了人们对数据的感知与理解程度，便于人们从数据中进一步发现规律。本文实现了一款基于Vue的电量电费退补可视化展示系统，该系统能够将Excel形式的用户档案数据以柱状图形式展示，直观的表达了电费电量退补业务情况，便于省内不同区域行业对标。

一、组件化

1.组件化开发。在前端开发领域，组件就是将一段UI样式和其对应的功能视为独立的整体，无论这个整体在哪个模块被调用，它都具有一样的功能和样式，从而实现复用，这就是组件化。由此可知，组件化设计是为了增加复用性，灵活性，提高系统设计，从而提高开发效率。

2.组件化开发与传统开发的区别。传统开发模式存在一定的弊端：第一，代码无法复用，当多个页面需要相同或者类似的功能时，会导致代码重复，为后期维护留下隐患;第二，代码粒度太大，页面运行过程中可能会加载大量与该功能点无关的代码。过多无用代码会导致页面解析缓慢;第三，代码无清晰的界限，容易造成测试瓶颈，也无法获得保证代码质量的有效手段。

针对上述问题，组件化开发应运而生，具有以下显著特点：第一，高内聚低耦合。将复杂的功能划分成多个组件，以此降低组件之间的依赖;第二，可重用，方便维护。抽象出项目中公有的UI元素及功能点，封装成组件。这样在使用该功能点时，无需重复已有的代码。另外，当需求变更时，直接修改该组件，便于维护。

3. Vue的组件化。Vue环境下的组件是具有标识的可复用的 Vue 实例。组件在模板中使用之前需要先进行注册。Vue提供全局注册和局部注册两种注册组件的方式，不过目前项目中组件都是通过 Vue.component进行全局注册。组件注册时，需要通过Prop 定义组件的一些自定义特性，作用类似于函数中自定义的变量。组件的每次调用都会创建一个新实例，因此每个组件会独立维护自身的变量。

二、组件化方案设计

本文借助Vue组件化开发，封装Echarts的柱状图表库，抽象出标题、系列数据、图例、坐标轴、背景颜色、系列颜色、字体颜色等配置信息，实现可复用的柱状图组件。

1.柱状图组件注册。本文通过Echarts注册柱状图组件，即<echarts-bar>，如下所示。①通过 echarts.init 方法初始化一个针对参数id的echarts 实例，varbarChart= echarts.init（document.getElementById（id））。②设置option。Option是图表组件的关键，决定图表所展示的数据及样式，具体设置如下：标题中text设置为参数name，textStyle的color属性设置为参数textColor;背景颜色backgroundColor设置为参数backColor;X轴和Y轴位置的确定由参数axisType决定，当axisType取值为0时，横向的X轴作为标签轴，纵向的Y轴作为数值轴;否则，X轴作为数值轴，Y轴作为标签轴;图表中柱体的颜色color属性设置为参数seriesColor;数据系列series取值于realData。通过循环realData，将数值转换成系列名与数值一一对应的数组。③通过setOption方法生成图表。barChart.setOption（option）。

2.组件调用。对于电量电费退补业务的五个展示主题，系统调用注册的<echarts-bar>组件，并传递相应的prop参数。本文以退补笔数为例，展示（下转第113页）（上接第101页）组件的调用。设置图表的id设置为“bar1”;标题设置为“退补笔数”;背景颜色赋值为this.$parent.$data.backColor;柱体颜色赋值为this.$parent.$data.seriesColor;文字颜色赋值为this.$parent.$data.textColor;柱状图样式赋值为this.$parent.$data.type;柱状图系列数据赋值为this.$parent.$data.realData。当上述变量更改时， Vue双向数据绑定的特性会使得图表实时改变。

三、系统实现

1.主题展示。①退补笔数。计算规则： count“应退补电费_计算”;图形展示：按“地市公司简称”统计“应退补电费_计算”的数量，排序后取前10名。②退补总电量。计算规则：sum“应退补电量_计算”（不区分正负号）。图形展示：按“地市公司简称”统计“应退补电量_计算”的累加值，排序后取前10名。③退补总电费。计算规则：sum“应退补电费_计算”（不区分正负号）。图形展示：按“地市公司简称”统计“应退补电费_计算”的累加值，排序后取前10名。④大额退补业务情况。计算规则：IF{ （‘应退补电量_计算> ‘近6个月平均电量） OR （‘应退补电费_计算> ‘近6个月平均电费） } THEN 大额退补 ELSE 非大额退补 END，按“地市公司简称”统计。图形展示：按“地市公司简称”统计“应退补电量_计算”超过“近6个月平均电量”或者“应退补电费_计算”超过“近6个月平均电费”的数量，排序后取前10名。⑤重复退补业务情况。计算规则：IF { FIXED [用户编号]：COUNTD（[申请编号]）>3} THEN重复退补ELSE非重复退补END ，按“地市公司简称”统计（取前10名）。图形展示：按“地市公司简称”统计当前月发生两次及以上退补业务的用户次数，排序后取前10名。

2.图表定制。系统提供调色盘工具，便于用户自定义设置图表的参数，本文以退补笔数为例进行展示，如图所示：

四、总结和展望

本文实现了一款基于Echarts的电量电费退补可视化展示系统，该系统以柱状图形式展示电量电费退补数据，重点关注大额退补业务和重复退补业务，为提升电力营销服务质量、监控电量电费退补工作进展情况提供了有效、直观的途径。对于一款数据可视化系统而言，核心在于运用视觉元素清晰地表达数据背后的故事。后期系统会陆续增加其他的可视化图表，不断提升用户的定制化需要和视觉体验。[申明：该论文来源于国家电网科技项目《公司重点领域大数据应用技术与模型研究》SGRIJSKJ（2016）1104]

（作者單位：浙江华云信息科技有限公司    北京国电通网络技术有限公司）