基于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]

（作者單位：浙江華云信息科技有限公司? ? 北京國電通網絡技術有限公司）