用Flask打造超酷疫情数据可视化大屏（手把手保姆级教程）

前言：数据可视化的魔法时刻

“各位看官！！！今天咱们要搞点硬核的——用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真香警告）

六、效果升级秘籍

1. 添加时间轴组件，实现历史数据回溯
2. 结合WebSocket实现实时数据推送
3. 增加省级下钻功能（点击省份显示详细数据）
4. 使用D3.js制作动态传播动画

结语：让数据开口说话

“看到这里你是不是已经跃跃欲试了？（别装了，我看到你偷偷打开编辑器的手了）赶紧把代码跑起来，遇到问题欢迎评论区battle！下期咱们可以聊聊怎么用这个项目去参加黑客马拉松，说不定还能拿个奖回来呢～”

最后叮嘱：记得定期更新数据源，疫情数据可是瞬息万变的！