ECharts实现全国空气质量查询

说明：此文章源于本人数据可视化的课程设计，第一次接触前后端，花费了较多的时间，也学到了很多东西，可能一些功能点实现的比较简单，但也有很大收获，希望能够帮助到别人。

??因为涉及到的东西还是比较多的，所以我分为了几部分，下面会逐步从项目的建立到具体功能点的实现逐步解析，较为详细地呈现。最后会附上有关的源码和一些资源的下载地址。

??本人第一次接触有关的一些东西，可能一些用语会搞错，还请指点。

一、项目简介

??此项目实现了空气质量查询，可以实现查看城市最新的空气质量以及历史数据；还可以查看全国各省市的空气质量情况。

二、效果展示

??第一个模块，用于查询具体某个城市的空气质量，该模块可以显示该城市最新的空气质量数据。
包括：
??1、AQI、空气质量等级、各种污染物的容量以及温馨提示；
??2、该城市历史数据的AQI折线图（显示该月份的变化），时间轴显示该年的区间范围；
??3、该城市该月份空气质量等级占比的饼状图。
??4、查询项为城市名和查询历史数据的月份。

??第二个模块用于展示全国范围内的空气质量。
包括：
??1、地图展示各个地区的城市AQI；
??2、饼图展示各个地区的空气质量等级占比；
??3、柱状图显示各个地区AQI的排行榜；
??4、地区可分为全国范围和省份范围，查询项为省份名，可输入各个省的名称，当输入为全国时，可以展示全国范围的数据。

三、主要技术

??1、项目的搭建使用的是python的Flask框架；
??2、前后端交互使用的是Ajax；
??3、数据的获取，一部分（实时数据）是采用爬虫实现，一部分（历史数据）是缓存在本地；
??

四、主要流程

??上面是示意图。通过flask框架（python编写的轻量级Web应用框架）搭建，flask可以通过表单直接进行前端到后端的通信，但是因为一些功能需要传输的信息较杂，于是禁用了自动表单提交，使用Ajax自定义要通信的数据。在flask定义了多个路由，Ajax访问不同的路由，获取相应的数据进行图像绘制。

??整个产品的运行步骤如下：
??1、城市空气质量查询。
????1）默认展示北京，2021年01月份的数据，实时更新当前时间；
????2）输入要查询的城市和月份，Ajax将参数传到路由data下，flask根据请求调用函数，获取数据；
????3）根据传入的城市名，在本地缓存中查看是否有当前最新的数据（当前时间的小时和缓存中的小时值是否相同），如果本地是最新数据则返回，否则从网页爬取该城市的最新数据，保存到缓存中，并返回；
????4）在本地数据中找到该城市指定月份的数据和该年的数据，并返回。
????5）根据获取到的数据，将数据格式转换为图像能使用的格式并返回；
????6）flask返回数据；
????7）Ajax根据返回的数据，为每一个图像更新数据，并展示新的信息。

??2、全国空气质量查询。
????1）默认展示全国的数据，实时更新时间；
????2）输入要查询的省份，Ajax将参数传到路由data_country下，flask根据请求调用函数，获取数据；
????3）前往网页爬取数据，整理为需要的格式，返回对应省份的数据；
????4）flask返回数据；
????5）Ajax根据返回的数据，调用函数，再次使用Ajax发送省份名参数到geo_map路由下，获取对应省份地图的json文件数据。
????6）根据地图数据和省份（全国）的绘制数据，更新图像，展示新的信息。