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

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

關(guān)鍵詞：云南?。唤逃鲐?；可視化系統(tǒng)；Vue；ECharts

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

文章編號：1009-3044（2022）32-0034-04

1 概述

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

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

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

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

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

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

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

項目開發(fā)中的依賴庫如表1所示。

2.2 功能模塊設(shè)計

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

2.3 后臺數(shù)據(jù)庫設(shè)計

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

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

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

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

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

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

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

3.1 系統(tǒng)界面

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

3.2 圖文信息展示模塊

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

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

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

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

type：'map'， //指定圖表類型為地圖

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

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

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

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

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

label： {

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

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

}，

}

visualMap： [{ //視覺映射組件配置

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

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

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

realtime： true， //拖拽時實時更新渲染

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

}]

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

series： [ //散點圖配置

{

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

type： 'scatter'， //設(shè)置圖表類型為散點圖

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

symbolSize： 20， //散點大小

color：'red' //散點顏色

}

]

tooltip：{ //浮動提示框配置

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ā)類型

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

return '