紀德良 鈕高藍 李宏敏 吳尚遠 李俊妮

作為電費核算的關鍵環(huán)節(jié)，電費退補業(yè)務的準確度、科學度、以及對問題描述的清晰程度，都會對電費核算工作產生重要影響。根據(jù)“大營銷”體系建設需要，各省級電網公司需要逐步完善對供電公司的電費集約化管理，同時對電量電費退補工單進行逐一審批。從而減少和杜絕電力營銷差錯，提高精益化、規(guī)范化管理水平。為了提升電力營銷服務質量、監(jiān)控政策性電量電費退補工作進展情況，維護供用電雙方利益，我們需要針對不同區(qū)域研究電量電費退補數(shù)據(jù)，尤其是大額退補業(yè)務及重復退補業(yè)務數(shù)據(jù)。如何讓人們能夠快速理解這些數(shù)據(jù)并對數(shù)據(jù)進行有效利用，從而分析出隱藏的價值信息，是一個迫切需要解決的問題。數(shù)據(jù)可視化通過圖形化手段，將數(shù)據(jù)映射為圖形、符號和顏色等，清晰有效地傳達了信息，大幅度地提高了人們對數(shù)據(jù)的感知與理解程度，便于人們從數(shù)據(jù)中進一步發(fā)現(xiàn)規(guī)律。本文實現(xiàn)了一款基于Vue的電量電費退補可視化展示系統(tǒng)，該系統(tǒng)能夠將Excel形式的用戶檔案數(shù)據(jù)以柱狀圖形式展示，直觀的表達了電費電量退補業(yè)務情況，便于省內不同區(qū)域行業(yè)對標。

一、組件化

1.組件化開發(fā)。在前端開發(fā)領域，組件就是將一段UI樣式和其對應的功能視為獨立的整體，無論這個整體在哪個模塊被調用，它都具有一樣的功能和樣式，從而實現(xiàn)復用，這就是組件化。由此可知，組件化設計是為了增加復用性，靈活性，提高系統(tǒng)設計，從而提高開發(fā)效率。

2.組件化開發(fā)與傳統(tǒng)開發(fā)的區(qū)別。傳統(tǒng)開發(fā)模式存在一定的弊端：第一，代碼無法復用，當多個頁面需要相同或者類似的功能時，會導致代碼重復，為后期維護留下隱患;第二，代碼粒度太大，頁面運行過程中可能會加載大量與該功能點無關的代碼。過多無用代碼會導致頁面解析緩慢;第三，代碼無清晰的界限，容易造成測試瓶頸，也無法獲得保證代碼質量的有效手段。

針對上述問題，組件化開發(fā)應運而生，具有以下顯著特點：第一，高內聚低耦合。將復雜的功能劃分成多個組件，以此降低組件之間的依賴;第二，可重用，方便維護。抽象出項目中公有的UI元素及功能點，封裝成組件。這樣在使用該功能點時，無需重復已有的代碼。另外，當需求變更時，直接修改該組件，便于維護。

3. Vue的組件化。Vue環(huán)境下的組件是具有標識的可復用的 Vue 實例。組件在模板中使用之前需要先進行注冊。Vue提供全局注冊和局部注冊兩種注冊組件的方式，不過目前項目中組件都是通過 Vue.component進行全局注冊。組件注冊時，需要通過Prop 定義組件的一些自定義特性，作用類似于函數(shù)中自定義的變量。組件的每次調用都會創(chuàng)建一個新實例，因此每個組件會獨立維護自身的變量。

二、組件化方案設計

本文借助Vue組件化開發(fā)，封裝Echarts的柱狀圖表庫，抽象出標題、系列數(shù)據(jù)、圖例、坐標軸、背景顏色、系列顏色、字體顏色等配置信息，實現(xiàn)可復用的柱狀圖組件。

