用Flask打造超酷疫情数据可视化大屏（手把手保姆级教程）
各位看官！！！今天咱们要搞点硬核的——用Flask框架实现疫情数据动态可视化！想象一下，在浏览器里看到全国疫情热力地图实时跳动，确诊曲线像心电图一样波动，是不是超带感？（反正我第一次做出来的时候激动得差点打翻咖啡）”“看到这里你是不是已经跃跃欲试了？（别装了，我看到你偷偷打开编辑器的手了）赶紧把代码跑起来，遇到问题欢迎评论区battle！下期咱们可以聊聊怎么用这个项目去参加黑客马拉松，说不定还能拿
·
前言：数据可视化的魔法时刻
“各位看官！！！今天咱们要搞点硬核的——用Flask框架实现疫情数据动态可视化！想象一下，在浏览器里看到全国疫情热力地图实时跳动，确诊曲线像心电图一样波动，是不是超带感？（反正我第一次做出来的时候激动得差点打翻咖啡）”
一、项目准备：先来盘硬菜
1.1 环境搭建（超级重要）
# 创建虚拟环境（Python老司机都懂的）
python -m venv covid-env
# 激活环境（Windows用户用covid-env\Scripts\activate）
source covid-env/bin/activate
# 安装核心依赖
pip install flask pandas requests pyecharts==1.9.1
注意点：PyEcharts版本必须用1.x，新版本API完全不一样（别问我怎么知道的，都是泪）
1.2 数据源选择
推荐约翰霍普金斯大学GitHub仓库：
https://github.com/CSSEGISandData/COVID-19
（他们的数据更新频率高到惊人，每天自动同步N次）
二、数据抓取与处理
2.1 用requests爬取数据
import requests
from datetime import datetime
def fetch_covid_data():
# 生成动态日期参数
today = datetime.now().strftime("%m-%d-%Y")
url = f"https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_daily_reports/{today}.csv"
try:
response = requests.get(url, timeout=10)
response.encoding = 'utf-8-sig'
return response.text
except Exception as e:
print(f"数据获取失败: {str(e)}")
return None
避坑指南：CSV文件有BOM头，必须用utf-8-sig编码！！！
2.2 数据清洗（脏数据退散！）
import pandas as pd
from io import StringIO
def process_data(raw_data):
# 转换日期格式
df = pd.read_csv(StringIO(raw_data))
df['Last Update'] = pd.to_datetime(df['Last Update'])
# 处理缺失值（这里有个骚操作）
df['Province/State'] = df['Province/State'].fillna('未知地区')
# 按省份聚合
grouped = df.groupby('Province/State').agg({
'Confirmed': 'sum',
'Deaths': 'sum',
'Recovered': 'sum'
}).reset_index()
return grouped.to_dict('records')
三、Flask核心逻辑
3.1 路由配置（核心枢纽）
from flask import Flask, render_template
from pyecharts.charts import Map, Line
app = Flask(__name__)
@app.route('/')
def dashboard():
raw_data = fetch_covid_data()
clean_data = process_data(raw_data)
# 生成热力地图
heatmap = create_heatmap(clean_data)
# 生成趋势图
trend_chart = create_trend_chart(clean_data)
return render_template('dashboard.html',
heatmap=heatmap,
trend=trend_chart)
3.2 可视化组件生成
def create_heatmap(data):
provinces = [item['Province/State'] for item in data]
values = [item['Confirmed'] for item in data]
heatmap = (
Map()
.add("确诊人数", [list(z) for z in zip(provinces, values)], "china")
.set_global_opts(
visualmap_opts=opts.VisualMapOpts(max_=100000),
title_opts=opts.TitleOpts(title="全国疫情热力分布")
)
)
return heatmap.render_embed()
四、前端展示（魔法发生的地方）
4.1 HTML模板关键代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 引入ECharts -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
</head>
<body>
<div style="display: flex; flex-wrap: wrap;">
<!-- 热力地图容器 -->
<div id="heatmap" style="width: 600px;height:400px;">
{{ heatmap|safe }}
</div>
<!-- 趋势图容器 -->
<div id="trend" style="width: 600px;height:400px;">
{{ trend|safe }}
</div>
</div>
</body>
</html>
五、部署上线（让世界看到你的成果）
5.1 本地运行
export FLASK_APP=app.py
flask run --host=0.0.0.0 --port=5000
5.2 生产环境部署建议
- 使用Gunicorn + Nginx组合
- 配置定时任务自动更新数据（crontab了解一下）
- 添加缓存机制（Redis真香警告）
六、效果升级秘籍
- 添加时间轴组件，实现历史数据回溯
- 结合WebSocket实现实时数据推送
- 增加省级下钻功能（点击省份显示详细数据）
- 使用D3.js制作动态传播动画
结语：让数据开口说话
“看到这里你是不是已经跃跃欲试了？（别装了，我看到你偷偷打开编辑器的手了）赶紧把代码跑起来，遇到问题欢迎评论区battle！下期咱们可以聊聊怎么用这个项目去参加黑客马拉松，说不定还能拿个奖回来呢～”
最后叮嘱：记得定期更新数据源，疫情数据可是瞬息万变的！
永洪科技，致力于打造全球领先的数据技术厂商，具备从数据应用方案咨询、BI、AIGC智能分析、数字孪生、数据资产、数据治理、数据实施的端到端大数据价值服务能力。
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)