基于Vue框架的云南省教育扶貧可視化系統設計與實現

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

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

關鍵詞：云南省；教育扶貧；可視化系統；Vue；ECharts

中圖分類號：TP311.52? ? ? 文獻標識碼：A

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

1 概述

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

2 云南省教育扶貧可視化系統總體設計

2.1 系統架構設計

教育扶貧可視化系統采用B/S體系結構，前端使用Vue框架，它是一個擴展性和復用性較強的輕量級漸進式JavaScript框架，基于數據驅動、交互展示和視圖組件化構建前端頁面[2]。后端服務程序使用Maven項目管理工具創建，自動管理依賴包和版本配置，通過IDEA一鍵發布調試，大幅降低包的版本依賴問題[3]。最終將負責業務邏輯的后端工程打包通過阿里云Tomcat服務器發布。

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

系統選用增量軟件開發模型。原因有三：1）開發時人員可靈活分配，能在較短時間內向甲方提交部分可操作產品，有效解決了參與系統開發的學生成員因學業導致頻繁換人的客觀實際。2）采用“分而治之”思想，把問題分解成可控的子模塊，先完成需求穩定的核心構件，避免團隊因長時間需求任務而感到沮喪。3）增量模型并非一步跨到未來，讓開發者逐步適應全棧開發技術，符合在校學生軟件開發訓練的普遍規律。

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

項目開發中的依賴庫如表1所示。

2.2 功能模塊設計

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

2.3 后臺數據庫設計

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

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

2）金句：famous_remarks （ID， 發布時間， 內容， 發言人） 。進庫記錄12條。

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

4）政策：policy （ID， 政策名稱， 發布機構， 官方URL） 。進庫記錄42條。

5）詞云：word_cloud （ID， 關鍵詞， 引用次數） 。進庫記錄1000條。

3 云南省教育扶貧可視化系統核心功能實現

3.1 系統界面

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

3.2 圖文信息展示模塊

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

3.3 基于ECharts和地理信息標注的可視化模塊

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

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

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

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

roam：true， //關閉移動漫游

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

selectedMode：false， //設為不可移動地圖

data：mapData， //地圖渲染數據包括：mapData{[name：城市名，value：權值]}

label： {

show： false， //不顯示標簽

fontSize： '50px' //設置標簽顯示字體大小

}，

}

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

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

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

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

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

calculable： true， //顯示拖拽手柄，手柄能拖拽調整選中范圍

}]

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

series： [ //散點圖配置

{

data： scatterdata， //散點坐標數據data：[“value”：[經度，緯度]，”name”：”地名”，”text”：”描述信息”]

type： 'scatter'， //設置圖表類型為散點圖

coordinateSystem：'geo'， //設置散點使用的坐標系統

symbolSize： 20， //散點大小

color：'red' //散點顏色

}

]

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

show：true，

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

borderWidth： 0， //邊框寬度設置1

borderColor： "aqua"， //設置邊框顏色

padding：0， //邊框寬度

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

fontSize：'40px'，

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

}，

triggger：'item'， //觸發類型

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

return '