图表组件架构级提示词体系
📊 图表组件架构级提示词体系
🎯 阶段一：需求分析与设计
1.1 组件需求分析
设计一个企业级图表组件，用于数据可视化展示：
业务需求：
- 支持多种图表类型：[折线图、柱状图、饼图、散点图]
- 数据源格式：[数组对象、时间序列、分类数据]
- 交互需求：[点击事件、悬停提示、缩放拖拽]
- 显示要求：[响应式、主题切换、动画效果]
技术要求：
- 渲染引擎：[ECharts/D3.js/Chart.js/Recharts]
- 框架集成：[React/Vue/Angular/Svelte]
- 性能要求：[大数据量流畅渲染，10万+数据点]
- 可访问性：[屏幕阅读器支持，键盘导航]
请给出组件架构设计方案。
1.2 技术选型决策
基于以下场景选择图表库：
项目类型：[后台管理系统/数据大屏/移动端应用]
数据规模：[小量实时数据/大数据历史分析]
团队技能：[熟悉ECharts/精通D3/需要开箱即用]
特殊需求：[3D图表/GIS地图/流程图]
请对比：
1. ECharts vs D3.js vs Chart.js vs Recharts
2. 各自的优缺点和适用场景
3. 集成复杂度和性能表现
4. 社区支持和维护状态
给出最终技术选型建议。
🏗️ 阶段二：组件架构设计
2.1 核心架构定义
设计图表组件的分层架构：
1. 基础层（BaseChart）
- 容器管理
- 实例生命周期
- 事件系统
- 错误处理
2. 配置层（ChartConfig）
- 主题配置系统
- 默认选项预设
- 配置合并策略
- 类型定义
3. 数据层（DataProcessor）
- 数据标准化
- 数据转换（聚合、筛选、排序）
- 实时数据更新
- 大数据分片加载
4. 渲染层（Renderer）
- 图表实例管理
- 动画控制器
- 性能优化（虚拟渲染、懒加载）
- 内存管理
请给出TypeScript接口设计和类图。
2.2 接口设计
定义图表组件的TypeScript接口：
```typescript
// 我需要以下核心接口：
1. IChartProps - 组件Props定义
2. IChartOption - 图表配置选项
3. IChartData - 数据格式规范
4. IChartEvent - 事件系统接口
5. IChartTheme - 主题系统接口
要求：
- 支持泛型，类型安全
- 扩展性强，支持自定义配置
- 提供完整的JSDoc注释
- 包含示例用法
请生成完整的接口定义文件。
🔧 阶段三：基础组件实现
3.1 基础图表组件
创建基础图表组件BaseChart：
技术栈：React + TypeScript + ECharts
要求：
1. Props定义
- options: EChartsOption（必填）
- data: any[]
- theme?: 'light' | 'dark' | 'custom'
- loading?: boolean
- onEvents?: Record<string, Function>
- style?: CSSProperties
- className?: string
2. 核心功能
- 自动响应式
- 主题切换
- 加载状态
- 错误边界
- 性能监控
3. 生命周期管理
- 组件挂载时初始化图表
- 数据更新时增量更新
- 容器大小变化时自适应
- 组件卸载时清理资源
生成完整组件代码，包含详细注释。
3.2 配置管理系统
创建图表配置管理系统：
功能需求：
1. 主题配置管理
- 内置主题：light/dark
- 自定义主题扩展
- 主题切换动画
2. 默认配置预设
- 折线图默认配置
- 柱状图默认配置
- 饼图默认配置
- 散点图默认配置
3. 配置合并策略
- 深度合并自定义配置
- 配置验证和修复
- 配置版本管理
4. 配置生成器
- 根据数据类型自动生成配置
- 智能颜色分配
- 自适应图表类型选择
生成配置管理工具类和相关Hook。
📊 阶段四：业务图表组件
4.1 折线图组件
创建高级折线图组件LineChart：
特殊功能需求：
1. 多系列数据支持
2. 时间轴自动格式化
3. 数据点标记和提示
4. 区域填充和渐变
5. 实时数据流更新
6. 预测趋势线
7. 异常值检测标注
性能优化：
- 大数据量时采样显示
- 虚拟滚动支持
- WebGL渲染选项
- 动画帧率控制
生成组件代码，包含完整的示例数据。
4.2 统计图表组件
创建数据分析统计图表：
包含组件：
1. 对比柱状图（ComparisonBarChart）
- 多维度对比
- 堆叠显示
- 百分比模式
2. 分布散点图（DistributionScatterChart）
- 相关性分析
- 聚类显示
- 趋势线拟合
3. 热力图（HeatmapChart）
- 时间序列热力
- 地理热力图
- 矩阵热力图
4. 桑基图（SankeyChart）
- 流量分析
- 路径追踪
- 层级展示
每个组件都需要：
- 完整的TypeScript定义
- 数据适配器
- 交互事件
- 导出功能
⚡ 阶段五：性能优化
5.1 大数据渲染优化
优化图表组件的大数据渲染性能：
问题场景：
- 10万+数据点渲染卡顿
- 频繁更新导致掉帧
- 内存占用过高
优化方案：
1. 数据采样策略
- 最大点数限制
- 智能采样算法
- 细节层次（LOD）渲染
2. WebGL加速
- 使用ECharts GL
- GPU计算支持
- 离屏渲染
3. 虚拟化渲染
- 视窗内渲染
- 滚动加载
- 渐进式渲染
4. 内存管理
- 图表实例池
- 垃圾回收
- 缓存策略
生成优化代码和性能测试用例。
5.2 实时数据更新优化
优化实时数据流图表：
场景：监控大屏，每秒更新1000+数据点
要求：
1. 增量更新机制
- 只更新变化数据
- 避免全量重绘
- 数据缓冲队列
2. 帧率控制
- 固定刷新频率
- 防抖更新
- 动画平滑过渡
3. WebSocket集成
- 连接管理
- 断线重连
- 数据压缩
4. 性能监控
- 渲染时间统计
- 内存泄漏检测
- 掉帧警告
生成实时图表组件和性能监控工具。
🎨 阶段六：主题与样式
6.1 主题系统
创建可扩展的图表主题系统：
功能需求：
1. 主题定义结构
- 颜色系统（主色、辅助色、语义色）
- 字体系统（字体族、字号、字重）
- 间距系统（边距、内边距）
- 圆角系统
2. 主题切换
- 亮色/暗色主题
- 自定义主题
- 主题热切换
3. 主题扩展
- 插件式主题扩展
- 主题继承机制
- 主题变量引用
4. 主题生成器
- 根据品牌色生成主题
- 对比度自动调整
- 无障碍颜色检查
生成主题配置文件和主题管理Hook。
6.2 动画系统
创建图表动画系统：
动画类型：
1. 入场动画
- 渐入
- 缩放
- 滑动
- 弹性
2. 更新动画
- 数据更新过渡
- 形态变换动画
- 路径动画
3. 交互动画
- 悬停反馈
- 点击效果
- 高亮动画
4. 性能优化
- 硬件加速
- 动画帧合并
- 低性能设备降级
生成动画配置和动画控制器。
🔌 阶段七：扩展与集成
7.1 插件系统
设计图表插件系统：
插件类型：
1. 数据处理插件
- 数据清洗
- 数据分析
- 数据转换
2. 渲染插件
- 自定义图形
- 特殊效果
- 外部渲染器
3. 交互插件
- 手势操作
- 键盘快捷键
- 语音控制
4. 导出插件
- 图片导出
- PDF生成
- 数据导出
插件架构要求：
- 插件注册机制
- 生命周期管理
- 依赖注入
- 热插拔支持
生成插件接口定义和插件管理器。
7.2 第三方集成
集成图表组件到不同框架：
目标框架：
1. React集成
- Hooks封装
- 上下文集成
- 状态管理集成
2. Vue集成
- Composition API封装
- Provide/Inject集成
- Vuex/Pinia集成
3. Angular集成
- 服务封装
- 依赖注入
- RxJS集成
4. 微前端集成
- 模块联邦导出
- 样式隔离
- 版本管理
生成各框架的适配层代码。
🧪 阶段八：测试与文档
8.1 组件测试
为图表组件编写完整的测试套件：
测试类型：
1. 单元测试
- 配置验证
- 数据转换
- 工具函数
2. 组件测试
- 渲染测试
- Props更新测试
- 事件触发测试
3. 性能测试
- 渲染性能基准
- 内存泄漏检测
- 大数据压力测试
4. 视觉回归测试
- 截图对比
- 像素级差异检测
- 跨浏览器测试
测试工具：
- Jest + React Testing Library
- Cypress组件测试
- Storybook可视化测试
- Lighthouse性能测试
生成测试配置文件和示例测试。
8.2 文档与示例
创建图表组件文档系统：
文档内容：
1. API文档
- 组件Props详细说明
- 事件API
- 方法API
- 类型定义
2. 示例库
- 基础用法示例
- 进阶功能示例
- 性能优化示例
- 常见问题示例
3. 交互式示例
- 在线配置器
- 实时预览
- 代码编辑器
4. 最佳实践
- 性能优化指南
- 无障碍指南
- 移动端适配指南
工具选择：
- Storybook + MDX
- Docusaurus
- VitePress
生成文档配置和示例代码。
🚀 阶段九：生产优化
9.1 打包优化
优化图表组件的打包体积：
问题：当前包体积过大，影响加载速度
优化策略：
1. 按需引入
- ECharts模块化引入
- 动态导入图表类型
- 语言包分离
2. 代码分割
- 按图表类型分割
- 按功能分割
- 运行时加载
3. Tree Shaking
- 副作用标记
- 导出优化
- 死代码消除
4. 压缩优化
- 图片内联
- SVG压缩
- 字体子集化
生成优化后的构建配置。
9.2 监控与错误处理
实现图表组件的生产监控：
监控指标：
1. 性能指标
- 初始化时间
- 渲染帧率
- 内存占用
2. 错误监控
- 渲染错误
- 数据错误
- 配置错误
3. 使用统计
- 图表类型使用频率
- 交互行为统计
- 用户满意度
4. 异常检测
- 性能异常预警
- 错误率监控
- 数据异常检测
集成工具：
- Sentry错误监控
- Datadog性能监控
- 自定义监控面板
生成监控代码和Dashboard。
📦 快速使用模板
基础使用
@/components/charts/BaseChart.tsx
基于这个基础图表组件，创建一个销售额趋势折线图：
数据格式：
```json
[
{ date: "2024-01", sales: 15000 },
{ date: "2024-02", sales: 18000 },
{ date: "2024-03", sales: 22000 }
]
要求：
- X轴为时间，格式化为"YYYY-MM"
- Y轴为销售额，添加"¥"前缀
- 添加趋势线
- 悬停显示详细数据
- 支持数据钻取（点击进入月度详情）
生成完整组件代码和使用示例。
### **高级功能**
@/components/charts/LineChart.tsx
扩展这个折线图组件，添加以下高级功能：
-
对比模式
- 支持多系列数据对比
- 切换为百分比显示
- 添加差异标注
-
预测功能
- 基于历史数据预测未来趋势
- 显示置信区间
- 预测算法可配置
-
异常检测
- 自动识别异常数据点
- 标注异常原因
- 提供异常处理建议
生成功能实现代码和配置选项。
### **性能优化**
当前图表组件在渲染5万+数据点时出现卡顿：
问题分析：
- 初始化时间：>5s
- 内存占用：>200MB
- 交互响应延迟：>500ms
优化要求：
- 实现数据采样，保持视觉一致性
- 添加WebGL渲染选项
- 实现虚拟滚动
- 添加加载状态和进度提示
请生成优化后的代码和性能对比报告。
---
## 🎯 **最佳实践提示词**
### **组件设计模式**
设计一个遵循以下原则的图表组件：
-
单一职责原则
- 只负责图表渲染
- 数据处理分离
- 配置管理分离
-
开闭原则
- 支持扩展新图表类型
- 配置系统可扩展
- 插件系统支持
-
依赖倒置原则
- 抽象图表渲染接口
- 支持多渲染引擎
- 依赖注入配置
-
接口隔离原则
- 拆分基础接口和扩展接口
- 按需实现接口
- 避免接口污染
生成符合这些原则的组件架构代码。
### **无障碍支持**
为图表组件添加完整的无障碍支持：
WCAG 2.1 AA标准要求：
-
屏幕阅读器支持
- ARIA标签
- 键盘导航
- 焦点管理
-
色觉障碍支持
- 颜色对比度检查
- 模式切换（色盲模式）
- 纹理辅助
-
键盘操作
- 全键盘导航
- 快捷键支持
- 焦点指示器
-
响应式设计
- 触摸屏优化
- 高DPI支持
- 放大不破坏布局
生成无障碍优化代码和测试用例。
---
这套图表组件提示词体系从**架构设计**到**具体实现**，再到**性能优化**和**生产部署**，提供了完整的指导方案。Cursor可以基于这些提示词快速生成高质量的可视化组件代码。
浙公网安备 33010602011771号