基于Vue框架的云南省教育扶貧可視化系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

呂維廣，申浩如，孫定蜜，楊延仁，胡正南，黎諜，饒肖

摘要：通過(guò)對(duì)云南省教育扶貧階段性成果進(jìn)行分析，確定數(shù)據(jù)、名言、模范、地圖、政策、學(xué)術(shù)6個(gè)典型展示維度，采用前后端分離開(kāi)發(fā)模式和增量軟件開(kāi)發(fā)模型，基于Vue、ECharts、Maven、MySQL工具，設(shè)計(jì)開(kāi)發(fā)該信息可視化系統(tǒng)。將云南省教育扶貧積累的異構(gòu)、多源、空間相關(guān)數(shù)據(jù)進(jìn)行表征，以數(shù)字化動(dòng)態(tài)交互形式展現(xiàn)出來(lái)，為云南省教育精準(zhǔn)扶貧提供直觀的可視化分析手段，形成窗口宣傳效應(yīng)。

關(guān)鍵詞：云南省；教育扶貧；可視化系統(tǒng)；Vue；ECharts

中圖分類(lèi)號(hào)：TP311.52? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2022）32-0034-04

1 概述

教育扶貧是贏得中國(guó)脫貧攻堅(jiān)全面勝利的重要一役。由于云南省的地理復(fù)雜性和民族多樣性，使云南教育扶貧更具挑戰(zhàn)性。本文基于數(shù)據(jù)統(tǒng)計(jì)原理，綜合使用Vue、ECharts、Maven等工具對(duì)云南省相關(guān)教育扶貧數(shù)據(jù)進(jìn)行可視化表征，從地理空間和非地理空間維度直觀展現(xiàn)這些海量、異構(gòu)、多源數(shù)據(jù)，為政府職能部門(mén)、教育行政主管部門(mén)、學(xué)術(shù)研究群體提供有價(jià)值的可視化結(jié)果，助推云南省教育扶貧精準(zhǔn)施策，實(shí)現(xiàn)貧困人口“脫真貧、真脫貧”[1]的愿景。

2 云南省教育扶貧可視化系統(tǒng)總體設(shè)計(jì)

2.1 系統(tǒng)架構(gòu)設(shè)計(jì)

教育扶貧可視化系統(tǒng)采用B/S體系結(jié)構(gòu)，前端使用Vue框架，它是一個(gè)擴(kuò)展性和復(fù)用性較強(qiáng)的輕量級(jí)漸進(jìn)式JavaScript框架，基于數(shù)據(jù)驅(qū)動(dòng)、交互展示和視圖組件化構(gòu)建前端頁(yè)面[2]。后端服務(wù)程序使用Maven項(xiàng)目管理工具創(chuàng)建，自動(dòng)管理依賴(lài)包和版本配置，通過(guò)IDEA一鍵發(fā)布調(diào)試，大幅降低包的版本依賴(lài)問(wèn)題[3]。最終將負(fù)責(zé)業(yè)務(wù)邏輯的后端工程打包通過(guò)阿里云Tomcat服務(wù)器發(fā)布。

前后端數(shù)據(jù)交互使用axios進(jìn)行異步請(qǐng)求同步化處理，減輕后端數(shù)據(jù)處理壓力[4]。前后端分離開(kāi)發(fā)，前端代碼由阿里云的對(duì)象存儲(chǔ)OSS服務(wù)托管，降低服務(wù)器帶寬壓力[5]。此外，為解決前后端分離開(kāi)發(fā)導(dǎo)致的跨域請(qǐng)求問(wèn)題，項(xiàng)目使用Filter過(guò)濾器對(duì)請(qǐng)求進(jìn)行過(guò)濾處理[6]。底層數(shù)據(jù)存管采用MySQL數(shù)據(jù)庫(kù)。系統(tǒng)架構(gòu)如圖1所示。

系統(tǒng)選用增量軟件開(kāi)發(fā)模型。原因有三：1）開(kāi)發(fā)時(shí)人員可靈活分配，能在較短時(shí)間內(nèi)向甲方提交部分可操作產(chǎn)品，有效解決了參與系統(tǒng)開(kāi)發(fā)的學(xué)生成員因?qū)W業(yè)導(dǎo)致頻繁換人的客觀實(shí)際。2）采用“分而治之”思想，把問(wèn)題分解成可控的子模塊，先完成需求穩(wěn)定的核心構(gòu)件，避免團(tuán)隊(duì)因長(zhǎng)時(shí)間需求任務(wù)而感到沮喪。3）增量模型并非一步跨到未來(lái)，讓開(kāi)發(fā)者逐步適應(yīng)全棧開(kāi)發(fā)技術(shù)，符合在校學(xué)生軟件開(kāi)發(fā)訓(xùn)練的普遍規(guī)律。

