《数据可视化技术》 课件 19 新生生源地分布分析、20 招聘数据不同学历的IT热门职业平均薪资分析 .pptx

《数据可视化技术》单元19新生生源地分布分析

01准备活动点名、复习本次课学习内容、学习目标介绍

学习内容任务：为了在地理位置上分析学校在本省各地区的招生数量，更加直观地查看新生生源空间分布，需要使用地图来展示本省生源录取分布情况。从MySQL数据库中读取数据，加载湖南省地图，绘制新生数量地理位置分布图。任务:使用Ajax获取数据并绘制地图

学习目标1、知识（1）了解地图数据的结构（2）掌握Ajax获取后台数据的方法（3）掌握Echarts绘制地图2、技能（1）能够处理数据成地图需要的形式（2）能够使用Ajax获取Flask传递的数据（3）能够使用Echarts绘制地图3、素养（1）严谨认真、代码规范；（2）数据安全、爱国精神；（3）信息检索能力

02发展活动任务分析、任务资讯、演示讲解、任务实施

任务实施任务分析：本任务将使用Flask、ECharts和Ajax技术，从MySQL数据库中读取数据，加载湖南省地图，绘制新生数量地理位置分布图

知识准备1．Ajax技术之前的任务在网页端都是通过Jinja2获取后端数据的，本任务使用Ajax技术来获取后端的数据。Ajax是一种在无须重新加载整个网页的情况下，能够更新部分网页的技术，可用于创建快速动态网页。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新，这也意味着可以在不重新加载整个网页的情况下，实现对网页某部分的更新。传统的网页（不使用Ajax）如果需要更新内容，必须重载整个网页

知识准备1．Ajax技术使用Ajax异步请求服务器后端发送的数据，需要先导入jQuery插件，导入方法为。jQuery是一个JavaScript函数库，是一个轻量级“写得少，做得多”的JavaScript库，可实现HTML元素选取、元素操作、CSS操作、事件函数、特效、动画等。jQuery提供多个与Ajax有关的方法。通过jQueryAjax方法，能够使用HTTPGET和HTTPPOST从服务器上请求文本、HTML、XML或JSON数据，同时能够把这些外部数据直接载入网页的被选元素中如果要异步请求Flask后端数据，并加载到网页当中，步骤如下：1）后端设置路由，发送数据方式设为“GET”或“POST”，执行函数，返回序列化为JSON的数据。

知识准备1．Ajax技术2）在网页端利用JQueryAjax请求数据。$(document).ready(function(){});表示网页加载成功后立即执行function(){}函数，$即表示JQuery。在function(){}函数体内，执行JQuery的Ajax方法，发送数据请求，请求类型为POST方式；使用async（异步）方式请求；请求地址为/data，这里要匹配后端Flask路由的路径；数据类型为“json”类型；请求数据成功后执行success方法，得到数据，将数据放入result对象中，弹出成功提示框；请求数据失败后执行error方法，得到失败信息，弹出失败提示框。

知识准备2．Echarts地图要绘制矢量地图，首先要下载地图数据文件，有JS格式文件，也有JSON格式文件，包括中国地图、中国各省市地图、世界地图等。接下来需要引用地图数据文件，JS文件导入直接用：scriptsrc=china.js/script即可，JSON文件则使用：$.get(china.json,(chinaJson)={})。要使用地图，在series参数中，指定type为‘map’，以及将mapType指定为地区或国家名称，示例：

知识准备2．Echarts地图地图的数据源一般会使用字典数组形式，如下所示另外，创建地图时一般会设置相关参数，如使用roam:true来支持地图缩放效果，使用toolbox增加工具箱，使用visualMap增加视觉通道等。

任务实施本任务需要读取某高职学院在本省各地区的招生录取数，将数据通过路由传递到Web前端，网页端使用jQueryAjax方法获取数据，并通过ECharts地图展示出来，直观地在地理位置分布图中展示招生数据分布情况。具体步骤：1．编写Python后端程序app1（1）读取“新生本省生源分布情况.csv”文件（2）将列名称的中文转成英文df.rename(columns={地区:city,招生数:enroll_num},inplace=True)（3）连接数据库，将新的数据写入到mysq中

任务实施2．编写Python后端程序app2（1）关联数据库和表使用Fl