紀(jì)德良 鈕高藍(lán) 李宏敏 吳尚遠(yuǎn) 李俊妮

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

一、組件化

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

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

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

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

二、組件化方案設(shè)計

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

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

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

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

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

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

四、總結(jié)和展望

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

（作者單位：浙江華云信息科技有限公司? ? 北京國電通網(wǎng)絡(luò)技術(shù)有限公司）