基于Vue框架的云南省教育扶貧可視化系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)
2022-05-30 10:34:58呂維廣，申浩如，孫定蜜，楊延仁，胡正南，黎諜，饒肖
電腦知識(shí)與技術(shù) 2022年32期
呂維廣，申浩如，孫定蜜，楊延仁，胡正南，黎諜，饒肖
摘要：通過(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 '
'+param.data.name+'
'; //顯示點(diǎn)擊元素?cái)?shù)據(jù)中變量name的數(shù)據(jù)
云南省安寧市老年大學(xué)之歌 民國(guó)初期云南省議會(huì)述論 云南省瑞麗市老年大學(xué)之歌 教育扶貧，助力精準(zhǔn)扶貧 關(guān)于全面建成小康社會(huì)的教育扶貧工作研究 新時(shí)期特困地區(qū)農(nóng)村學(xué)校體育發(fā)展機(jī)遇探析 教育貧困與教育扶貧現(xiàn)狀調(diào)查 近31年來(lái)云南省潛在蒸散量的時(shí)空演變
}
}
}
由于地圖和今昔對(duì)比圖展示于同一“
”標(biāo)簽中，在ECharts作圖時(shí)需將兩圖配置信息寫(xiě)入配置數(shù)組。同時(shí)兩張圖表均按用戶(hù)交互需求通過(guò)POST方法從服務(wù)器動(dòng)態(tài)更新數(shù)據(jù)，這使得配置項(xiàng)中的數(shù)據(jù)部分不會(huì)被固定，而是留下一個(gè)數(shù)據(jù)接口，隨用戶(hù)點(diǎn)擊動(dòng)態(tài)調(diào)用，并同步刷新圖表Vue地圖組件。同理，今昔校園對(duì)比照片也跟隨用戶(hù)點(diǎn)擊動(dòng)態(tài)從服務(wù)器拉取圖片，通過(guò)監(jiān)聽(tīng)click事件向服務(wù)器發(fā)送POST請(qǐng)求報(bào)文刷新圖片。代碼如下：mapChart.on（'click'， function （params） { //監(jiān)聽(tīng)點(diǎn)擊事件
if（params.componentSubType=='map'）{ //判斷是否點(diǎn)擊了地圖組件
City（params.name）.then（data => { //通過(guò)axios獲取數(shù)據(jù)
var testdata=[] //設(shè)置空變量
for（var i in data）{ //遍歷數(shù)據(jù)
testdata.push（data[i]） //在空變量中填充要渲染的數(shù)據(jù)
}
citydata.value=testdata //把最新數(shù)據(jù)同步給數(shù)據(jù)接口
}）
landname.value=params.name //同步點(diǎn)擊的州市名
//根據(jù)點(diǎn)擊的州市名用require方法獲取對(duì)應(yīng)今夕對(duì)比圖片
imgland1.value =require（'@/assets/land/'+params.name+'1.jpg'）
imgland2.value =require（'@/assets/land/'+params.name+'2.jpg'）
}
}）
教育扶貧政策方針模塊通過(guò)詞云展示相關(guān)政策的關(guān)鍵詞，該模塊利用第三方工具圖悅詞頻分析軟件對(duì)所遴選的教育政策進(jìn)行詞頻分析，使用Python對(duì)數(shù)據(jù)進(jìn)行清洗上傳數(shù)據(jù)庫(kù)。在設(shè)置ECharts詞云配置項(xiàng)時(shí)應(yīng)注意不僅要導(dǎo)入echarts插件還應(yīng)導(dǎo)入echarts_wordcloud依賴(lài)插件。詞云不同于其他模塊的配置，不僅需要配置data數(shù)據(jù)接口，data數(shù)據(jù)結(jié)構(gòu)包括關(guān)鍵詞和引用次數(shù)，還要傳入蒙版圖片數(shù)據(jù)maskImage，用于限定詞云的邊界輪廓。蒙版圖片需選擇一張黑白圖，轉(zhuǎn)化為base64編碼字符串，本項(xiàng)目選用一張中國(guó)地圖作為邊界輪廓。代碼如下：
var maskImage = new Image（）; //創(chuàng)建一個(gè)Image類(lèi)型對(duì)象
maskImage.src = image //將邊界輪廓的base64編碼字符串賦值給maskImage的src屬性
series： [{ //詞云圖配置項(xiàng)
type： 'wordCloud'， //指定圖表類(lèi)型為詞云
gridSize： 1， //設(shè)置文字間隔
shape： 'circle'， //設(shè)置詞云形狀
sizeRange： [12， 55]， //設(shè)置文字字號(hào)范圍
maskImage： maskImage， //渲染圖形的Image對(duì)象
textStyle： {
fontSize： '50px'， //字體大小
color： function （） { //設(shè)置文本顏色，采用隨機(jī)生成色
return 'rgb（' + [
Math.round（Math.random（） * 255），
Math.round（Math.random（） * 150），
Math.round（Math.random（） * 150）
].join（'，'） + '）'
}
}
3.4 基于CNKI的學(xué)術(shù)文獻(xiàn)可視化模塊
在CNKI文獻(xiàn)數(shù)據(jù)庫(kù)以“篇名=教育扶貧”O(jiān)R“主題=教育扶貧”為關(guān)鍵詞進(jìn)行檢索，期刊來(lái)源為CSSCI和北大核心，查詢(xún)年限為2021年12月31日前，共搜索有效學(xué)術(shù)文獻(xiàn)947篇。使用ECharts曲線圖、柱狀圖、餅圖工具對(duì)年發(fā)文量、主/次要主題分布TOP10、文獻(xiàn)來(lái)源分布TOP10、學(xué)科領(lǐng)域分布TOP10、作者及單位分布TOP8繪制統(tǒng)計(jì)圖表。
3.5 系統(tǒng)實(shí)現(xiàn)相關(guān)問(wèn)題
由于界面容納元素較多，各元素之間又相互關(guān)聯(lián)和復(fù)用，為簡(jiǎn)化開(kāi)發(fā)流程、提高代碼復(fù)用率，在開(kāi)發(fā)過(guò)程中使用Vue路由功能將各個(gè)元素單獨(dú)編程，最終由Home路由集中管理、組織這些組件。另外，官網(wǎng)[8]暫未給出在Vue中使用ECharts的方案，這與使用原生JavaScript開(kāi)發(fā)有較大區(qū)別，但Vue代碼源自JavaScript，只要遵循JavaScript的語(yǔ)法規(guī)則便能解決大部分問(wèn)題。
目前，整個(gè)項(xiàng)目側(cè)重前端框架實(shí)現(xiàn)，主要使用Vue2接口標(biāo)準(zhǔn)以及部分Vue3標(biāo)準(zhǔn)，接下來(lái)擬使用Vue3標(biāo)準(zhǔn)，以簡(jiǎn)化編程難度，提升項(xiàng)目性能。后端開(kāi)發(fā)仍有較大提升空間，擬使用微服務(wù)架構(gòu)，增強(qiáng)后端的可維護(hù)性和可擴(kuò)展性。此外，現(xiàn)階段數(shù)據(jù)采集實(shí)現(xiàn)過(guò)程是人工搜集后通過(guò)腳本半自動(dòng)存儲(chǔ)到數(shù)據(jù)庫(kù)，擬采用爬蟲(chóng)從互聯(lián)網(wǎng)上爬取數(shù)據(jù)自動(dòng)存儲(chǔ)到數(shù)據(jù)庫(kù)。
4 結(jié)束語(yǔ)
本文采用B/S結(jié)構(gòu)，構(gòu)建了一個(gè)前后端分離的信息可視化系統(tǒng)，前端使用Vue框架，后端使用Maven項(xiàng)目，并通過(guò)MySQL實(shí)現(xiàn)數(shù)據(jù)存儲(chǔ)與管理。該系統(tǒng)是云南省教育扶貧數(shù)字化表達(dá)的優(yōu)勢(shì)載體，一方面為相關(guān)部門(mén)提供決策依據(jù)，另一方面為社會(huì)公眾及時(shí)了解教育扶貧現(xiàn)狀提供信息展示，從而增強(qiáng)公眾對(duì)推進(jìn)教育
公平性建設(shè)的信心和自覺(jué)參與教育扶貧的意愿。下一步將與云南省教育廳規(guī)劃辦進(jìn)一步合作，采集各地建檔立卡貧困學(xué)生數(shù)據(jù)，進(jìn)行去隱私化操作，結(jié)合各
州市教育資源配置數(shù)據(jù)，如學(xué)校硬件設(shè)施、師資隊(duì)伍、學(xué)生輟學(xué)率等，進(jìn)一步優(yōu)化迭代可視化設(shè)計(jì)方案，推出內(nèi)容維度更豐富的云南教育扶貧可視化項(xiàng)目。
參考文獻(xiàn)：
[1] 習(xí)近平.決勝全面建成小康社會(huì) 奪取新時(shí)代中國(guó)特色社會(huì)主義偉大勝利[R].北京：中國(guó)共產(chǎn)黨第十九次全國(guó)代表大會(huì)，2017.
[2] Vue工作團(tuán)隊(duì).Vue.js簡(jiǎn)介[EB/OL].[2022-03-20].https：//cn.vuejs.org/guide/introduction.html#api-styles.
[3] The Apache Software Foundation. Apache Maven Project[EB/OL].[2022-03-20].https：//maven.apache.org/what-is-maven.html.
[4] 百度百科.Web數(shù)據(jù)交互方式[EB/OL]. [2022-03-20].https：//baike.baidu.com/item/axios/56933453？fr=aladdin.
[5] 阿里云幫助中心.什么是對(duì)象存儲(chǔ)OSS[EB/OL]. [2022-03-20].https：//help.aliyun.com/document_detail/31817.html.
[6] runoob.Filter、FilterChain、FilterConfig介紹[EB/OL]. [2022-03-20].https：//www.runoob.com/w3cnote/filter-filterchain-filterconfig-intro.html.
[7] 百度百科.邊做邊改模型[EB/OL]. [2022-03-20].https：//baike.baidu.com/item/%E8%BE%B9%E5%81%9A%E8%BE%B9%E6%94%B9%E6%A8%A1%E5%9E%8B/1861054？fr=aladdin
[8] The Apache Software Foundation. Apache ECharts[EB/OL].[2022-03-20].https：//echarts.apache.org/zh/index.html.
【通聯(lián)編輯：謝媛媛】
猜你喜歡
老年教育(老年大學(xué))(2023年4期)2023-05-17 09:39:12
紅河學(xué)院學(xué)報(bào)(2021年4期)2021-11-19 08:59:50
老年教育(老年大學(xué))(2017年4期)2017-05-09 17:18:41
中國(guó)集體經(jīng)濟(jì)(2017年3期)2017-02-06 21:41:28
現(xiàn)代經(jīng)濟(jì)信息(2016年25期)2016-11-24 07:30:57
求知導(dǎo)刊(2016年23期)2016-09-29 11:23:53
現(xiàn)代經(jīng)濟(jì)信息(2016年16期)2016-07-26 05:53:09
西南農(nóng)業(yè)學(xué)報(bào)(2016年4期)2016-05-17 05:42:10
