从零搭建一个疫情数据看板：用Python(pymysql+Flask+ECharts)实战全流程

从零搭建省级数据可视化看板Python全栈技术实战最近几年数据可视化在各行各业的应用越来越广泛。无论是企业内部的运营数据监控还是面向公众的信息展示一个直观、动态的数据看板都能极大提升信息传达效率。对于Python开发者来说掌握从数据库操作到前端展示的全流程技术栈已经成为一项必备技能。本文将带你完整实现一个省级数据可视化看板项目涵盖从数据库设计、后端接口开发到前端图表展示的全过程。不同于零散的代码示例我们会以一个真实可运行的项目为主线重点讲解pymysql在实际业务场景中的核心应用技巧。1. 项目架构设计与环境准备在开始编码之前我们需要明确项目的整体架构和技术选型。这个省级数据看板将采用经典的Web三层架构数据层MySQL数据库存储各省份数据使用pymysql进行交互服务层Flask框架提供RESTful API接口展示层ECharts实现动态数据可视化1.1 开发环境配置首先确保你的开发环境中已经安装以下组件# 创建并激活虚拟环境 python -m venv venv source venv/bin/activate # Linux/Mac venv\Scripts\activate # Windows # 安装必要依赖 pip install pymysql flask echarts-flask对于数据库我们使用MySQL 8.0版本。如果你还没有安装MySQL可以参考官方文档进行安装。安装完成后创建一个专用用户并授权CREATE USER dashboard_userlocalhost IDENTIFIED BY SecurePass123!; GRANT ALL PRIVILEGES ON dashboard_db.* TO dashboard_userlocalhost; FLUSH PRIVILEGES;1.2 项目目录结构合理的项目结构能让代码更易维护。我们采用如下组织方式/provincial_dashboard │── /static # 静态资源 │── /templates # HTML模板 │── app.py # Flask主程序 │── config.py # 配置文件 │── db_utils.py # 数据库工具类 │── data_loader.py # 数据加载脚本2. 数据库设计与pymysql实战数据库是可视化看板的核心基础。我们需要设计合理的表结构并通过pymysql实现高效、安全的数据操作。2.1 创建数据库与表首先在db_utils.py中创建数据库连接工具类import pymysql from config import DB_CONFIG class DBUtil: staticmethod def get_connection(): return pymysql.connect( hostDB_CONFIG[host], userDB_CONFIG[user], passwordDB_CONFIG[password], databaseDB_CONFIG[database], charsetutf8mb4, cursorclasspymysql.cursors.DictCursor ) staticmethod def init_database(): conn pymysql.connect( hostDB_CONFIG[host], userDB_CONFIG[user], passwordDB_CONFIG[password], charsetutf8mb4 ) try: with conn.cursor() as cursor: # 创建数据库 cursor.execute(fCREATE DATABASE IF NOT EXISTS {DB_CONFIG[database]}) # 使用数据库 cursor.execute(fUSE {DB_CONFIG[database]}) # 创建省份数据表 cursor.execute( CREATE TABLE IF NOT EXISTS province_stats ( id INT AUTO_INCREMENT PRIMARY KEY, province_name VARCHAR(50) NOT NULL, confirmed_cases INT DEFAULT 0, recovered_cases INT DEFAULT 0, active_cases INT DEFAULT 0, update_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, UNIQUE KEY (province_name) ) ) conn.commit() finally: conn.close()提示使用DictCursor可以让查询结果以字典形式返回更方便处理。utf8mb4字符集支持完整的Unicode字符包括emoji。2.2 批量数据操作技巧实际项目中我们经常需要批量插入或更新数据。pymysql提供了高效的批量操作方法def batch_insert_provinces(province_data): conn DBUtil.get_connection() try: with conn.cursor() as cursor: # 使用executemany进行批量插入 sql INSERT INTO province_stats (province_name, confirmed_cases, recovered_cases, active_cases) VALUES (%s, %s, %s, %s) ON DUPLICATE KEY UPDATE confirmed_cases VALUES(confirmed_cases), recovered_cases VALUES(recovered_cases), active_cases VALUES(active_cases) cursor.executemany(sql, province_data) conn.commit() finally: conn.close()这种方法相比单条插入性能可提升数十倍。ON DUPLICATE KEY UPDATE语法实现了存在则更新不存在则插入的逻辑。3. Flask后端API开发有了数据库基础后我们需要构建Web服务来提供数据接口。Flask因其轻量、灵活的特性非常适合这类项目。3.1 基础API实现在app.py中创建Flask应用和基本路由from flask import Flask, jsonify from db_utils import DBUtil app Flask(__name__) app.route(/api/provinces, methods[GET]) def get_provinces(): conn DBUtil.get_connection() try: with conn.cursor() as cursor: cursor.execute( SELECT province_name, confirmed_cases, recovered_cases, active_cases FROM province_stats ORDER BY confirmed_cases DESC ) result cursor.fetchall() return jsonify({ status: success, data: result }) finally: conn.close()3.2 高级查询接口为了支持前端更灵活的数据展示我们可以添加带参数的查询接口app.route(/api/provinces/stats, methods[GET]) def get_province_stats(): # 获取查询参数 sort_field request.args.get(sort, confirmed_cases) limit int(request.args.get(limit, 10)) # 验证排序字段防止SQL注入 valid_fields {confirmed_cases, recovered_cases, active_cases} if sort_field not in valid_fields: sort_field confirmed_cases conn DBUtil.get_connection() try: with conn.cursor() as cursor: cursor.execute(f SELECT province_name, confirmed_cases, recovered_cases, active_cases FROM province_stats ORDER BY {sort_field} DESC LIMIT %s , (limit,)) result cursor.fetchall() return jsonify({ status: success, data: result }) finally: conn.close()注意直接拼接SQL字符串有注入风险。对于表名、字段名等无法参数化的部分必须进行严格验证。4. 前端可视化实现最后我们使用ECharts将数据转化为直观的图表。创建一个简单的HTML模板!DOCTYPE html html head meta charsetutf-8 title省级数据看板/title script srchttps://cdn.jsdelivr.net/npm/echarts5.4.3/dist/echarts.min.js/script style #main-chart { width: 900px; height: 600px; margin: 30px auto; } .controls { text-align: center; margin: 20px; } /style /head body div classcontrols select idsort-select option valueconfirmed_cases确诊数/option option valuerecovered_cases治愈数/option option valueactive_cases现存病例/option /select button idrefresh-btn刷新数据/button /div div idmain-chart/div script const chartDom document.getElementById(main-chart); const myChart echarts.init(chartDom); function loadData(sortField confirmed_cases) { fetch(/api/provinces/stats?sort${sortField}limit10) .then(response response.json()) .then(data { const provinces data.data.map(item item.province_name); const values data.data.map(item item[sortField]); const option { title: { text: 省级数据排名, subtext: 按 document.getElementById(sort-select).selectedOptions[0].text 排序 }, tooltip: {}, xAxis: { data: provinces, axisLabel: { rotate: 45 } }, yAxis: {}, series: [{ name: 数量, type: bar, data: values, itemStyle: { color: function(params) { const colorList [#c23531,#2f4554,#61a0a8,#d48265,#91c7ae]; return colorList[params.dataIndex % colorList.length]; } } }] }; myChart.setOption(option); }); } document.getElementById(sort-select).addEventListener(change, function() { loadData(this.value); }); document.getElementById(refresh-btn).addEventListener(click, function() { loadData(document.getElementById(sort-select).value); }); // 初始加载 loadData(); /script /body /html5. 项目优化与扩展基础功能实现后我们可以从以下几个方面进一步提升项目质量5.1 性能优化数据库连接池使用DBUtils等库实现连接池避免频繁创建连接缓存机制对不常变的数据添加Redis缓存异步加载前端实现数据分页和懒加载from dbutils.pooled_db import PooledDB # 在config.py中添加 DB_POOL PooledDB( creatorpymysql, maxconnections5, hostDB_CONFIG[host], userDB_CONFIG[user], passwordDB_CONFIG[password], databaseDB_CONFIG[database], charsetutf8mb4, cursorclasspymysql.cursors.DictCursor )5.2 功能扩展历史数据查询添加时间范围选择功能数据导出支持CSV/Excel格式导出多图表联动实现地图和柱状图联动展示// 在地图点击事件中联动柱状图 myChart.on(click, function(params) { // 加载该省份的详细数据 fetch(/api/province/detail?name${params.name}) .then(response response.json()) .then(data { // 更新详细数据图表 detailChart.setOption({ series: [{ data: data.trend }] }); }); });5.3 安全加固API认证添加JWT认证输入验证严格验证所有前端输入日志监控记录关键操作日志from functools import wraps import jwt from flask import request, jsonify def token_required(f): wraps(f) def decorated(*args, **kwargs): token request.headers.get(Authorization) if not token: return jsonify({message: Token is missing}), 403 try: data jwt.decode(token.split()[1], app.config[SECRET_KEY]) except: return jsonify({message: Token is invalid}), 403 return f(*args, **kwargs) return decorated