|
|
@@ -590,6 +590,125 @@
|
|
|
|
|
|
**完成状态:** ✅ Ready for Review (2025-12-25)
|
|
|
|
|
|
+### 故事016-014:完成 draw-charts.ts 核心绘制逻辑搬迁
|
|
|
+**背景:** 在执行故事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实例,但绘制流程未完成
|
|
|
+
|
|
|
+**任务列表:**
|
|
|
+1. 分析原始 u-charts.js 的完整 drawCharts 函数逻辑:
|
|
|
+ - 定位原始文件中的 switch 语句(约在第6499-6936行)
|
|
|
+ - 理解每种图表类型的绘制流程
|
|
|
+ - 确认数据准备阶段和绘制阶段的分界点
|
|
|
+2. 补充完整的 switch 语句实现:
|
|
|
+ - 为每种图表类型创建 case 分支(column/line/area/mount/scatter/bubble/mix/candle/pie/ring/rose/gauge/arcbar/radar/map/funnel/wordcloud/bar)
|
|
|
+ - 每个 case 调用对应的 getDataPoints 函数计算数据点坐标
|
|
|
+ - 每个 case 调用对应的 draw*DataPoints 函数执行绘制
|
|
|
+ - 处理混合图表(mix)的特殊逻辑
|
|
|
+3. 补充通用绘制元素:
|
|
|
+ - 调用 drawXAxis 绘制X轴
|
|
|
+ - 调用 drawYAxisGrid 绘制Y轴网格
|
|
|
+ - 调用 drawYAxis 绘制Y轴
|
|
|
+ - 调用 drawLegend 绘制图例(如果启用)
|
|
|
+ - 调用 drawMarkLine 绘制标记线(如果有)
|
|
|
+4. 补充动画处理逻辑:
|
|
|
+ - 创建 Animation 实例(如果 opts.animation 为 true)
|
|
|
+ - 处理动画进度的逐步更新
|
|
|
+ - 在动画完成时触发 'renderComplete' 事件
|
|
|
+5. 补充 drawCanvas 调用:
|
|
|
+ - 在所有绘制操作完成后调用 drawCanvas() 触发实际渲染
|
|
|
+ - 确保上下文的 draw() 方法被调用
|
|
|
+6. 验证搬迁结果:
|
|
|
+ - 运行类型检查(pnpm typecheck)确保无类型错误
|
|
|
+ - 运行构建(pnpm build)确保成功
|
|
|
+ - 在 `yongren-statistics-ui` 中测试 ColumnChart 组件
|
|
|
+ - 验证图表能够正常显示
|
|
|
+ - 验证动画、tooltip、图例等功能正常
|
|
|
+
|
|
|
+**验收标准:**
|
|
|
+- [ ] `draw-charts.ts` 文件包含完整的 switch 语句,覆盖所有图表类型
|
|
|
+- [ ] 每种图表类型的 case 分支都正确调用 getDataPoints 和 draw*DataPoints
|
|
|
+- [ ] 坐标轴、图例、网格等通用元素正确绘制
|
|
|
+- [ ] 动画逻辑完整实现
|
|
|
+- [ ] drawCanvas() 调用正确添加,触发实际Canvas渲染
|
|
|
+- [ ] 类型检查通过(pnpm typecheck),无类型错误
|
|
|
+- [ ] 构建成功(pnpm build),生成正确的 .d.ts 文件
|
|
|
+- [ ] ColumnChart 组件在 `yongren-statistics-ui` 中正常显示
|
|
|
+- [ ] 其他图表类型(LineChart、PieChart等)也能正常渲染
|
|
|
+- [ ] 动画、tooltip、交互功能正常工作
|
|
|
+- [ ] 代码逻辑与原始 u-charts.js 完全一致
|
|
|
+
|
|
|
+**技术细节:**
|
|
|
+需要补充的 switch 语句结构(伪代码):
|
|
|
+```typescript
|
|
|
+switch (type) {
|
|
|
+ case 'column':
|
|
|
+ case 'mount':
|
|
|
+ case 'bar':
|
|
|
+ // 1. 计算数据点坐标
|
|
|
+ opts.chartData.columnData = getColumnDataPoints(series, opts, config);
|
|
|
+ // 2. 绘制数据点
|
|
|
+ drawColumnDataPoints(series, opts, config, context);
|
|
|
+ break;
|
|
|
+ case 'line':
|
|
|
+ case 'area':
|
|
|
+ opts.chartData.lineData = getLineDataPoints(...);
|
|
|
+ drawLineDataPoints(...);
|
|
|
+ if (type === 'area') drawAreaDataPoints(...);
|
|
|
+ break;
|
|
|
+ case 'pie':
|
|
|
+ case 'ring':
|
|
|
+ case 'rose':
|
|
|
+ opts.chartData.pieData = getPieDataPoints(...);
|
|
|
+ drawPieDataPoints(...);
|
|
|
+ break;
|
|
|
+ // ... 其他图表类型
|
|
|
+}
|
|
|
+
|
|
|
+// 绘制通用元素
|
|
|
+drawXAxis(opts, config, context);
|
|
|
+drawYAxis(opts, config, context);
|
|
|
+if (opts.legend.show) {
|
|
|
+ drawLegend(opts.chartData.legendData, opts, config, context);
|
|
|
+}
|
|
|
+
|
|
|
+// 动画处理
|
|
|
+if (opts.animation && duration > 0) {
|
|
|
+ _this.animationInstance = new Animation({
|
|
|
+ duration,
|
|
|
+ timing: opts.timing || 'easeOut',
|
|
|
+ onProgress: (process) => {
|
|
|
+ chartProcess(process);
|
|
|
+ drawCharts.call(_this, type, opts, config, context);
|
|
|
+ },
|
|
|
+ onComplete: () => {
|
|
|
+ _this.uevent.trigger('renderComplete');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ _this.animationInstance.start();
|
|
|
+} else {
|
|
|
+ chartProcess(1);
|
|
|
+}
|
|
|
+
|
|
|
+// 触发实际渲染
|
|
|
+drawCanvas(opts, context);
|
|
|
+```
|
|
|
+
|
|
|
+**完成状态:** ⏳ Draft (2025-12-28)
|
|
|
+
|
|
|
## 兼容性要求
|
|
|
|
|
|
- [ ] 保持 u-charts 原库功能完整性
|