如何有效循序渐进地使用AI IDE工具开发数据看板（含中文乱码解决方案）

在AI大模型应用课程中，我们学习了如何使用 Cursor / TRAE / Codebuddy / Qoder这类AI编程工具来开发数据看板。本文将结合课程内容和实际开发经验，详细介绍如何循序渐进地使用Cursor开发数据看板，特别关注中文乱码等常见问题的解决方案。

参考用IDE 开发的看板

 

香港疫情数据看板开发实战指南https://blog.csdn.net/chenchihwen/article/details/149712433?spm=1011.2415.3001.5331

一、开发前的准备工作

1. 环境配置

首先确保安装了合适的Python版本（推荐3.10及以上），并配置好国内镜像源以提高依赖安装速度：

pip install pandas -i https://pypi.tuna.tsinghua.edu.cn/simple

2. Cursor工具配置

在Cursor中正确配置API密钥：

  • 打开File => Preference => Cursor Setting

  • 配置OpenAI的Key和地址

3. 设置编码规则

为了避免中文乱码，需要在IDE中设置规则：

1、之前完成正确的功能，尽量不要修改。
比如当前的instruction是完善功能A的，那么只需要专注功能A，不需要修改其他功能（比如功能B）。
2、生成的注释用中文，并使用 UTF-8 编码。
3、生成的代码有时候会存在中文乱码的情况，所以你在生成中文的时候，需要检查是否有中文乱码，如果有乱码需要修正。
4、如果修改某个函数的实现，先理解之前函数实现的逻辑。然后在原来的基础上，再进行修改（保留之前的函数逻辑，不要移除）

  • 生成的注释使用中文，并使用UTF-8编码

  • 检查生成的代码是否有中文乱码，如有需要手动修正

二、循序渐进的开发步骤

先思考，人是怎么做的？
分成几个步骤，步骤之间有逻辑顺序的；

锻炼的人的思维 => 撰写需求分析，拆成不同的步骤

Step1，理解数据表的字段含义
Step2，画图：横坐标是报告日期，纵坐标是新增确诊人数

1、编写Python代码，打开 香港各区疫情数据_20250322.xlsx 读取前20行数据
2、帮我画图，显示新增确诊人数，横坐标是报告日期
3、很好，我想呈现不同区的新增确诊，也是显示这个折线图
4、帮我制作可视化大屏，选择适合的图表样式，图表的数量不超过5个，用Flask + Echarts实现

第一步：数据读取与探索

从最简单的任务开始，逐步构建复杂功能。以疫情数据看板为例：

1、编写Python代码，打开 香港各区疫情数据_20250322.xlsx 读取前20行数据

使用Cursor生成代码时，可能会遇到依赖问题：

Q：Missing optional dependency 'openpyxl'
解决方法：将错误选中 => Add to Chat，然后提示加清华园镜像

第二步：数据分析与处理

在正确读取数据的基础上，进行数据分析：

# 示例：计算每日新增和累计确诊病例数
def calculate_daily_cases(df):
    # 确保报告日期列为日期类型
    df['报告日期'] = pd.to_datetime(df['报告日期'])
    
    # 按日期分组并计算每日总新增确诊和累计确诊
    daily_summary = df.groupby('报告日期').agg({
        '新增确诊': 'sum',
        '累计确诊': 'max'
    }).reset_index()
    
    return daily_summary

第三步：基础可视化

使用matplotlib进行初步可视化：

import matplotlib.pyplot as plt
​
# 设置中文字体，解决中文显示问题
plt.rcParams['font.sans-serif'] = ['SimHei', 'Microsoft YaHei', 'SimSun']
plt.rcParams['axes.unicode_minus'] = False
​
# 绘制新增确诊曲线图
plt.figure(figsize=(12, 6))
plt.plot(daily_data['报告日期'], daily_data['新增确诊'])
plt.title('每日新增确诊病例')
plt.xlabel('日期')
plt.ylabel('新增确诊数')
plt.xticks(rotation=45)
plt.tight_layout()
plt.show()

第四步：升级到Web可视化

从matplotlib转向ECharts，提供更好的Web体验：

# Flask后端API示例
@app.route('/api/daily_data')
def api_daily_data():
    try:
        df = load_data()
        if df is not None:
            daily_data = prepare_daily_data(df)
            result = {
                'dates': daily_data['报告日期'].dt.strftime('%Y-%m-%d').tolist(),
                'daily_new': daily_data['新增确诊'].tolist(),
                'total_cases': daily_data['累计确诊'].tolist()
            }
            return jsonify(result)
    except Exception as e:
        return jsonify({'error': str(e)})

第五步：构建完整看板

整合所有组件，创建完整的数据看板：

<!-- 前端ECharts可视化示例 -->
<div class="chart-wrapper">
    <div class="chart-title">每日新增与累计确诊数据</div>
    <div class="chart" id="daily-total-chart"></div>
