这次开发疫情看板的经历确实很有意思，从最初的Excel数据读取问题，到最后成功实现带有真实香港地图的交互式看板，整个过程充满了挑战和收获：
完整代码资源如下：
根据excel 制作看板，并且生成地图数据
https://download.youkuaiyun.com/download/chenchihwen/91525121
🎯 项目亮点回顾：
✅ 成功解决了依赖安装和中文字体显示问题
✅ 从matplotlib转向ECharts，实现了更好的Web体验
✅ 获取到了真实的香港18区GeoJSON地图数据
✅ 创建了多个版本（Flask动态版、静态版、简化版）
✅ 提供了完整的测试和启动脚本
✅ 写出了详细的开发指南文档
🚀 技术栈最终方案：
前端：HTML5 + CSS3 + JavaScript + ECharts
数据：真实的香港疫情Excel数据 + GeoJSON地图
部署：静态文件，即开即用
📊 看板功能：
疫情数据概览卡片
趋势图表分析
真实香港地图可视化
各区排名对比
风险等级分布
多维度雷达图
这个项目很好地展示了如何从简单需求出发，通过不断迭代和问题解决，最终构建出一个功能完整、用户体验良好的数据可视化应用。希望这份开发指南能帮助到更多的开发者！
从零到一：香港疫情数据看板开发实战指南
项目背景与目标
在这个项目中，我们从一个简单的Excel数据读取需求开始，最终构建了一个功能完整的疫情数据可视化看板。整个开发过程充满了挑战和学习，让我深刻体会到了数据可视化项目的复杂性和解决问题的重要性。
开发历程回顾
第一阶段：数据探索与基础分析
起点： 用户提供了一个Excel文件 香港各区疫情数据_20250322.xlsx，包含香港18个区域从2022年1月到6月的疫情数据。
遇到的第一个问题： 缺少 openpyxl 依赖库
# 错误信息 Missing optional dependency 'openpyxl'. Use pip or conda to install openpyxl.
解决方案： 创建了多个版本的脚本来适应不同环境：
-
read_excel.py- 基础数据读取 -
simple_covid_analysis.py- 纯文本分析版本 -
install_requirements.py- 自动安装依赖
经验教训：
-
环境依赖是项目启动的第一道门槛
-
提供多种备选方案能提高项目的兼容性
-
清晰的错误提示和解决方案很重要
第二阶段：图表可视化尝试
目标： 制作确诊人数与报告日期的推移图
技术选择： 最初选择了 matplotlib + seaborn
import matplotlib.pyplot as plt import seaborn as sns
遇到的问题：
-
中文字体显示问题 - 图表中中文显示为方框
-
依赖安装困难 - pandas编译失败，matplotlib缺失
-
图表样式单调 - 默认样式不够美观
解决过程：
-
创建了
fix_chinese_font.py来检测和设置中文字体 -
提供了英文版本
covid_chart_english.py作为备选 -
最终决定转向Web技术栈
关键决策点： 从桌面应用转向Web应用
-
更好的跨平台兼容性
-
更丰富的交互体验
-
更容易部署和分享
第三阶段：Web看板架构设计
技术栈选择：
-
前端： HTML5 + CSS3 + JavaScript + ECharts
-
后端： Flask (可选)
-
数据处理： Pandas
架构设计思路：
数据层 (Excel) → 处理层 (Python/Pandas) → 展示层 (Web/ECharts)
创建的核心文件：
-
app.py- Flask后端API -
templates/dashboard.html- 动态版本前端 -
static_dashboard.html- 静态版本前端
设计亮点：
-
响应式布局适配不同屏幕
-
毛玻璃效果增强视觉层次
-
深色主题提升科技感
-
多图表联动展示
第四阶段：地图可视化的挑战
最大挑战： 实现香港地图的准确显示
问题演进：
-
第一次尝试 - 手工绘制简化地图坐标
// 结果：显示为不规则方块，完全不像香港
-
第二次尝试 - 使用散点图模拟地图
// 结果：能显示位置关系，但缺乏地理真实感
-
第三次尝试 - 获取真实GeoJSON数据
# 创建 get_hongkong_map.py 自动获取地图数据
突破性进展： 成功从阿里云DataV获取了真实的香港18区GeoJSON数据：
url = "https://geo.datav.aliyun.com/areas_v3/bound/810000_full.json"
技术实现：
// 注册真实地图数据
echarts.registerMap('hongkong', mapData);
// 创建地图可视化
series: [{
name: '疫情数据',
type: 'map',
geoIndex: 0,
data: covidData
}]
第五阶段：用户体验优化
多版本策略：
-
Flask动态版本 - 实时数据更新
-
静态HTML版本 - 无需后端，即开即用
-
简化地图版本 - 降级方案
启动脚本优化：
# start_static_dashboard.py - 自动检测可用文件 - 自动打开浏览器 - 提供多个访问地址
测试验证：
# test_map.py - 验证地图数据完整性 - 检查文件可用性 - 提供启动指导
核心技术难点与解决方案
1. 依赖管理问题
问题： 不同环境下依赖安装失败 解决：
-
提供requirements.txt
-
创建自动安装脚本
-
提供无依赖的静态版本
2. 中文字体显示
问题： 图表中文显示为方框 解决：
plt.rcParams['font.sans-serif'] = ['Microsoft YaHei', 'SimHei'] plt.rcParams['axes.unicode_minus'] = False
3. 地图数据获取
问题： 缺乏准确的香港地图数据 解决：
-
多数据源尝试
-
自动验证数据质量
-
提供降级方案
4. 跨平台兼容性
问题： Windows/Mac/Linux环境差异 解决：
-
Web技术栈天然跨平台
-
静态文件部署简单
-
浏览器兼容性测试
项目架构最佳实践
1. 渐进式开发
简单脚本 → 图表生成 → Web界面 → 交互地图 → 完整看板
2. 多版本并存
-
开发版本（功能完整）
-
生产版本（稳定可靠）
-
演示版本（快速启动）
3. 错误处理策略
try {
// 尝试加载真实地图
const mapData = await fetch('hongkong_map.json');
} catch (error) {
// 降级到简化版本
createFallbackMap();
}
4. 用户体验设计
-
加载状态提示
-
错误信息友好
-
多种启动方式
-
详细使用文档
数据可视化设计原则
1. 信息层次清晰
概览卡片 → 趋势图表 → 地图分布 → 详细对比
2. 交互设计合理
-
地图缩放漫游
-
悬停显示详情
-
响应式布局
-
颜色编码直观
3. 视觉效果统一
-
一致的配色方案
-
统一的字体规范
-
协调的动画效果
-
清晰的数据标签
开发工具与资源推荐
1. 数据处理
-
Pandas - 数据清洗和分析
-
OpenPyXL - Excel文件读取
-
Requests - 网络数据获取
2. 可视化库
-
ECharts - 功能强大的图表库
-
D3.js - 高度定制化选择
-
Chart.js - 轻量级方案
3. 地图数据源
-
阿里云DataV GeoAtlas
-
GitHub开源地图数据
-
官方统计局数据
4. 开发工具
-
VS Code + Live Server
-
Chrome DevTools
-
Postman (API测试)
性能优化经验
1. 数据加载优化
// 异步加载地图数据
async function loadHongKongMap() {
// 避免阻塞页面渲染
}
2. 图表渲染优化
// 响应式图表大小调整
window.addEventListener('resize', () => {
mapChart.resize();
});
3. 缓存策略
-
地图数据本地缓存
-
静态资源CDN加速
-
浏览器缓存利用
部署与维护建议
1. 部署方案
-
静态部署 - GitHub Pages, Netlify
-
动态部署 - Heroku, 云服务器
-
本地部署 - Python HTTP服务器
2. 监控与维护
-
数据源可用性监控
-
用户访问统计
-
错误日志收集
-
定期数据更新
3. 扩展性考虑
-
模块化代码结构
-
配置文件外置
-
API接口标准化
-
多语言支持预留
项目总结与反思
成功要素
-
问题导向 - 每个功能都解决实际需求
-
迭代开发 - 快速试错，持续改进
-
用户体验 - 始终考虑最终用户的使用场景
-
技术选型 - 选择合适而非最新的技术
经验教训
-
环境兼容性 比想象中更重要
-
数据质量 直接影响可视化效果
-
降级方案 是项目成功的保障
-
文档完善 能大大提升项目价值
未来改进方向
-
实时数据更新机制
-
更多图表类型支持
-
移动端优化
-
数据导出功能
-
用户自定义配置
给开发者的建议
1. 技术选择
-
优先考虑稳定性和兼容性
-
选择有良好社区支持的技术
-
保持技术栈的简洁性
2. 开发流程
-
从最小可行产品开始
-
频繁测试和用户反馈
-
保持代码的可读性和可维护性
3. 问题解决
-
遇到问题时多尝试不同方案
-
善用开源社区和文档资源
-
记录解决过程便于后续参考
4. 项目管理
-
设定清晰的里程碑
-
保持功能范围的控制
-
重视用户体验和反馈
结语
这个项目从一个简单的数据读取需求，发展成为一个功能完整的数据可视化看板，整个过程充满了挑战和收获。希望这些经验能够帮助其他开发者在类似项目中少走弯路，更快地实现目标。
记住：好的数据可视化不仅仅是技术的展示，更是对用户需求的深刻理解和贴心服务。
本指南基于实际开发经验总结，如有疑问或建议，欢迎交流讨论。
代码资源与开发过程记录在后面 最后实现了 疫情看板，如下
🏥 香港疫情数据看板使用说明
📋 功能特色
🗺️ 香港地图可视化
交互式地图: 显示香港18个区的疫情分布
颜色编码: 根据累计确诊人数进行颜色深浅区分
悬停提示: 鼠标悬停显示详细疫情数据
缩放漫游: 支持地图缩放和拖拽操作
📊 多维度数据展示
概览卡片: 累计确诊、现存确诊、累计康复、累计死亡、新增确诊
趋势图表: 最近30天的疫情发展趋势
风险分布: 各区风险等级饼图
排名对比: 各区累计确诊和发病率排名
雷达图: 多指标综合对比分析
🚀 启动方式
方式1: 静态版本 (推荐)
python start_static_dashboard.py
✅ 无需安装额外依赖
✅ 启动速度快
✅ 自动打开浏览器
方式2: Flask动态版本
python run_dashboard.py
需要安装: Flask, pandas, openpyxl
📍 访问地址: http://localhost:5000
方式3: 直接打开HTML文件
双击
static_dashboard.html文件，用浏览器打开🗺️ 地图功能详解
地图交互
缩放: 鼠标滚轮或双击缩放
拖拽: 按住鼠标左键拖拽地图
悬停: 鼠标悬停查看区域详情
点击: 点击区域高亮显示
数据显示
颜色深浅: 代表累计确诊人数多少
详细信息: 包含累计确诊、现存确诊、发病率、风险等级
实时更新: 数据每30秒自动刷新
视觉映射
🟦 蓝色系: 确诊人数较少的地区
🟨 黄色系: 确诊人数中等的地区
🟥 红色系: 确诊人数较多的地区
📈 图表说明
1. 疫情趋势图
柱状图: 每日新增确诊
折线图: 现存确诊变化
时间范围: 最近30天数据
2. 香港地图
热力图: 各区累计确诊分布
交互式: 支持缩放、拖拽、悬停
详细信息: 多维度数据展示
3. 风险等级分布
饼图: 低风险、中风险、高风险占比
颜色编码: 绿色(低)、黄色(中)、红色(高)
4. 各区排名
横向柱状图: 累计确诊人数排名
发病率排名: 每10万人确诊率对比
5. 雷达图对比
多维指标: 累计确诊、现存确诊、发病率、风险指数
区域对比: 前6个重点地区综合对比
🎨 界面特色
设计风格
深色主题: 科技感十足的深蓝色渐变背景
毛玻璃效果: 半透明面板增强视觉层次
响应式布局: 适配不同屏幕尺寸
动画效果: 卡片悬停和数据加载动画
颜色系统
🔴 累计确诊: 红色 (#ff6b6b)
🟠 现存确诊: 橙色 (#ffa726)
🟢 累计康复: 绿色 (#66bb6a)
🔴 累计死亡: 深红 (#ef5350)
🔵 新增确诊: 蓝色 (#42a5f5)
📱 移动端适配
响应式特性
自适应布局: 根据屏幕大小调整图表排列
触摸优化: 支持移动设备的触摸操作
字体缩放: 小屏幕下自动调整字体大小
🔧 技术架构
前端技术
ECharts 5.4.3: 图表渲染引擎
原生JavaScript: 数据处理和交互
CSS3: 现代化样式和动画
HTML5: 语义化结构
后端技术 (Flask版本)
Flask: Web框架
Pandas: 数据处理
OpenPyXL: Excel文件读取
🚨 故障排除
常见问题
地图不显示: 检查网络连接，确保ECharts CDN可访问
中文乱码: 确保浏览器编码设置为UTF-8
数据不更新: 检查Excel数据文件是否存在
图表变形: 调整浏览器窗口大小或刷新页面
浏览器兼容
✅ Chrome 60+
✅ Firefox 55+
✅ Safari 12+
✅ Edge 79+
📊 数据说明
数据来源
文件名:
香港各区疫情数据_20250322.xlsx数据范围: 2022-01-01 至 2022-06-29
覆盖地区: 香港18个行政区
数据字段
报告日期: 疫情统计日期
地区名称: 香港各行政区
累计确诊: 总确诊病例数
现存确诊: 当前治疗中病例
发病率: 每10万人确诊率
风险等级: 低/中/高风险分级
🎯 使用建议
最佳实践
全屏浏览: 建议使用全屏模式获得最佳体验
定期刷新: 数据会自动更新，也可手动刷新
交互探索: 充分利用地图的交互功能
多角度分析: 结合多个图表进行综合分析
分析要点
关注地图上的热点区域
对比不同地区的发病率
观察疫情发展趋势
分析风险等级分布
🎉 享受数据可视化带来的洞察力！
基于Cursor和Trae的AI编程实践：从Excel处理到疫情大屏开发
一、AI编程工具概述
1.1 Cursor编辑器简介
Cursor是一款基于VSCode开发的AI代码编辑器，提供智能代码补全、代码生成、代码修改、代码搜索和代码解释等功能。与其他工具不同，Cursor将AI辅助编码直接融入到编辑器的核心功能中，能够理解整个工程的代码，同时修改多个文件。
1.2 Trae编辑器简介
Trae是字节推出的一款AI驱动的集成开发环境，其亮点在于Builder模式，能够自主拆解需求并自动完成多轮编码任务，从想法描述到功能实现一气呵成。Trae还支持多模态开发，可以理解上传的图像内容并生成相关代码。
二、Cursor核心功能详解
2.1 Cursor Rules规则系统
Cursor Rules帮助定制AI行为，使其符合用户的编码风格和项目需求：
- 全局规则：在Cursor设置的"通用">"AI规则"中配置，适用于所有项目
- 项目规则：存储在.cursor/rules目录中的项目特定规则，优先级高于全局规则
# 示例项目规则
# 文件模式:*.tsx,*.ts
## React规范
- 使用函数组件
- 实现完整的prop类型
- 遵循React最佳实践2.2 主要功能对比
| 功能 | 快捷键 | 描述 |
|---|---|---|
| Composer/Agent | Cmd+L | 同时编辑多个文件，生成完整应用程序 |
| 聊天功能 | Cmd+L | 针对宽泛代码问题进行多轮对话 |
| 提示框功能 | Cmd+K | 生成或修改局部代码 |
三、实战案例：Excel报表处理
3.1 需求分析
合并两张Excel表格：
- 员工基本信息表（员工ID、姓名、性别、部门、入职日期）
- 员工绩效表（员工ID、年度、季度、绩效评分）
3.2 实现步骤
- 读取Excel字段：使用pandas库读取并展示两张表的字段结构
- 数据合并：基于员工ID合并两张表，添加2024年第4季度的绩效评分
import pandas as pd
# 读取员工基本信息表
basic_info = pd.read_excel("员工基本信息表.xlsx")
# 读取员工绩效表
performance = pd.read_excel("员工绩效表.xlsx")
# 筛选2024年第4季度绩效数据
q4_performance = performance[(performance['年度'] == 2024) & (performance['季度'] == 4)]
# 合并数据
merged_data = pd.merge(basic_info, q4_performance[['员工ID', '绩效评分']], on='员工ID', how='left')
四、实战案例：疫情实时监控大屏
4.1 数据准备
使用香港各区疫情数据，包含以下字段：
- 报告日期、地区名称
- 新增确诊、累计确诊、现存确诊
- 新增康复、累计康复
- 新增死亡、累计死亡
- 发病率、人口、风险等级
4.2 大屏设计方案
4.2.1 总体布局
graph TD
A[顶部标题栏] --> B[核心指标展示]
A --> C[中心区域]
C --> D[地理分布图]
C --> E[每日新增与累计确诊]
A --> F[两侧辅助区域]
F --> G[各区域疫情对比]
F --> H[风险预警看板]
A --> I[底部趋势区]
4.2.2 关键技术实现
- Flask后端：数据接口提供
- ECharts前端：可视化展示
- 香港地图GeoJSON：地理分布展示
# Flask数据接口示例
@app.route('/api/daily_cases')
def get_daily_cases():
# 处理数据逻辑
return jsonify(result)
4.3 地图优化技巧
- 获取高精度GeoJSON：使用阿里云DataV.GeoAtlas获取香港地图数据
- 样式调整：
- 设置合理的aspectScale调整长宽比
- 使用渐变颜色增强视觉效果
- 添加边界和标签提高可读性
// ECharts地图配置示例
option = {
backgroundColor: '#404a59',
visualMap: {
min: 0,
max: 100,
text: ['高', '低'],
inRange: {
color: ['#e0f3f8', '#abd9e9', '#74add1', '#4575b4', '#313695']
}
}
}
e
五、Trae编辑器实战应用
5.1 Builder模式实战
Trae的Builder模式能够自动拆解复杂需求，例如：
- 输入："创建一个Flask疫情大屏"
- Trae自动生成：
- 项目结构
- 后端API代码
- 前端可视化代码
- 部署配置
5.2 多模态开发示例
上传设计稿图片，Trae能够：
- 识别布局结构
- 提取配色方案
- 生成对应的HTML/CSS代码
六、总结与对比
| 特性 | Cursor | Trae |
|---|---|---|
| 核心优势 | 多文件协同编辑 | 需求自动拆解 |
| 最佳场景 | 代码重构/维护 | 从零开始项目 |
| 规则系统 | 支持精细定制 | 相对简单 |
| 多模态支持 | 有限 | 强大 |
| 学习曲线 | 中等 | 较低 |
在实际开发中，可以根据项目需求灵活选择：
- 复杂项目维护：Cursor更合适
- 快速原型开发：Trae效率更高
AI编程工具正在深刻改变开发工作流程，掌握这些工具将显著提升开发效率和质量。建议读者结合实际项目进行练习，逐步掌握这些工具的高级用法。
使用 Kiro 开发实际记录
1. 修改rule
2. 逐步发布命令
2.1 命令1》读取 香港各区疫情数据_20250322.xlsx 前30行数据
2.2 命令2》根据输出的数据，我来详细解释香港各区疫情数据中每个列名字段的意义
让LLM 理解字段意义，kiro 的了解还是不错的
22.3
2.3 制作图表 牛刀小试
制作 确诊人数与报告日期的推移图
kiro ( claude 4.0 很聪明 知道 缺少 matplotlib 库，再修改代码...)
Kiro 写了一个 安装的python , 使用 sys.executabel ， 方法很漂亮！
def install_package(package):
"""安装Python包"""
try:
subprocess.check_call([sys.executable, "-m", "pip", "install", package])
print(f"✅ 成功安装 {package}")
return True
except subprocess.CalledProcessError:
print(f"❌ 安装 {package} 失败")
return False
def main():
"""安装所需的依赖包"""
required_packages = [
'openpyxl', # Excel文件读取
'matplotlib', # 图表绘制
'seaborn' # 高级图表样式
]
print("=== 安装疫情数据分析所需依赖 ===\n")
success_count = 0
for package in required_packages:
print(f"正在安装 {package}...")
if install_package(package):
success_count += 1
print() 
绘图结果很不错
他把 区域的确诊情况也汇报了
2.4 使用 flask, echart 制作疫情看板大屏
厉害，一次就成功！
Flask 简介
Flask 是一个轻量级的 Python Web 框架，基于 Werkzeug WSGI 工具箱和 Jinja2 模板引擎。它以简洁、灵活著称，适合快速开发小型到中型 Web 应用或微服务。Flask 遵循“微框架”设计哲学，核心功能精简，但可通过扩展支持更多功能（如数据库、表单验证等）。
核心特性
- 轻量级：核心代码简洁，依赖较少，易于学习和部署。
- 模块化设计：通过扩展（如 Flask-SQLAlchemy、Flask-Login）灵活添加功能。
- 内置开发服务器：支持快速调试和测试。
- Jinja2 模板引擎：提供强大的 HTML 渲染能力。
- RESTful 支持：天然适配 API 开发。
基本代码示例
以下是一个简单的 Flask 应用：
from flask import Flask
app = Flask(__name__)
@app.route('/')
def hello():
return "Hello, World!"
if __name__ == '__main__':
app.run(debug=True)
ECharts 概述
ECharts 是一个由百度开源的数据可视化库，基于 JavaScript 实现，提供丰富的图表类型和交互功能。它支持多种数据格式，兼容主流浏览器，适用于构建动态、响应式的数据可视化应用。
核心特性
- 丰富的图表类型：支持折线图、柱状图、饼图、散点图、雷达图、热力图、地图等数十种图表。
- 高度定制化：可通过配置项调整颜色、动画、坐标轴等细节，满足个性化需求。
- 交互功能：支持缩放、拖拽、数据筛选、动态更新等交互操作。
- 跨平台兼容：兼容 PC 端和移动端，适配不同屏幕尺寸。
- 数据驱动：数据变化时自动更新图表，支持大规模数据渲染。
基本使用示例
以下是一个简单的 ECharts 折线图代码示例：
// 初始化图表实例
var myChart = echarts.init(document.getElementById('chart-container'));
// 配置数据与样式
var option = {
title: { text: '折线图示例' },
tooltip: {},
xAxis: { data: ['周一', '周二', '周三', '周四', '周五'] },
yAxis: {},
series: [{
name: '销量',
type: 'line',
data: [150, 230, 224, 218, 135]
}]
};
// 渲染图表
myChart.setOption(option);
2.5 在大屏中 以香港地图形式 显示各区的情况
Kiro 知道要添加香港的 GeoJson, 这个技能很厉害了！
第一次的效果不是很理想，地图不完整
要求kiro 获取正确的 地图json
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
