大模型应用班-第3课从Excel到大屏：AI编程实战全解析 HW3 从零到一：香港疫情数据看板开发实战指南

这次开发疫情看板的经历确实很有意思，从最初的Excel数据读取问题，到最后成功实现带有真实香港地图的交互式看板，整个过程充满了挑战和收获：

完整代码资源如下：

根据excel 制作看板，并且生成地图数据https://download.csdn.net/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
✅ 无需安装额外依赖

✅ 启动速度快

✅ 自动打开浏览器

📍 访问地址: http://localhost:8080/static_dashboard.html

方式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']
}
}
}

五、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 应用：

python 复制代码

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 折线图代码示例：

javascript 复制代码

// 初始化图表实例  
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

大模型应用班-第3课 从Excel到大屏：AI编程实战全解析 HW3 从零到一：香港疫情数据看板开发实战指南

从零到一：香港疫情数据看板开发实战指南

项目背景与目标

开发历程回顾

第一阶段：数据探索与基础分析

第二阶段：图表可视化尝试

第三阶段：Web看板架构设计

第四阶段：地图可视化的挑战

第五阶段：用户体验优化

核心技术难点与解决方案

1. 依赖管理问题

2. 中文字体显示

3. 地图数据获取

4. 跨平台兼容性

项目架构最佳实践

1. 渐进式开发

2. 多版本并存

3. 错误处理策略

4. 用户体验设计

数据可视化设计原则

1. 信息层次清晰

2. 交互设计合理

3. 视觉效果统一

开发工具与资源推荐

1. 数据处理

2. 可视化库

3. 地图数据源

4. 开发工具

性能优化经验

1. 数据加载优化

2. 图表渲染优化

3. 缓存策略

部署与维护建议

1. 部署方案

2. 监控与维护

3. 扩展性考虑

项目总结与反思

成功要素

经验教训

未来改进方向

给开发者的建议

1. 技术选择

2. 开发流程

3. 问题解决

4. 项目管理

结语

🏥 香港疫情数据看板使用说明

📋 功能特色

🗺️ 香港地图可视化

📊 多维度数据展示

🚀 启动方式

方式1: 静态版本 (推荐)

方式2: Flask动态版本

方式3: 直接打开HTML文件

🗺️ 地图功能详解

地图交互

数据显示

视觉映射

📈 图表说明

1. 疫情趋势图

2. 香港地图

3. 风险等级分布

4. 各区排名

5. 雷达图对比

🎨 界面特色

设计风格

颜色系统

📱 移动端适配

响应式特性

🔧 技术架构

前端技术

后端技术 (Flask版本)

🚨 故障排除

常见问题

浏览器兼容

📊 数据说明

数据来源

数据字段

🎯 使用建议

最佳实践

大模型应用班-第3课从Excel到大屏：AI编程实战全解析 HW3 从零到一：香港疫情数据看板开发实战指南

2.1 命令1》读取香港各区疫情数据_20250322.xlsx 前30行数据

2.3 制作图表牛刀小试

2.5 在大屏中以香港地图形式显示各区的情况