《數(shù)據(jù)可視化技術(shù)》 課件 19 新生生源地分布分析

《數(shù)據(jù)可視化技術(shù)》單元19新生生源地分布分析01準(zhǔn)備活動點名、復(fù)習(xí)本次課學(xué)習(xí)內(nèi)容、學(xué)習(xí)目標(biāo)介紹學(xué)習(xí)內(nèi)容任務(wù)：為了在地理位置上分析學(xué)校在本省各地區(qū)的招生數(shù)量，更加直觀地查看新生生源空間分布，需要使用地圖來展示本省生源錄取分布情況。從MySQL數(shù)據(jù)庫中讀取數(shù)據(jù)，加載湖南省地圖，繪制新生數(shù)量地理位置分布圖。任務(wù):使用Ajax獲取數(shù)據(jù)并繪制地圖學(xué)習(xí)目標(biāo)1、知識（1）了解地圖數(shù)據(jù)的結(jié)構(gòu)（2）掌握Ajax獲取后臺數(shù)據(jù)的方法（3）掌握Echarts繪制地圖2、技能（1）能夠處理數(shù)據(jù)成地圖需要的形式（2）能夠使用Ajax獲取Flask傳遞的數(shù)據(jù)（3）能夠使用Echarts繪制地圖3、素養(yǎng)（1）嚴(yán)謹(jǐn)認(rèn)真、代碼規(guī)范；（2）數(shù)據(jù)安全、愛國精神；（3）信息檢索能力02發(fā)展活動任務(wù)分析、任務(wù)資訊、演示講解、任務(wù)實施任務(wù)實施任務(wù)分析：本任務(wù)將使用Flask、ECharts和Ajax技術(shù)，從MySQL數(shù)據(jù)庫中讀取數(shù)據(jù)，加載湖南省地圖，繪制新生數(shù)量地理位置分布圖知識準(zhǔn)備1．Ajax技術(shù)之前的任務(wù)在網(wǎng)頁端都是通過Jinja2獲取后端數(shù)據(jù)的，本任務(wù)使用Ajax技術(shù)來獲取后端的數(shù)據(jù)。Ajax是一種在無須重新加載整個網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術(shù)，可用于創(chuàng)建快速動態(tài)網(wǎng)頁。通過在后臺與服務(wù)器進行少量數(shù)據(jù)交換，Ajax可以使網(wǎng)頁實現(xiàn)異步更新，這也意味著可以在不重新加載整個網(wǎng)頁的情況下，實現(xiàn)對網(wǎng)頁某部分的更新。傳統(tǒng)的網(wǎng)頁（不使用Ajax）如果需要更新內(nèi)容，必須重載整個網(wǎng)頁知識準(zhǔn)備1．Ajax技術(shù)使用Ajax異步請求服務(wù)器后端發(fā)送的數(shù)據(jù)，需要先導(dǎo)入jQuery插件，導(dǎo)入方法為。jQuery是一個JavaScript函數(shù)庫，是一個輕量級“寫得少，做得多”的JavaScript庫，可實現(xiàn)HTML元素選取、元素操作、CSS操作、事件函數(shù)、特效、動畫等。jQuery提供多個與Ajax有關(guān)的方法。通過jQueryAjax方法，能夠使用HTTPGET和HTTPPOST從服務(wù)器上請求文本、HTML、XML或JSON數(shù)據(jù)，同時能夠把這些外部數(shù)據(jù)直接載入網(wǎng)頁的被選元素中

如果要異步請求Flask后端數(shù)據(jù)，并加載到網(wǎng)頁當(dāng)中，步驟如下：

1）后端設(shè)置路由，發(fā)送數(shù)據(jù)方式設(shè)為“GET”或“POST”，執(zhí)行函數(shù)，返回序列化為JSON的數(shù)據(jù)。知識準(zhǔn)備1．Ajax技術(shù)2）在網(wǎng)頁端利用JQueryAjax請求數(shù)據(jù)。

$(document).ready(function(){});表示網(wǎng)頁加載成功后立即執(zhí)行function(){}函數(shù)，$即表示JQuery。在function(){}函數(shù)體內(nèi)，執(zhí)行JQuery的Ajax方法，發(fā)送數(shù)據(jù)請求，請求類型為POST方式；使用async（異步）方式請求；請求地址為/data，這里要匹配后端Flask路由的路徑；數(shù)據(jù)類型為“json”類型；請求數(shù)據(jù)成功后執(zhí)行success方法，得到數(shù)據(jù)，將數(shù)據(jù)放入result對象中，彈出成功提示框；請求數(shù)據(jù)失敗后執(zhí)行error方法，得到失敗信息，彈出失敗提示框。知識準(zhǔn)備2．Echarts地圖要繪制矢量地圖，首先要下載地圖數(shù)據(jù)文件，有JS格式文件，也有JSON格式文件，包括中國地圖、中國各省市地圖、世界地圖等。接下來需要引用地圖數(shù)據(jù)文件，JS文件導(dǎo)入直接用：<scriptsrc="china.js"></script>即可，JSON文件則使用：$.get('china.json',(chinaJson)=>{})。要使用地圖，在series參數(shù)中，指定type為‘map’，以及將mapType指定為地區(qū)或國家名稱，示例：知識準(zhǔn)備2．Echarts地圖地圖的數(shù)據(jù)源一般會使用字典數(shù)組形式，如下所示另外，創(chuàng)建地圖時一般會設(shè)置相關(guān)參數(shù)，如使用roam:true來支持地圖縮放效果，使用toolbox增加工具箱，使用visualMap增加視覺通道等。任務(wù)實施本任務(wù)需要讀取某高職學(xué)院在本省各地區(qū)的招生錄取數(shù)，將數(shù)據(jù)通過路由傳遞到Web前端，網(wǎng)頁端使用jQueryAjax方法獲取數(shù)據(jù)，并通過ECharts地圖展示出來，直觀地在地理位置分布圖中展示招生數(shù)據(jù)分布情況。具體步驟：1．編寫Python后端程序app1（1）讀取“新生本省生源分布情況.csv”文件（2）將列名稱的中文轉(zhuǎn)成英文df.rename(columns={'地區(qū)':'city','招生數(shù)':'enroll_num'},inplace=True)（3）連接數(shù)據(jù)庫，將新的數(shù)據(jù)寫入到mysq中任務(wù)實施2．編寫Python后端程序app2（1）關(guān)聯(lián)數(shù)據(jù)庫和表使用FlaskSQLAlchemy連接MySQL的students數(shù)據(jù)庫，創(chuàng)建表模型，選擇地區(qū)和招生數(shù)兩列數(shù)據(jù)。（2）創(chuàng)建路由創(chuàng)建根站點路由，渲染模板時轉(zhuǎn)向網(wǎng)頁；創(chuàng)建異步請求數(shù)據(jù)的路由，執(zhí)行函數(shù)，查詢出所需數(shù)據(jù)，JSON化數(shù)據(jù)并返回前端頁面。（3）創(chuàng)建app運行語句3．編寫前端網(wǎng)頁腳本前端網(wǎng)頁創(chuàng)建ECharts地圖主要包括下面幾個步驟：引入JS文件；創(chuàng)建DIV容器；創(chuàng)建ECharts實例；創(chuàng)建jQueryAjax方法請求數(shù)據(jù)；設(shè)置ECha