系統(tǒng)架構(gòu)設(shè)計(jì)必須注意：1）增量開(kāi)發(fā)模型最大特點(diǎn)是具有較好的擴(kuò)展性，在開(kāi)發(fā)過(guò)程中必須注意接口定義。2）由于系統(tǒng)各個(gè)模塊之間耦合度較低，導(dǎo)致代碼的審查難度增加，容易出現(xiàn)代碼冗余情況，所以必須定義好一個(gè)可行的開(kāi)發(fā)過(guò)程。3）由于各個(gè)組件是逐步并入軟件體系架構(gòu)中，系統(tǒng)內(nèi)核是十分關(guān)鍵的部分，內(nèi)核不精簡(jiǎn)將會(huì)使增量模型退化成邊做邊改模型[7]。

項(xiàng)目開(kāi)發(fā)中的依賴(lài)庫(kù)如表1所示。

2.2 功能模塊設(shè)計(jì)

系統(tǒng)有6個(gè)模塊：教育扶貧里程碑、每日扶貧金句、教育扶貧先鋒模范、地圖可視化綜合交互展示、教育扶貧政策方針、教育扶貧學(xué)術(shù)研究。根據(jù)不同數(shù)據(jù)屬性將這些數(shù)據(jù)分別通過(guò)柱狀圖、曲線圖、堆疊圖、矢量地圖、輪播圖、主題詞云等多種可視化形式進(jìn)行表征，詳見(jiàn)表2。

2.3 后臺(tái)數(shù)據(jù)庫(kù)設(shè)計(jì)

后端資源通過(guò)MySQL存儲(chǔ)，使用JDBC連接池工具進(jìn)行數(shù)據(jù)庫(kù)連接管理，優(yōu)點(diǎn)是無(wú)須手動(dòng)管理數(shù)據(jù)庫(kù)連接對(duì)象，按需取用，使用結(jié)束釋放回連接池即可，避免數(shù)據(jù)庫(kù)未被釋放帶來(lái)的風(fēng)險(xiǎn)。根據(jù)系統(tǒng)功能描述，設(shè)計(jì)數(shù)據(jù)庫(kù)表，其中下劃線字段為表主鍵：

1）城市：city （ID， 城市名， 所屬縣名， 扶貧舉措）。進(jìn)庫(kù)記錄88條。

2）金句：famous_remarks （ID， 發(fā)布時(shí)間， 內(nèi)容， 發(fā)言人） 。進(jìn)庫(kù)記錄12條。

3）人物：people （ID， 姓名， 身份、事跡簡(jiǎn)介） 。進(jìn)庫(kù)記錄27條。

4）政策：policy （ID， 政策名稱(chēng)， 發(fā)布機(jī)構(gòu)， 官方URL） 。進(jìn)庫(kù)記錄42條。

5）詞云：word_cloud （ID， 關(guān)鍵詞， 引用次數(shù)） 。進(jìn)庫(kù)記錄1000條。

3 云南省教育扶貧可視化系統(tǒng)核心功能實(shí)現(xiàn)

3.1 系統(tǒng)界面

圖2給出了云南省教育扶貧可視化系統(tǒng)界面設(shè)計(jì)，界面以深紅主調(diào)為背景，嵌入了省會(huì)昆明市的傳統(tǒng)地標(biāo)“金馬碧雞”牌坊和新建地標(biāo)高度407米的“春之眼”，以及滇西重鎮(zhèn)大理市的蒼山元素，寓意近年云南省扶貧取得的豐碩成果。

3.2 圖文信息展示模塊

教育扶貧里程碑、每日扶貧金句、教育扶貧模范這三個(gè)模塊主要使用Element UI組件劃分頁(yè)面框架，并利用CSS渲染文字，同時(shí)還使用JavaScript結(jié)合@keyframes實(shí)現(xiàn)圖片和文字的滾動(dòng)播放效果。

3.3 基于ECharts和地理信息標(biāo)注的可視化模塊

