基于Vue實(shí)現(xiàn)電量電費(fèi)退補(bǔ)可視化展示

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

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

一、組件化

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

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

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

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

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

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

1.柱狀圖組件注冊(cè)。本文通過(guò)Echarts注冊(cè)柱狀圖組件，即<echarts-bar>，如下所示。①通過(guò) echarts.init 方法初始化一個(gè)針對(duì)參數(shù)id的echarts 實(shí)例，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時(shí)，橫向的X軸作為標(biāo)簽軸，縱向的Y軸作為數(shù)值軸;否則，X軸作為數(shù)值軸，Y軸作為標(biāo)簽軸;圖表中柱體的顏色color屬性設(shè)置為參數(shù)seriesColor;數(shù)據(jù)系列series取值于realData。通過(guò)循環(huán)realData，將數(shù)值轉(zhuǎn)換成系列名與數(shù)值一一對(duì)應(yīng)的數(shù)組。③通過(guò)setOption方法生成圖表。barChart.setOption（option）。

2.組件調(diào)用。對(duì)于電量電費(fèi)退補(bǔ)業(yè)務(wù)的五個(gè)展示主題，系統(tǒng)調(diào)用注冊(cè)的<echarts-bar>組件，并傳遞相應(yīng)的prop參數(shù)。本文以退補(bǔ)筆數(shù)為例，展示（下轉(zhuǎn)第113頁(yè)）（上接第101頁(yè)）組件的調(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)上述變量更改時(shí)， Vue雙向數(shù)據(jù)綁定的特性會(huì)使得圖表實(shí)時(shí)改變。

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

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

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

四、總結(jié)和展望

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

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