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

《数据可视化技术》单元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）关联数据库和表使用FlaskSQLAlchemy连接MySQL的students数据库，创建表模型，选择地区和招生数两列数据。（2）创建路由创建根站点路由，渲染模板时转向网页；创建异步请求数据的路由，执行函数，查询出所需数据，JSON化数据并返回前端页面。（3）创建app运行语句3．编写前端网页脚本前端网页创建ECharts地图主要包括下面几个步骤：引入JS文件；创建DIV容器；创建ECharts实例；创建jQueryAjax方法请求数据；设置ECha