2019 年年底这场袭击全国的突发性疫情,让我们过了一个有史以来最长春节长假的同时,也给我们带来了不少的损失,与此同时我们也认识到在大自然面前人类的渺小。好在在政府的正确且有力的领导下,经过全国人民群众的不懈努力,我们终于将疫情给遏制住了,打赢了这场没有硝烟的战争。
然而就在国内疫情已经明显好转,实现确诊病例零增长的时候,疫情开始在全球蔓延。今天,我用 Python 做了一个全球疫情数据大屏,我们一起来看下整体的效果图。
整个大屏分为全球数据和国内数据两个模块,每个模块总体分为三个部分,左侧是各个地区详细数据,中间是疫情数据地图,右边则是排行榜和最新动态。
项目结构
我们整个项目的结构图如下所示。
爬虫模块负责从腾讯新闻获取数据,之后存入 Redis。Flask 是一个 Web 框架,负责 URL 和后台函数的映射,以及数据的传输。换言之,也就是从 Redis 中获取到原始数据,然后整理成相应的格式之后传递给前端页面,前端页面在拿到数据之后,调用百度的 ECharts 来实现图表的展示即可。
引入项目所需的全部模块。
1 |
|
数据获取
开始操作之前,需要先梳理下我们都需要什么数据。关于国内,我们需要的是各个省详细数据、全国数据总和、最新动态、以及境外输入人数 TOP 10 的省市。关于国外,我们需要的是各个国家详细数据、国外数据总和、最新动态、以及 24 小时新增人数 TOP 10 的国家。
本次我们的疫情数据是从腾讯新闻获取的,打开该网址(https://news.qq.com/zt2020/page/feiyan.htm#/?nojump=1)按 F12 将开发者工具调出来,然后切换到 Network 选项页,逐个接口分析之后,发现所有我们想要的数据都是接口返回的。各个数据接口如下:
- 国内统计数据(数据总和以及各省份详细数据):
https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5
- 国外各国家详细数据:
https://api.inews.qq.com/newsqa/v1/automation/foreign/country/ranklist
- 国外数据总和:
https://api.inews.qq.com/newsqa/v1/automation/modules/list?modules=FAutoGlobalStatis
- 最新动态数据:
https://api.inews.qq.com/newsqa/v1/automation/modules/list?modules=FAutoNewsArticleList
找到了接口之后,接下来就很简单了,直接调用接口将数据爬取下来即可。其中国内统计数据接口接口返回的 data 不是标准的 JSON 串,而是一个字符串,所以我们需要做下简单的转化。
为了方便h后续操作,我们将调用 request 库爬取数据的操作封装起来,方便调用。
1 |
|
最新动态数据我们只取发布时间,标题以及链接地址。
1 |
|
国内数据我们需要获取数据总和以及各省份详细数据。
1 |
|
获取国外各个国家及地区详细数据。
1 |
|
国外数据总和。
1 |
|
将数据存入 Redis 后就这一步就大功告成了。
1 |
|
数据处理
获取到源数据之后,需要对数据做一下整理,以符合前端页面的展示要求。
整理数据时我们用的是 pandas 这个库,在我们 100 天系列的文章中有做过介绍,忘记的小伙伴们可以翻翻历史文章复习下。
最新动态的数据是比较规整的,不需要做太多处理,直接拿来用即可。
再看国内的统计数据以及各省份详细数据。
可回看出当前国内的数据总和是在 chinaTotal 中,当日新增在 chinaAdd 中,各省市详细数据在 province 中,其中各省市详细数据中是按照境外输入、当前确诊、累计确诊、治愈、死亡来存放的。
对于各个省市详细数据,我们以当前确诊人数倒序排序。
可以看的,现在湖北的确诊人数已经非常少了,而鸡头黑龙江则稳居第一,成为国内确诊人数 TOP 1 的省份。
最后来看国外数据,统计数据比较规整,各个国家详细数据我们按照累计确诊人数倒序排序。
最后,我们还需要处理下「境外输入省市 TOP 10」和「24小时新增国家 TOP 10」的数据。直接从省市详细数据和各国家详细数据中获取即可。
图表展示
我们先来简单看下 ECharts 的使用方法,首先要引入相应的 js 文件,然后写一个容纳图表的 div 标签。
1 |
|
最后编写图表的 js 代码即可。
1 |
|
但这里的数据是固定的,而我们的大屏展示数据都是动态变换的,怎么办呢,前端通过 Ajax 技术从后台接口获取即可,类似下面这样子。
1 |
|
现在我们已经完成了一个简单的图表,并且已经可以动态设置数据了。现在缺少的就是把大屏的各个图表拼接起来,并且将我们之前准备好的数据设置进去即可。
首先我们初始化 Flask 并设置路由映射关系,然后将前端页面所需的统计数据一并返回。
1 |
|
其中地图数据以及 TOP 10 的数据需要以接口的方式提供出去,前端页面直接通过 Ajax 技术调用。
1 |
|
至此,我们完成了从获取数据,到整理数据,再到前端页面展示的整一个过程,还是需要很多知识的。
总结
今天我们完成了一个全球疫情数据大屏可视化程序,步骤清晰,难度不大,只是页面上各个图表组件的位置以及样式调试起来比较繁琐些,但这不是本文重点。
你需要着重理解的是前端页面的 URL 是如何和后台函数做路由映射的,数据又是如何传递和绑定的,以及后台逻辑和数据的处理过程这才是 Web 开发的精髓。
最后,你可以从公众号获取源码后,修改程序使之支持定时从数据源获取数据,更新前端图表,而无需手动操作。
代码地址
示例代码:https://github.com/JustDoPython/python-examples/tree/master/doudou/2020-04-20-epidemic-big-screen
参考资料
https://news.qq.com/zt2020/page/feiyan.htm#/?nojump=1