</div>
​
<script>
// 初始化每日新增与累计确诊数据图表
function initDailyTotalChart(data) {
    const chartDom = document.getElementById('daily-total-chart');
    const myChart = echarts.init(chartDom);
    
    const option = {
        tooltip: { trigger: 'axis' },
        xAxis: { type: 'category', data: data.dates },
        yAxis: { type: 'value' },
        series: [
            {
                name: '每日新增',
                type: 'bar',
                data: data.daily_new
            },
            {
                name: '累计确诊',
                type: 'line',
                data: data.total_cases
            }
        ]
    };
    
    myChart.setOption(option);
}
</script>

三、中文乱码问题解决方案

1. Python代码中的中文处理

# 设置matplotlib中文字体
plt.rcParams['font.sans-serif'] = ['SimHei', 'Microsoft YaHei', 'SimSun', 'Arial Unicode MS']
plt.rcParams['axes.unicode_minus'] = False
​
# 在Flask应用中设置响应头
@app.after_request
def after_request(response):
    response.headers['Content-Type'] = 'text/html; charset=utf-8'
    return response

2. HTML页面中的中文处理

<head>
    <meta charset="UTF-8">
    <style>
        * {
            font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
        }
    </style>
</head>

3. 数据文件中的中文处理

确保Excel文件保存为UTF-8编码格式，或在读取时指定编码：

# 读取Excel时处理编码
df = pd.read_excel(DATA_FILE, encoding='utf-8')

四、使用AI IDE工具的注意事项

1. Prompt编写技巧

  • 分步骤提问：不要一次性要求完成所有功能，分步骤逐步实现

  • 明确技术栈：指定使用的技术（如Flask + ECharts）

  • 限定范围：明确图表数量、功能要求等

2. 代码质量控制

  • 检查生成代码：AI生成的代码可能存在错误，需要仔细检查

  • 保留正确功能：之前完成正确的功能尽量不要修改

  • 理解逻辑后再修改：修改函数实现时，先理解之前的逻辑

3. 错误处理与调试

  • 依赖问题：遇到Missing optional dependency错误时，使用国内镜像安装

  • 中文乱码：按照上述方法设置字体和编码

  • API接口：确保前后端接口数据格式一致

4. 性能优化建议

  • 数据缓存：对于不经常变化的数据，使用缓存机制

  • 异步加载：地图等大数据量资源采用异步加载

  • 响应式设计：确保看板在不同设备上都能正常显示

五、实际开发经验总结

1. 开发流程建议

  1. 从简单到复杂：先实现基础数据读取，再逐步添加功能

  2. 频繁测试：每完成一个小功能就进行测试

  3. 版本控制：使用Git管理代码版本

  4. 文档记录：记录开发过程中的问题和解决方案

2. 常见问题及解决方案

  • 地图数据获取：使用阿里云DataV等可靠数据源获取GeoJSON数据

  • 跨平台兼容性：采用Web技术栈天然支持跨平台

  • 用户界面设计：与UI设计师沟通，确保符合设计要求

3. 最佳实践

  • 模块化设计：将功能拆分为独立模块，便于维护

  • 错误处理：添加完善的错误处理机制

  • 用户体验：提供加载状态提示、友好的错误信息

通过以上方法，我们可以有效地使用Cursor等AI编程工具循序渐进地开发数据看板，同时解决中文乱码等常见问题，最终构建出功能完善、用户体验良好的数据可视化应用。

# ide # 人工智能
Logo
AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

告别扫描文档处理烦恼：ScanTailor Advanced的智能文档优化解决方案

ScanTailor Advanced是一款专业的扫描文档后期处理工具，专为解决老旧文档数字化中的各种问题而设计。通过智能内容识别、批量处理和多线程优化，它能将倾斜、模糊、杂乱的扫描文档转化为整洁的电子文件，显著提升文档数字化效率。## 文档数字化的常见痛点与解决方案### 页面歪斜校正：智能算法自动修正传统扫描文档经常出现页面歪斜问题，手动调整每页耗时耗力。ScanTailor Adv

avatar AI Agent技术社区

SeedVR2终极指南：如何用单步扩散模型实现专业级视频修复

还在为老旧视频的模糊画质而烦恼吗？面对抖动严重的监控录像或褪色的家庭影像，你是否曾希望有一种简单高效的修复方案？SeedVR2正是为解决这些痛点而生的一站式视频修复工具。作为字节跳动推出的先进视频修复模型，它能够在单步推理中实现专业级的视频质量提升，彻底改变了传统视频修复的工作流程。## 核心价值：为什么选择SeedVR2进行视频修复？**传统视频修复的三大瓶颈**：1. **计算成本高

avatar AI Agent技术社区

终极指南：如何用Python自动化工具告别大麦抢票焦虑，轻松获取心仪演出门票

还记得那些让你心跳加速的抢票时刻吗？热门演唱会开票瞬间，你手忙脚乱地刷新页面，却眼睁睁看着"立即购买"按钮变灰，票在几秒内售罄。这种"拼手速"的抢票时代已经过去，现在有了基于Python开发的大麦自动抢票工具，让你告别手速焦虑，轻松获取周杰伦、五月天、周深等热门演出的门票。## 🔥 你的抢票痛点，我们都有解决方案### 场景一：热门演唱会一票难求"周杰伦演唱会开票3秒售罄，我连页面都没

avatar AI Agent技术社区