1.柱狀圖組件注冊。本文通過Echarts注冊柱狀圖組件，即<echarts-bar>，如下所示。①通過 echarts.init 方法初始化一個針對參數(shù)id的echarts 實例，varbarChart= echarts.init（document.getElementById（id））。②設置option。Option是圖表組件的關鍵，決定圖表所展示的數(shù)據(jù)及樣式，具體設置如下：標題中text設置為參數(shù)name，textStyle的color屬性設置為參數(shù)textColor;背景顏色backgroundColor設置為參數(shù)backColor;X軸和Y軸位置的確定由參數(shù)axisType決定，當axisType取值為0時，橫向的X軸作為標簽軸，縱向的Y軸作為數(shù)值軸;否則，X軸作為數(shù)值軸，Y軸作為標簽軸;圖表中柱體的顏色color屬性設置為參數(shù)seriesColor;數(shù)據(jù)系列series取值于realData。通過循環(huán)realData，將數(shù)值轉換成系列名與數(shù)值一一對應的數(shù)組。③通過setOption方法生成圖表。barChart.setOption（option）。

2.組件調用。對于電量電費退補業(yè)務的五個展示主題，系統(tǒng)調用注冊的<echarts-bar>組件，并傳遞相應的prop參數(shù)。本文以退補筆數(shù)為例，展示（下轉第113頁）（上接第101頁）組件的調用。設置圖表的id設置為“bar1”;標題設置為“退補筆數(shù)”;背景顏色賦值為this.$parent.$data.backColor;柱體顏色賦值為this.$parent.$data.seriesColor;文字顏色賦值為this.$parent.$data.textColor;柱狀圖樣式賦值為this.$parent.$data.type;柱狀圖系列數(shù)據(jù)賦值為this.$parent.$data.realData。當上述變量更改時， Vue雙向數(shù)據(jù)綁定的特性會使得圖表實時改變。

三、系統(tǒng)實現(xiàn)

1.主題展示。①退補筆數(shù)。計算規(guī)則： count“應退補電費_計算”;圖形展示：按“地市公司簡稱”統(tǒng)計“應退補電費_計算”的數(shù)量，排序后取前10名。②退補總電量。計算規(guī)則：sum“應退補電量_計算”（不區(qū)分正負號）。圖形展示：按“地市公司簡稱”統(tǒng)計“應退補電量_計算”的累加值，排序后取前10名。③退補總電費。計算規(guī)則：sum“應退補電費_計算”（不區(qū)分正負號）。圖形展示：按“地市公司簡稱”統(tǒng)計“應退補電費_計算”的累加值，排序后取前10名。④大額退補業(yè)務情況。計算規(guī)則：IF{ （‘應退補電量_計算> ‘近6個月平均電量） OR （‘應退補電費_計算> ‘近6個月平均電費） } THEN 大額退補 ELSE 非大額退補 END，按“地市公司簡稱”統(tǒng)計。圖形展示：按“地市公司簡稱”統(tǒng)計“應退補電量_計算”超過“近6個月平均電量”或者“應退補電費_計算”超過“近6個月平均電費”的數(shù)量，排序后取前10名。⑤重復退補業(yè)務情況。計算規(guī)則：IF { FIXED [用戶編號]：COUNTD（[申請編號]）>3} THEN重復退補ELSE非重復退補END ，按“地市公司簡稱”統(tǒng)計（取前10名）。圖形展示：按“地市公司簡稱”統(tǒng)計當前月發(fā)生兩次及以上退補業(yè)務的用戶次數(shù)，排序后取前10名。

2.圖表定制。系統(tǒng)提供調色盤工具，便于用戶自定義設置圖表的參數(shù)，本文以退補筆數(shù)為例進行展示，如圖所示：

四、總結和展望

本文實現(xiàn)了一款基于Echarts的電量電費退補可視化展示系統(tǒng)，該系統(tǒng)以柱狀圖形式展示電量電費退補數(shù)據(jù)，重點關注大額退補業(yè)務和重復退補業(yè)務，為提升電力營銷服務質量、監(jiān)控電量電費退補工作進展情況提供了有效、直觀的途徑。對于一款數(shù)據(jù)可視化系統(tǒng)而言，核心在于運用視覺元素清晰地表達數(shù)據(jù)背后的故事。后期系統(tǒng)會陸續(xù)增加其他的可視化圖表，不斷提升用戶的定制化需要和視覺體驗。[申明：該論文來源于國家電網科技項目《公司重點領域大數(shù)據(jù)應用技術與模型研究》SGRIJSKJ（2016）1104]

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