針對(duì)項(xiàng)目開(kāi)發(fā)難度較大的地圖綜合展示模塊，該模塊采用ECharts的map類(lèi)型地圖圖表，將具有空間地理特征的信息可視表征。首先，地圖繪制是通過(guò)阿里云提供的數(shù)據(jù)可視化平臺(tái)http：//datav.aliyun.com獲取云南省地理數(shù)據(jù)結(jié)構(gòu)編碼JSON文件，在渲染前將文件通過(guò)GET或POST方法獲得地理結(jié)構(gòu)數(shù)據(jù)，之后使用echarts.registerMap（'yunnan'， geoJson）方法注冊(cè)地圖，然后對(duì)地圖進(jìn)行相關(guān)配置。在配置項(xiàng)中，data是該圖表渲染數(shù)據(jù)的接口，其中包括城市名和權(quán)值（決定地圖塊著色深淺），渲染時(shí)可根據(jù)城市名和權(quán)值進(jìn)行自動(dòng)關(guān)聯(lián)，權(quán)值越高的城市區(qū)域顯示顏色越深。城市顏色渲染梯度是通過(guò)配置視覺(jué)映射組件visualMap控制。代碼如下：

geo：{ //地理坐標(biāo)系組件，支持地理坐標(biāo)上繪制散點(diǎn)、線集

type：'map'， //指定圖表類(lèi)型為地圖

map：'yunnan'， //自定義擴(kuò)展圖表類(lèi)型，參數(shù)使用注冊(cè)時(shí)的變量名

roam：true， //關(guān)閉移動(dòng)漫游

zoom：1.2， //設(shè)置初始化地圖縮放比例

selectedMode：false， //設(shè)為不可移動(dòng)地圖

data：mapData， //地圖渲染數(shù)據(jù)包括：mapData{[name：城市名，value：權(quán)值]}

label： {

show： false， //不顯示標(biāo)簽

fontSize： '50px' //設(shè)置標(biāo)簽顯示字體大小

}，

}

visualMap： [{ //視覺(jué)映射組件配置

bottom： '45%'， //組件離容器底部位置

left：'5%'， //組件離容器左邊位置

text： ['High'， 'Low']， //兩端的文字

realtime： true， //拖拽時(shí)實(shí)時(shí)更新渲染

calculable： true， //顯示拖拽手柄，手柄能拖拽調(diào)整選中范圍

}]

同時(shí)在地圖上標(biāo)注“州市”散點(diǎn)圖，在上述geo地理坐標(biāo)系統(tǒng)進(jìn)行疊加渲染，配置時(shí)data是散點(diǎn)圖渲染的數(shù)據(jù)接口，數(shù)據(jù)結(jié)構(gòu)包括必選項(xiàng)散點(diǎn)geo坐標(biāo)位置和附加描述信息項(xiàng)，并指明該散點(diǎn)圖是基于何種坐標(biāo)系渲染。默認(rèn)情況下鼠標(biāo)移動(dòng)到散點(diǎn)上浮動(dòng)提示框只顯示諸如經(jīng)緯度和地名等默認(rèn)信息，如要顯示指定描述信息需通過(guò)配置浮動(dòng)提示框tooltip實(shí)現(xiàn)，如要實(shí)現(xiàn)根據(jù)點(diǎn)擊對(duì)象判斷顯示指定信息，則需配置formatter。formatter既可接收一段靜態(tài)html格式代碼也可接收一個(gè)匿名函數(shù)function（param），函數(shù)被調(diào)用時(shí)傳入?yún)?shù)param標(biāo)識(shí)了被點(diǎn)擊的唯一元素，即被點(diǎn)擊元素類(lèi)型和對(duì)應(yīng)geo坐標(biāo)及附加描述信息，通過(guò)對(duì)點(diǎn)元素的判斷來(lái)選擇顯示內(nèi)容，代碼如下：

series： [ //散點(diǎn)圖配置

{

data： scatterdata， //散點(diǎn)坐標(biāo)數(shù)據(jù)data：[“value”：[經(jīng)度，緯度]，”name”：”地名”，”text”：”描述信息”]

type： 'scatter'， //設(shè)置圖表類(lèi)型為散點(diǎn)圖

coordinateSystem：'geo'， //設(shè)置散點(diǎn)使用的坐標(biāo)系統(tǒng)

symbolSize： 20， //散點(diǎn)大小

color：'red' //散點(diǎn)顏色

}

]

tooltip：{ //浮動(dòng)提示框配置

show：true，

backgroundColor： "rgba（203，203，203，0.8）"， //設(shè)置背景圖片RGBA格式

borderWidth： 0， //邊框?qū)挾仍O(shè)置1

borderColor： "aqua"， //設(shè)置邊框顏色

padding：0， //邊框?qū)挾?/p>

textStyle：{ //配置提示框文本格式

fontSize：'40px'，

color：'rgba（254，255，86）'

}，

triggger：'item'， //觸發(fā)類(lèi)型

formatter：function（param）{ //函數(shù)方式返回提示框信息

return '