|
|
@@ -0,0 +1,482 @@
|
|
|
+# 故事 016.014: 完成 draw-charts.ts 核心绘制逻辑搬迁
|
|
|
+
|
|
|
+## Status
|
|
|
+
|
|
|
+Approved
|
|
|
+
|
|
|
+## Story
|
|
|
+
|
|
|
+**作为** 开发者,
|
|
|
+**我想要** 完成 `draw-charts.ts` 文件的核心绘制逻辑搬迁,
|
|
|
+**以便于** 图表能够正确渲染并在Canvas上显示,而不是显示空白。
|
|
|
+
|
|
|
+## Background
|
|
|
+
|
|
|
+在执行故事016.008(搬迁核心绘制函数)时,发现 `draw-charts.ts` 文件的搬迁不完整。文件只包含了数据准备阶段的代码(前289行),但核心的图表绘制调度逻辑(switch语句和各图表类型的绘制调用)完全缺失。这导致图表数据计算完成但Canvas上没有任何渲染,图表显示为空白。
|
|
|
+
|
|
|
+## 问题详情
|
|
|
+
|
|
|
+当前 `draw-charts.ts` 文件在第309行就结束了,缺少以下关键内容:
|
|
|
+1. 根据图表类型(column/line/pie/radar等)分发绘制任务的 switch 语句
|
|
|
+2. 调用各图表类型的数据点计算函数(如 `getColumnDataPoints`)
|
|
|
+3. 调用各图表类型的绘制函数(如 `drawColumnDataPoints`)
|
|
|
+4. 绘制坐标轴(drawXAxis、drawYAxis)
|
|
|
+5. 绘制图例(drawLegend)
|
|
|
+6. 最后调用 `drawCanvas()` 触发实际的Canvas渲染
|
|
|
+7. 动画处理逻辑(如果启用动画)
|
|
|
+
|
|
|
+## 影响范围
|
|
|
+
|
|
|
+- 所有图表类型(柱状图、折线图、饼图、雷达图等)都无法渲染
|
|
|
+- 在 `yongren-statistics-ui` 包中使用 `ColumnChart` 组件时,Canvas显示为空白
|
|
|
+- 数据正确传递到uCharts实例,但绘制流程未完成
|
|
|
+
|
|
|
+## Acceptance Criteria
|
|
|
+
|
|
|
+1. `draw-charts.ts` 文件包含完整的 switch 语句,覆盖所有图表类型
|
|
|
+2. 每种图表类型的 case 分支都正确调用 getDataPoints 和 draw*DataPoints
|
|
|
+3. 坐标轴、图例、网格等通用元素正确绘制
|
|
|
+4. 动画逻辑完整实现
|
|
|
+5. drawCanvas() 调用正确添加,触发实际Canvas渲染
|
|
|
+6. 类型检查通过(pnpm typecheck),无类型错误
|
|
|
+7. 构建成功(pnpm build),生成正确的 .d.ts 文件
|
|
|
+8. ColumnChart 组件在 `yongren-statistics-ui` 中正常显示
|
|
|
+9. 其他图表类型(LineChart、PieChart等)也能正常渲染
|
|
|
+10. 动画、tooltip、交互功能正常工作
|
|
|
+11. 代码逻辑与原始 u-charts.js 完全一致
|
|
|
+
|
|
|
+## Tasks / Subtasks
|
|
|
+
|
|
|
+- [ ] **任务1: 分析原始 drawCharts 函数的完整逻辑** (AC: 11)
|
|
|
+ - [ ] 定位原始 u-charts.js 文件中的 switch 语句(约在第6528-6960行)
|
|
|
+ - [ ] 理解每种图表类型的绘制流程
|
|
|
+ - [ ] 确认数据准备阶段和绘制阶段的分界点(当前文件的第289行之后)
|
|
|
+ - [ ] 记录所有需要导入的绘制函数和数据点计算函数
|
|
|
+
|
|
|
+- [ ] **任务2: 补充完整的 switch 语句实现** (AC: 1, 2, 11)
|
|
|
+ - [ ] 为每种图表类型创建 case 分支:
|
|
|
+ - [ ] word (词云)
|
|
|
+ - [ ] map (地图)
|
|
|
+ - [ ] funnel (漏斗图)
|
|
|
+ - [ ] line (折线图)
|
|
|
+ - [ ] scatter (散点图)
|
|
|
+ - [ ] bubble (气泡图)
|
|
|
+ - [ ] mix (混合图)
|
|
|
+ - [ ] column (柱状图)
|
|
|
+ - [ ] mount (山图)
|
|
|
+ - [ ] bar (条形图)
|
|
|
+ - [ ] area (面积图)
|
|
|
+ - [ ] ring (环形图)
|
|
|
+ - [ ] pie (饼图)
|
|
|
+ - [ ] rose (玫瑰图)
|
|
|
+ - [ ] radar (雷达图)
|
|
|
+ - [ ] arcbar (环形条形图)
|
|
|
+ - [ ] gauge (仪表盘)
|
|
|
+ - [ ] candle (K线图)
|
|
|
+ - [ ] 每个 case 调用对应的 getDataPoints 函数计算数据点坐标
|
|
|
+ - [ ] 每个 case 调用对应的 draw*DataPoints 函数执行绘制
|
|
|
+ - [ ] 处理混合图表(mix)的特殊逻辑
|
|
|
+
|
|
|
+- [ ] **任务3: 补充通用绘制元素** (AC: 3, 11)
|
|
|
+ - [ ] 在需要坐标轴的图表类型中调用 drawXAxis 绘制X轴
|
|
|
+ - [ ] 在需要坐标轴的图表类型中调用 drawYAxisGrid 绘制Y轴网格
|
|
|
+ - [ ] 在需要坐标轴的图表类型中调用 drawYAxis 绘制Y轴
|
|
|
+ - [ ] 在需要图例的图表类型中调用 drawLegend 绘制图例
|
|
|
+ - [ ] 在有标记线的情况下调用 drawMarkLine 绘制标记线
|
|
|
+ - [ ] 调用 drawToolTipBridge 处理tooltip显示
|
|
|
+
|
|
|
+- [ ] **任务4: 补充动画处理逻辑** (AC: 4, 10)
|
|
|
+ - [ ] 为每种图表类型创建 Animation 实例(如果 opts.animation 为 true)
|
|
|
+ - [ ] 在 onProcess 回调中清除Canvas并重新绘制图表
|
|
|
+ - [ ] 处理动画进度的逐步更新(process 参数)
|
|
|
+ - [ ] 在动画完成时触发 'renderComplete' 事件
|
|
|
+ - [ ] 特殊处理:word、map、funnel 等图表类型的动画逻辑
|
|
|
+ - [ ] 特殊处理:不需要动画的图表类型(如 map)
|
|
|
+
|
|
|
+- [ ] **任务5: 补充 drawCanvas 调用和上下文旋转** (AC: 5, 11)
|
|
|
+ - [ ] 在所有绘制操作完成后调用 drawCanvas() 触发实际渲染
|
|
|
+ - [ ] 如果 opts.rotate 为 true,在绘制前调用 contextRotate
|
|
|
+ - [ ] 确保上下文的 draw() 方法被调用
|
|
|
+
|
|
|
+- [ ] **任务6: 验证搬迁结果** (AC: 6, 7, 11)
|
|
|
+ - [ ] 运行类型检查(pnpm typecheck)确保无类型错误
|
|
|
+ - [ ] 运行构建(pnpm build)确保成功
|
|
|
+ - [ ] 检查生成的 .d.ts 文件正确导出类型
|
|
|
+ - [ ] 对比代码逻辑与原始 u-charts.js 文件,确保完全一致
|
|
|
+
|
|
|
+- [ ] **任务7: 在实际项目中测试图表渲染** (AC: 8, 9, 10)
|
|
|
+ - [ ] 在 `yongren-statistics-ui` 中测试 ColumnChart 组件
|
|
|
+ - [ ] 验证图表能够正常显示(不再空白)
|
|
|
+ - [ ] 测试动画功能是否正常
|
|
|
+ - [ ] 测试 tooltip 功能是否正常
|
|
|
+ - [ ] 测试图例点击交互是否正常
|
|
|
+ - [ ] 测试其他图表类型(LineChart、PieChart等)
|
|
|
+
|
|
|
+## Dev Notes
|
|
|
+
|
|
|
+### 相关源文件位置
|
|
|
+
|
|
|
+**搬迁目标文件:**
|
|
|
+- `mini-ui-packages/mini-charts/src/lib/draw-controllers/draw-charts.ts` - 需要补充完整绘制逻辑
|
|
|
+
|
|
|
+**原始源文件:**
|
|
|
+- `docs/小程序图表库示例/u-charts小程序图表库.js` (第6528-6960行) - 原始 drawCharts 函数
|
|
|
+
|
|
|
+**相关模块文件:**
|
|
|
+- `mini-ui-packages/mini-charts/src/lib/draw-controllers/animation.ts` - Animation 类
|
|
|
+- `mini-ui-packages/mini-charts/src/lib/draw-controllers/draw-canvas.ts` - drawCanvas 函数
|
|
|
+- `mini-ui-packages/mini-charts/src/lib/renderers/` - 所有绘制函数
|
|
|
+- `mini-ui-packages/mini-charts/src/lib/charts-data/` - 所有数据点计算函数
|
|
|
+- `mini-ui-packages/mini-charts/src/lib/data-processing/` - 数据处理函数
|
|
|
+- `mini-ui-packages/mini-charts/src/lib/helper-functions/` - 辅助函数
|
|
|
+
|
|
|
+**测试项目:**
|
|
|
+- `mini-ui-packages/yongren-statistics-ui/` - 用于测试 ColumnChart 组件
|
|
|
+
|
|
|
+### 当前文件状态
|
|
|
+
|
|
|
+当前 `draw-charts.ts` 文件包含:
|
|
|
+- **第1-89行**: 导入语句和类型定义
|
|
|
+- **第107-289行**: 数据准备阶段代码
|
|
|
+ - 修复饼图类数据格式 (fixPieSeries)
|
|
|
+ - 填充系列数据 (fillSeries)
|
|
|
+ - 计算移动平均线 (calCandleMA)
|
|
|
+ - 过滤系列数据 (filterSeries)
|
|
|
+ - 计算图例区域 (calLegendData)
|
|
|
+ - 计算Y轴数据 (calYAxisData)
|
|
|
+ - 计算X轴数据 (getXAxisPoints, calCategoriesData)
|
|
|
+ - 处理滚动偏移
|
|
|
+ - 计算饼图文本最大长度
|
|
|
+
|
|
|
+**缺失内容:**
|
|
|
+- 第292行开始应该是 switch 语句,但当前文件只有占位符注释
|
|
|
+- 缺少所有图表类型的绘制调度逻辑
|
|
|
+- 缺少动画实例创建和启动逻辑
|
|
|
+
|
|
|
+### 技术实现细节
|
|
|
+
|
|
|
+**原始 switch 语句结构 (u-charts.js 第6528-6960行):**
|
|
|
+
|
|
|
+```javascript
|
|
|
+switch (type) {
|
|
|
+ case 'word': // 词云图
|
|
|
+ case 'map': // 地图
|
|
|
+ case 'funnel': // 漏斗图
|
|
|
+ case 'line': // 折线图
|
|
|
+ case 'scatter': // 散点图
|
|
|
+ case 'bubble': // 气泡图
|
|
|
+ case 'mix': // 混合图
|
|
|
+ case 'column': // 柱状图
|
|
|
+ case 'mount': // 山图
|
|
|
+ case 'bar': // 条形图
|
|
|
+ case 'area': // 面积图
|
|
|
+ case 'ring': // 环形图
|
|
|
+ case 'pie': // 饼图
|
|
|
+ case 'rose': // 玫瑰图
|
|
|
+ case 'radar': // 雷达图
|
|
|
+ case 'arcbar': // 环形条形图
|
|
|
+ case 'gauge': // 仪表盘
|
|
|
+ case 'candle': // K线图
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+**标准图表类型绘制流程 (column/line/area/mount/scatter/bubble/mix/candle):**
|
|
|
+
|
|
|
+```typescript
|
|
|
+case 'column':
|
|
|
+ _this.animationInstance = new Animation({
|
|
|
+ timing: opts.timing,
|
|
|
+ duration: duration,
|
|
|
+ onProcess: function(process) {
|
|
|
+ context.clearRect(0, 0, opts.width, opts.height);
|
|
|
+ if (opts.rotate) {
|
|
|
+ contextRotate(context, opts);
|
|
|
+ }
|
|
|
+ drawYAxisGrid(categories, opts, config, context);
|
|
|
+ drawXAxis(categories, opts, config, context);
|
|
|
+ var result = drawColumnDataPoints(series, opts, config, context, process);
|
|
|
+ opts.chartData.xAxisPoints = result.xAxisPoints;
|
|
|
+ opts.chartData.calPoints = result.calPoints;
|
|
|
+ opts.chartData.eachSpacing = result.eachSpacing;
|
|
|
+ drawYAxis(series, opts, config, context);
|
|
|
+ if (opts.enableMarkLine !== false && process === 1) {
|
|
|
+ drawMarkLine(opts, config, context);
|
|
|
+ }
|
|
|
+ drawLegend(opts.series, opts, config, context, opts.chartData);
|
|
|
+ drawToolTipBridge(opts, config, context, process, eachSpacing, xAxisPoints);
|
|
|
+ drawCanvas(opts, context);
|
|
|
+ },
|
|
|
+ onAnimationFinish: function() {
|
|
|
+ _this.uevent.trigger('renderComplete');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ break;
|
|
|
+```
|
|
|
+
|
|
|
+**饼图类绘制流程 (pie/ring/rose):**
|
|
|
+
|
|
|
+```typescript
|
|
|
+case 'pie':
|
|
|
+ _this.animationInstance = new Animation({
|
|
|
+ timing: opts.timing,
|
|
|
+ duration: duration,
|
|
|
+ onProcess: function(process) {
|
|
|
+ context.clearRect(0, 0, opts.width, opts.height);
|
|
|
+ if (opts.rotate) {
|
|
|
+ contextRotate(context, opts);
|
|
|
+ }
|
|
|
+ opts.chartData.pieData = drawPieDataPoints(series, opts, config, context, process);
|
|
|
+ drawLegend(opts.series, opts, config, context, opts.chartData);
|
|
|
+ drawToolTipBridge(opts, config, context, process);
|
|
|
+ drawCanvas(opts, context);
|
|
|
+ },
|
|
|
+ onAnimationFinish: function() {
|
|
|
+ _this.uevent.trigger('renderComplete');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ break;
|
|
|
+```
|
|
|
+
|
|
|
+**地图类型 (无需动画):**
|
|
|
+
|
|
|
+```typescript
|
|
|
+case 'map':
|
|
|
+ context.clearRect(0, 0, opts.width, opts.height);
|
|
|
+ drawMapDataPoints(series, opts, config, context);
|
|
|
+ setTimeout(() => {
|
|
|
+ _this.uevent.trigger('renderComplete');
|
|
|
+ }, 50);
|
|
|
+ break;
|
|
|
+```
|
|
|
+
|
|
|
+**需要导入的绘制函数和数据点计算函数:**
|
|
|
+
|
|
|
+```typescript
|
|
|
+// 数据点计算函数 (从 charts-data 模块)
|
|
|
+import {
|
|
|
+ getColumnDataPoints,
|
|
|
+ getLineDataPoints,
|
|
|
+ getAreaDataPoints,
|
|
|
+ getMountDataPoints,
|
|
|
+ getBarDataPoints,
|
|
|
+ getScatterDataPoints,
|
|
|
+ getBubbleDataPoints,
|
|
|
+ getMixDataPoints,
|
|
|
+ getCandleDataPoints,
|
|
|
+ getPieDataPoints,
|
|
|
+ getRoseDataPoints,
|
|
|
+ getRadarDataPoints,
|
|
|
+ getGaugeDataPoints,
|
|
|
+ getArcbarDataPoints,
|
|
|
+ getFunnelDataPoints,
|
|
|
+ getWordCloudDataPoints,
|
|
|
+ getMapDataPoints
|
|
|
+} from '../charts-data/index';
|
|
|
+
|
|
|
+// 绘制函数 (从 renderers 模块)
|
|
|
+// 已在文件顶部导入,需要确保所有需要的函数都已导入
|
|
|
+```
|
|
|
+
|
|
|
+**重要类型定义:**
|
|
|
+
|
|
|
+```typescript
|
|
|
+export interface DrawChartsContext {
|
|
|
+ animationInstance?: Animation;
|
|
|
+ uevent: {
|
|
|
+ trigger(event: string): void;
|
|
|
+ };
|
|
|
+ scrollOption: {
|
|
|
+ currentOffset: number;
|
|
|
+ startTouchX: number;
|
|
|
+ distance: number;
|
|
|
+ lastMoveTime: number;
|
|
|
+ };
|
|
|
+}
|
|
|
+
|
|
|
+export type DrawChartsFunction = (
|
|
|
+ this: DrawChartsContext,
|
|
|
+ type: string,
|
|
|
+ opts: ChartOptions,
|
|
|
+ config: UChartsConfig,
|
|
|
+ context: CanvasContext
|
|
|
+) => void;
|
|
|
+```
|
|
|
+
|
|
|
+### 架构文档参考
|
|
|
+
|
|
|
+**编码标准 (来自 docs/architecture/coding-standards.md):**
|
|
|
+- TypeScript 严格模式:必须启用严格类型检查
|
|
|
+- 文件命名:kebab-case (如: `draw-charts.ts`)
|
|
|
+- 函数命名:camelCase (如: `drawColumnDataPoints`)
|
|
|
+- 类名:PascalCase (如: `Animation`)
|
|
|
+- 接口:PascalCase,无I前缀 (如: `DrawChartsContext`)
|
|
|
+- 代码注释:关键逻辑必须添加注释说明
|
|
|
+- JSDoc:公共API必须包含JSDoc注释
|
|
|
+
|
|
|
+**搬迁原则:**
|
|
|
+- **搬迁而非重构**:保持代码逻辑完全不变,只改变文件组织方式
|
|
|
+- 只在搬迁过程中添加 TypeScript 类型注解
|
|
|
+- 不修改代码的实现逻辑
|
|
|
+- 确保搬迁后功能完整性
|
|
|
+
|
|
|
+**测试策略:**
|
|
|
+- 使用 pnpm typecheck 验证类型正确性
|
|
|
+- 使用 pnpm build 验证构建成功
|
|
|
+- 在实际项目(yongren-statistics-ui)中测试图表渲染
|
|
|
+- 验证动画、tooltip、交互功能正常
|
|
|
+
|
|
|
+### 已知问题和注意事项
|
|
|
+
|
|
|
+1. **this 上下文绑定问题**:
|
|
|
+ - 原始代码使用 `this.animationInstance`,搬迁后需要使用 `_this.animationInstance`
|
|
|
+ - 原始代码使用 `this.uevent`,搬迁后需要使用 `_this.uevent`
|
|
|
+ - 原始代码使用 `this.scrollOption`,搬迁后需要使用 `_this.scrollOption`
|
|
|
+
|
|
|
+2. **Animation 类参数名称**:
|
|
|
+ - 原始代码使用 `onProcess` 和 `onAnimationFinish`
|
|
|
+ - 需要检查 `animation.ts` 中的实际参数名称(可能是 `onProgress` 和 `onComplete`)
|
|
|
+
|
|
|
+3. **图表类型和绘制函数映射**:
|
|
|
+ - column: drawColumnDataPoints
|
|
|
+ - line: drawLineDataPoints
|
|
|
+ - area: drawAreaDataPoints
|
|
|
+ - mount: drawMountDataPoints
|
|
|
+ - bar: drawBarDataPoints (注意:bar 图使用 yAxisPoints 而不是 xAxisPoints)
|
|
|
+ - scatter: drawScatterDataPoints
|
|
|
+ - bubble: drawBubbleDataPoints
|
|
|
+ - mix: drawMixDataPoints
|
|
|
+ - candle: drawCandleDataPoints (需要传递 series 和 seriesMA)
|
|
|
+ - pie: drawPieDataPoints
|
|
|
+ - ring: drawPieDataPoints (与 pie 共享)
|
|
|
+ - rose: drawRoseDataPoints
|
|
|
+ - radar: drawRadarDataPoints
|
|
|
+ - arcbar: drawArcbarDataPoints
|
|
|
+ - gauge: drawGaugeDataPoints (需要传递 categories, series)
|
|
|
+ - funnel: drawFunnelDataPoints
|
|
|
+ - word: drawWordCloudDataPoints
|
|
|
+ - map: drawMapDataPoints
|
|
|
+
|
|
|
+4. **特殊图表类型的处理**:
|
|
|
+ - map 类型:不需要动画,直接绘制后触发 renderComplete
|
|
|
+ - bar 类型:使用 yAxisPoints 而不是 xAxisPoints
|
|
|
+ - candle 类型:需要传递 series 和 seriesMA 两个参数
|
|
|
+ - gauge 类型:需要传递 categories 和 series
|
|
|
+ - mix 类型:可能是多种图表类型的组合
|
|
|
+
|
|
|
+5. **坐标轴绘制条件**:
|
|
|
+ - 以下图表类型需要绘制坐标轴:line, column, mount, area, mix, candle, scatter, bubble, bar
|
|
|
+ - 以下图表类型不需要绘制坐标轴:pie, ring, rose, radar, gauge, arcbar, funnel, word, map
|
|
|
+
|
|
|
+6. **图例绘制条件**:
|
|
|
+ - 大多数图表类型都绘制图例:opts.series
|
|
|
+ - funnel 类型使用 opts.series(而不是 opts.chartData.legendData)
|
|
|
+
|
|
|
+### 项目结构说明
|
|
|
+
|
|
|
+**mini-charts 包结构:**
|
|
|
+```
|
|
|
+mini-ui-packages/mini-charts/
|
|
|
+├── src/
|
|
|
+│ ├── lib/
|
|
|
+│ │ ├── draw-controllers/ # 绘制控制器模块
|
|
|
+│ │ │ ├── draw-charts.ts # [目标文件] 主绘制调度函数
|
|
|
+│ │ │ ├── draw-canvas.ts # Canvas绘制函数
|
|
|
+│ │ │ ├── animation.ts # 动画类
|
|
|
+│ │ │ └── index.ts
|
|
|
+│ │ ├── renderers/ # 绘制函数模块
|
|
|
+│ │ │ ├── axis-renderer.ts # 坐标轴绘制
|
|
|
+│ │ │ ├── column-renderer.ts # 柱状图绘制
|
|
|
+│ │ │ ├── line-renderer.ts # 折线图绘制
|
|
|
+│ │ │ ├── pie-renderer.ts # 饼图类绘制
|
|
|
+│ │ │ └── index.ts
|
|
|
+│ │ ├── charts-data/ # 数据点计算模块
|
|
|
+│ │ │ ├── basic-charts.ts # 基础图表数据点
|
|
|
+│ │ │ ├── pie-charts.ts # 饼图类数据点
|
|
|
+│ │ │ └── index.ts
|
|
|
+│ │ ├── data-processing/ # 数据处理模块
|
|
|
+│ │ ├── helper-functions/ # 辅助函数模块
|
|
|
+│ │ └── config.ts # 配置
|
|
|
+│ └── index.ts
|
|
|
+├── components/ # React 组件
|
|
|
+│ ├── BaseChart.tsx
|
|
|
+│ ├── ColumnChart.tsx
|
|
|
+│ └── ...
|
|
|
+└── package.json
|
|
|
+```
|
|
|
+
|
|
|
+### 开发命令
|
|
|
+
|
|
|
+```bash
|
|
|
+# 进入 mini-charts 包目录
|
|
|
+cd mini-ui-packages/mini-charts
|
|
|
+
|
|
|
+# 类型检查
|
|
|
+pnpm typecheck
|
|
|
+
|
|
|
+# 构建
|
|
|
+pnpm build
|
|
|
+
|
|
|
+# 在 yongren-statistics-ui 中测试
|
|
|
+cd ../yongren-statistics-ui
|
|
|
+pnpm dev
|
|
|
+```
|
|
|
+
|
|
|
+## Testing
|
|
|
+
|
|
|
+### 测试标准
|
|
|
+
|
|
|
+根据编码标准文档,本故事需要遵循以下测试要求:
|
|
|
+
|
|
|
+1. **类型检查测试**:
|
|
|
+ - 必须运行 `pnpm typecheck` 确保无类型错误
|
|
|
+ - 所有类型注解必须正确
|
|
|
+ - 不能使用 `any` 类型(除非必要)
|
|
|
+
|
|
|
+2. **构建测试**:
|
|
|
+ - 必须运行 `pnpm build` 确保构建成功
|
|
|
+ - 生成的 .d.ts 文件必须正确导出类型
|
|
|
+
|
|
|
+3. **功能测试**:
|
|
|
+ - 在 `yongren-statistics-ui` 中测试 ColumnChart 组件
|
|
|
+ - 验证图表能够正常显示(不再空白)
|
|
|
+ - 测试动画功能是否正常
|
|
|
+ - 测试 tooltip 功能是否正常
|
|
|
+ - 测试图例点击交互是否正常
|
|
|
+
|
|
|
+4. **兼容性测试**:
|
|
|
+ - 测试其他图表类型(LineChart、PieChart等)
|
|
|
+ - 验证所有图表类型都能正常渲染
|
|
|
+
|
|
|
+### 测试文件位置
|
|
|
+
|
|
|
+- 类型检查:`mini-ui-packages/mini-charts/tsconfig.json`
|
|
|
+- 构建脚本:`mini-ui-packages/mini-charts/package.json`
|
|
|
+- 测试项目:`mini-ui-packages/yongren-statistics-ui/`
|
|
|
+
|
|
|
+## Change Log
|
|
|
+
|
|
|
+| Date | Version | Description | Author |
|
|
|
+|------|---------|-------------|--------|
|
|
|
+| 2025-12-28 | 1.0 | 创建故事文档 | Bob (Scrum Master) |
|
|
|
+
|
|
|
+## Dev Agent Record
|
|
|
+
|
|
|
+### Agent Model Used
|
|
|
+
|
|
|
+_待开发时填写_
|
|
|
+
|
|
|
+### Debug Log References
|
|
|
+
|
|
|
+_待开发时填写_
|
|
|
+
|
|
|
+### Completion Notes List
|
|
|
+
|
|
|
+_待开发时填写_
|
|
|
+
|
|
|
+### File List
|
|
|
+
|
|
|
+_待开发时填写_
|
|
|
+
|
|
|
+## QA Results
|
|
|
+
|
|
|
+_QA Agent 将在此处填写测试结果_
|