feat(story): 创建故事016.005 - 搬迁绘制函数到独立模块并添加类型定义

- 创建完整的 renderers 模块结构（9个文件）
- 分析并记录41个绘制函数的位置和功能
- 提供所有绘制函数的 TypeScript 类型定义示例
- 状态设置为 Approved
- 包含完整的验收标准和任务分解

🤖 Generated with [Claude Code](https://claude.com/claude-code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>

docs/stories/016.005.story.md

@@ -0,0 +1,802 @@
+# <!-- Powered by BMAD™ Core -->
+
+# Story 016.005: 搬迁绘制函数到独立模块并添加类型定义
+
+## Status
+
+Approved
+
+## Story
+
+**作为** 图表库开发者，
+**我想要** 将 u-charts 核心库中的所有绘制相关函数**搬迁**到独立模块并添加 TypeScript 类型定义，
+**以便** 提高代码的可维护性、可测试性和类型安全性，为后续 React 组件封装打下基础。
+
+## Acceptance Criteria
+
+1. `renderers/` 目录下所有文件创建完成
+2. 所有绘制函数都有完整类型注解
+3. 类型检查通过（pnpm typecheck），无 any 类型（除非必要）
+4. 每个文件控制在 500 行以内
+5. 代码逻辑与原始 u-charts.ts 完全一致
+
+## Tasks / Subtasks
+
+- [ ] Task 1: 分析绘制函数 (AC: 1, 2, 5)
+  - [ ] 1.1 识别通用绘制函数（drawPointShape、drawToolTip、drawLegend等）
+  - [ ] 1.2 识别坐标轴绘制函数（drawXAxis、drawYAxis等）
+  - [ ] 1.3 识别柱状图绘制函数（drawColumnDataPoints、drawMountDataPoints等）
+  - [ ] 1.4 识别折线图/面积图绘制函数（drawLineDataPoints、drawAreaDataPoints等）
+  - [ ] 1.5 识别K线图绘制函数（drawCandleDataPoints等）
+  - [ ] 1.6 识别饼图绘制函数（drawPieDataPoints、drawRoseDataPoints等）
+  - [ ] 1.7 识别雷达图绘制函数（drawRadarDataPoints等）
+  - [ ] 1.8 识别地图绘制函数（drawMapDataPoints等）
+  - [ ] 1.9 识别特殊图表绘制函数（drawWordCloudDataPoints、drawFunnelDataPoints等）
+
+- [ ] Task 2: 创建 renderers 模块目录结构 (AC: 1)
+  - [ ] 2.1 创建 `src/lib/renderers/` 目录
+  - [ ] 2.2 创建 `common-renderer.ts` 文件
+  - [ ] 2.3 创建 `axis-renderer.ts` 文件
+  - [ ] 2.4 创建 `column-renderer.ts` 文件
+  - [ ] 2.5 创建 `line-renderer.ts` 文件
+  - [ ] 2.6 创建 `candle-renderer.ts` 文件
+  - [ ] 2.7 创建 `pie-renderer.ts` 文件
+  - [ ] 2.8 创建 `radar-renderer.ts` 文件
+  - [ ] 2.9 创建 `map-renderer.ts` 文件
+  - [ ] 2.10 创建 `special-renderer.ts` 文件
+  - [ ] 2.11 创建 `index.ts` 统一导出文件
+
+- [ ] Task 3: **搬迁**通用绘制函数并添加类型注解 (AC: 2, 3, 4, 5)
+  - [ ] 3.1 将 drawPointShape 函数**搬迁**到 common-renderer.ts
+  - [ ] 3.2 将 drawActivePoint 函数**搬迁**到 common-renderer.ts
+  - [ ] 3.3 将 drawPointText 函数**搬迁**到 common-renderer.ts
+  - [ ] 3.4 将 drawRingTitle 函数**搬迁**到 common-renderer.ts
+  - [ ] 3.5 将 drawToolTipSplitLine 函数**搬迁**到 common-renderer.ts
+  - [ ] 3.6 将 drawMarkLine 函数**搬迁**到 common-renderer.ts
+  - [ ] 3.7 将 drawToolTipHorizentalLine 函数**搬迁**到 common-renderer.ts
+  - [ ] 3.8 将 drawToolTipSplitArea 函数**搬迁**到 common-renderer.ts
+  - [ ] 3.9 将 drawBarToolTipSplitArea 函数**搬迁**到 common-renderer.ts
+  - [ ] 3.10 将 drawToolTip 函数**搬迁**到 common-renderer.ts
+  - [ ] 3.11 将 drawToolTipBridge 函数**搬迁**到 common-renderer.ts
+  - [ ] 3.12 将 drawCanvas 函数**搬迁**到 common-renderer.ts
+  - [ ] 3.13 为所有通用绘制函数添加完整的 TypeScript 类型注解
+
+- [ ] Task 4: **搬迁**坐标轴绘制函数并添加类型注解 (AC: 2, 3, 4, 5)
+  - [ ] 4.1 将 drawXAxis 函数**搬迁**到 axis-renderer.ts
+  - [ ] 4.2 将 drawYAxisGrid 函数**搬迁**到 axis-renderer.ts
+  - [ ] 4.3 将 drawYAxis 函数**搬迁**到 axis-renderer.ts
+  - [ ] 4.4 将 drawLegend 函数**搬迁**到 axis-renderer.ts
+  - [ ] 4.5 为所有坐标轴绘制函数添加完整的 TypeScript 类型注解
+
+- [ ] Task 5: **搬迁**柱状图绘制函数并添加类型注解 (AC: 2, 3, 4, 5)
+  - [ ] 5.1 将 drawColumnDataPoints 函数**搬迁**到 column-renderer.ts
+  - [ ] 5.2 将 drawColumePointText 函数**搬迁**到 column-renderer.ts
+  - [ ] 5.3 将 drawMountDataPoints 函数**搬迁**到 column-renderer.ts
+  - [ ] 5.4 将 drawMountPointText 函数**搬迁**到 column-renderer.ts
+  - [ ] 5.5 将 drawBarDataPoints 函数**搬迁**到 column-renderer.ts
+  - [ ] 5.6 将 drawBarPointText 函数**搬迁**到 column-renderer.ts
+  - [ ] 5.7 为所有柱状图绘制函数添加完整的 TypeScript 类型注解
+
+- [ ] Task 6: **搬迁**折线图绘制函数并添加类型注解 (AC: 2, 3, 4, 5)
+  - [ ] 6.1 将 drawLineDataPoints 函数**搬迁**到 line-renderer.ts
+  - [ ] 6.2 将 drawAreaDataPoints 函数**搬迁**到 line-renderer.ts
+  - [ ] 6.3 为所有折线图绘制函数添加完整的 TypeScript 类型注解
+
+- [ ] Task 7: **搬迁**K线图绘制函数并添加类型注解 (AC: 2, 3, 4, 5)
+  - [ ] 7.1 将 drawCandleDataPoints 函数**搬迁**到 candle-renderer.ts
+  - [ ] 7.2 为K线图绘制函数添加完整的 TypeScript 类型注解
+
+- [ ] Task 8: **搬迁**饼图绘制函数并添加类型注解 (AC: 2, 3, 4, 5)
+  - [ ] 8.1 将 drawPieDataPoints 函数**搬迁**到 pie-renderer.ts
+  - [ ] 8.2 将 drawPieText 函数**搬迁**到 pie-renderer.ts
+  - [ ] 8.3 将 drawRoseDataPoints 函数**搬迁**到 pie-renderer.ts
+  - [ ] 8.4 将 drawArcbarDataPoints 函数**搬迁**到 pie-renderer.ts
+  - [ ] 8.5 将 drawGaugeDataPoints 函数**搬迁**到 pie-renderer.ts
+  - [ ] 8.6 将 drawGaugeLabel 函数**搬迁**到 pie-renderer.ts
+  - [ ] 8.7 为所有饼图绘制函数添加完整的 TypeScript 类型注解
+
+- [ ] Task 9: **搬迁**雷达图绘制函数并添加类型注解 (AC: 2, 3, 4, 5)
+  - [ ] 9.1 将 drawRadarDataPoints 函数**搬迁**到 radar-renderer.ts
+  - [ ] 9.2 将 drawRadarLabel 函数**搬迁**到 radar-renderer.ts
+  - [ ] 9.3 为所有雷达图绘制函数添加完整的 TypeScript 类型注解
+
+- [ ] Task 10: **搬迁**地图绘制函数并添加类型注解 (AC: 2, 3, 4, 5)
+  - [ ] 10.1 将 drawMapDataPoints 函数**搬迁**到 map-renderer.ts
+  - [ ] 10.2 为地图绘制函数添加完整的 TypeScript 类型注解
+
+- [ ] Task 11: **搬迁**特殊图表绘制函数并添加类型注解 (AC: 2, 3, 4, 5)
+  - [ ] 11.1 将 drawScatterDataPoints 函数**搬迁**到 special-renderer.ts
+  - [ ] 11.2 将 drawBubbleDataPoints 函数**搬迁**到 special-renderer.ts
+  - [ ] 11.3 将 drawMixDataPoints 函数**搬迁**到 special-renderer.ts
+  - [ ] 11.4 将 drawWordCloudDataPoints 函数**搬迁**到 special-renderer.ts
+  - [ ] 11.5 将 drawFunnelDataPoints 函数**搬迁**到 special-renderer.ts
+  - [ ] 11.6 将 drawFunnelText 函数**搬迁**到 special-renderer.ts
+  - [ ] 11.7 将 drawFunnelCenterText 函数**搬迁**到 special-renderer.ts
+  - [ ] 11.8 为所有特殊图表绘制函数添加完整的 TypeScript 类型注解
+
+- [ ] Task 12: 更新导出和验证搬迁结果 (AC: 1, 2, 3, 5)
+  - [ ] 12.1 更新 `src/lib/renderers/index.ts` 统一导出所有绘制函数
+  - [ ] 12.2 更新 `src/index.ts` 导出新模块
+  - [ ] 12.3 运行类型检查验证所有类型注解正确
+  - [ ] 12.4 确保所有绘制函数正确导出
+  - [ ] 12.5 确认代码逻辑与原始文件完全一致
+  - [ ] 12.6 验证每个文件控制在 500 行以内
+
+## Dev Notes
+
+### 前置故事见解
+
+**故事 016.001 完成状态**:
+- ✅ 已创建 `mini-charts` 包基础结构
+- ✅ 已迁移 u-charts 核心库到 `src/lib/u-charts.ts`（7680行代码）
+- ✅ 包可以成功构建和类型检查通过
+- ⚠️ 使用 `@ts-nocheck` 绕过原始库中的类型问题
+
+**故事 016.002 完成状态**:
+- ✅ 已创建 `config.ts` 和 `utils/` 目录及所有子模块文件
+- ✅ 所有文件行数均在 500 行以内（最大 201 行 misc.ts）
+- ✅ 类型检查通过（pnpm typecheck）
+- ✅ 为 Canvas 上下文使用 `any` 类型以兼容小程序环境
+
+**故事 016.003 完成状态**:
+- ✅ 已创建 `data-processing/` 目录及所有子文件
+- ✅ 成功搬迁了14个数据处理函数到4个独立文件
+- ✅ 所有函数都添加了完整的 TypeScript 类型注解
+- ✅ 类型检查通过（pnpm typecheck）
+- ✅ 构建成功，所有文件正确生成到 dist 目录
+- ⚠️ 最大文件为 axis-calculator.ts (595行)，略有超出500行限制但可接受
+
+**故事 016.004 完成状态**:
+- ✅ 已创建 `charts-data/` 目录及所有子文件
+- ✅ 成功搬迁了所有图表数据点计算函数
+- ✅ 所有函数都添加了完整的 TypeScript 类型注解
+- ✅ 类型检查通过（pnpm typecheck）
+- ✅ 构建成功，所有文件正确生成到 dist 目录
+- ⚠️ 最大文件为 basic-charts.ts (598行)，略超500行限制但可接受
+
+**关键技术决策**:
+- 保持代码逻辑完全不变，只改变文件组织方式
+- 只在搬迁过程中添加 TypeScript 类型注解，不修改代码的实现逻辑
+- 为复杂参数和返回值定义 TypeScript 接口
+- 使用 ES6 `export` 语法导出函数和类型
+
+**迁移策略**: 保持 u-charts 核心绘制逻辑不变，渐进式模块化并添加类型定义
+
+### 技术栈要求
+
+**来源**: [tech-stack.md](../../architecture/tech-stack.md)
+
+- **TypeScript**: 5.4.5 [来源: tech-stack.md]
+- **React**: 18.0.0（mini 包使用 React 18，不是 React 19）[来源: 故事 016.001 Dev Notes]
+- **Taro**: 4.1.4 [来源: tech-stack.md]
+- **Node.js**: 20.18.3（运行时环境）[来源: tech-stack.md]
+- **包管理器**: pnpm workspace [来源: source-tree.md]
+
+### 项目结构指南
+
+**来源**: [source-tree.md](../../architecture/source-tree.md)
+
+```
+mini-ui-packages/
+└── mini-charts/              # mini-charts 包
+    ├── src/
+    │   ├── index.ts          # 主入口文件
+    │   └── lib/
+    │       ├── u-charts.ts   # u-charts 核心库（7680行）
+    │       ├── config.ts     # [已完成] 配置对象
+    │       ├── utils/        # [已完成] 工具函数目录
+    │       ├── data-processing/  # [已完成] 数据处理模块
+    │       ├── charts-data/  # [已完成] 图表数据点计算模块
+    │       └── renderers/    # [新增] 绘制函数模块
+    │           ├── index.ts  # 绘制函数模块统一导出
+    │           ├── common-renderer.ts  # 通用绘制函数
+    │           ├── axis-renderer.ts  # 坐标轴和图例绘制
+    │           ├── column-renderer.ts  # 柱状图绘制
+    │           ├── line-renderer.ts  # 折线图绘制
+    │           ├── candle-renderer.ts  # K线图绘制
+    │           ├── pie-renderer.ts  # 饼图绘制
+    │           ├── radar-renderer.ts  # 雷达图绘制
+    │           ├── map-renderer.ts  # 地图绘制
+    │           └── special-renderer.ts  # 特殊图表绘制
+    ├── tests/
+    │   └── u-charts.test.ts
+    ├── package.json
+    ├── tsconfig.json
+    └── jest.config.cjs
+```
+
+### TypeScript 配置规范
+
+**来源**: [ui-package-standards.md](../../architecture/ui-package-standards.md#typescript配置)
+
+```json
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "DOM.Iterable", "ES2020"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
+```
+
+**本故事重要**: 需要为所有函数添加完整的类型注解，确保 `strict: true` 模式下无类型错误。
+
+### u-charts 绘制函数分析
+
+**来源**: [mini-charts/src/lib/u-charts.ts](../../mini-ui-packages/mini-charts/src/lib/u-charts.ts)
+
+#### 通用绘制函数（common-renderer.ts）
+
+| 函数名 | 行号范围 | 功能描述 |
+|--------|----------|----------|
+| drawPointShape | 2100-2150 | 绘制数据点形状（圆形、方形、三角形、菱形等） |
+| drawActivePoint | 2152-2210 | 绘制激活状态的数据点（用于tooltip高亮） |
+| drawPointText | 2251-2278 | 绘制数据点的文本标签 |
+| drawRingTitle | 2211-2250 | 绘制环形图表标题 |
+| drawToolTipSplitLine | 2580-2618 | 绘制tooltip分割线 |
+| drawMarkLine | 2619-2680 | 绘制标记线（参考线） |
+| drawToolTipHorizentalLine | 2681-2740 | 绘制tooltip水平线 |
+| drawToolTipSplitArea | 2741-2757 | 绘制tooltip分割区域 |
+| drawBarToolTipSplitArea | 2758-2773 | 绘制柱状图tooltip分割区域 |
+| drawToolTip | 2774-2840 | 绘制tooltip内容 |
+| drawToolTipBridge | 4417-4432 | tooltip绘制桥接函数 |
+| drawCanvas | 6275-6280 | 执行最终画布绘制 |
+
+#### 坐标轴和图例绘制函数（axis-renderer.ts）
+
+| 函数名 | 行号范围 | 功能描述 |
+|--------|----------|----------|
+| drawXAxis | 4433-4707 | 绘制X轴（横轴） |
+| drawYAxisGrid | 4630-4671 | 绘制Y轴网格线 |
+| drawYAxis | 4672-4839 | 绘制Y轴（纵轴） |
+| drawLegend | 4840-4961 | 绘制图例 |
+
+#### 柱状图绘制函数（column-renderer.ts）
+
+| 函数名 | 行号范围 | 功能描述 |
+|--------|----------|----------|
+| drawColumnDataPoints | 2948-3178 | 绘制柱状图数据点 |
+| drawColumePointText | 2279-2341 | 绘制柱状图数据点文本 |
+| drawMountDataPoints | 3179-3396 | 绘制堆叠柱状图数据点 |
+| drawMountPointText | 2342-2367 | 绘制堆叠柱状图数据点文本 |
+| drawBarDataPoints | 3407-3558 | 绘制条形图数据点 |
+| drawBarPointText | 2368-2390 | 绘制条形图数据点文本 |
+
+#### 折线图绘制函数（line-renderer.ts）
+
+| 函数名 | 行号范围 | 功能描述 |
+|--------|----------|----------|
+| drawLineDataPoints | 4025-4156 | 绘制折线图数据点 |
+| drawAreaDataPoints | 3693-4024 | 绘制面积图数据点 |
+
+#### K线图绘制函数（candle-renderer.ts）
+
+| 函数名 | 行号范围 | 功能描述 |
+|--------|----------|----------|
+| drawCandleDataPoints | 3559-3692 | 绘制K线图数据点 |
+
+#### 饼图绘制函数（pie-renderer.ts）
+
+| 函数名 | 行号范围 | 功能描述 |
+|--------|----------|----------|
+| drawPieDataPoints | 4962-5057 | 绘制饼图数据点 |
+| drawPieText | 2468-2579 | 绘制饼图文本标签 |
+| drawRoseDataPoints | 5058-5137 | 绘制玫瑰图数据点 |
+| drawArcbarDataPoints | 5138-5211 | 绘制圆弧条形图数据点 |
+| drawGaugeDataPoints | 5210-5419 | 绘制仪表盘数据点 |
+| drawGaugeLabel | 2391-2428 | 绘制仪表盘标签 |
+
+#### 雷达图绘制函数（radar-renderer.ts）
+
+| 函数名 | 行号范围 | 功能描述 |
+|--------|----------|----------|
+| drawRadarDataPoints | 5420-5712 | 绘制雷达图数据点 |
+| drawRadarLabel | 2429-2467 | 绘制雷达图标签 |
+
+#### 地图绘制函数（map-renderer.ts）
+
+| 函数名 | 行号范围 | 功能描述 |
+|--------|----------|----------|
+| drawMapDataPoints | 5713-5921 | 绘制地图数据点 |
+
+#### 特殊图表绘制函数（special-renderer.ts）
+
+| 函数名 | 行号范围 | 功能描述 |
+|--------|----------|----------|
+| drawScatterDataPoints | 3880-3966 | 绘制散点图数据点 |
+| drawBubbleDataPoints | 3967-4024 | 绘制气泡图数据点 |
+| drawMixDataPoints | 4157-4416 | 绘制混合图表数据点 |
+| drawWordCloudDataPoints | 5922-6011 | 绘制词云数据点 |
+| drawFunnelDataPoints | 5980-6183 | 绘制漏斗图数据点 |
+| drawFunnelText | 6184-6255 | 绘制漏斗图文本 |
+| drawFunnelCenterText | 6256-6274 | 绘制漏斗图中心文本 |
+
+### 类型定义规范
+
+**来源**: [ui-package-standards.md](../../architecture/ui-package-standards.md#类型定义规范)
+
+**本故事重要**: 必须为所有函数添加完整的类型注解，避免使用 `any` 类型（除非必要）。
+
+**类型定义示例**:
+
+```typescript
+// common-renderer.ts 类型定义示例
+export interface CanvasContext {
+  // Canvas 2D 上下文类型（使用 any 以兼容小程序环境）
+  [key: string]: any;
+}
+
+export interface PointShape {
+  x: number;
+  y: number;
+  color?: string;
+  shape?: 'circle' | 'square' | 'triangle' | 'diamond';
+}
+
+export interface ToolTipOption {
+  textList?: string[];
+  offset?: number;
+  x?: number;
+  y?: number;
+  width?: number;
+  [key: string]: any;
+}
+
+export function drawPointShape(
+  context: CanvasContext,
+  points: PointShape[],
+  shape: string,
+  color?: string
+): void {
+  // 实现逻辑
+}
+
+export function drawActivePoint(
+  context: CanvasContext,
+  points: PointShape[],
+  color: string,
+  shape?: string
+): void {
+  // 实现逻辑
+}
+
+export function drawToolTip(
+  context: CanvasContext,
+  option: ToolTipOption,
+  config: UChartsConfig,
+  opts: ChartOptions
+): void {
+  // 实现逻辑
+}
+```
+
+```typescript
+// axis-renderer.ts 类型定义示例
+export interface AxisData {
+  categories?: string[];
+  ranges?: number[][];
+  [key: string]: any;
+}
+
+export interface AxisOption {
+  type?: string;
+  format?: string;
+  disableGrid?: boolean;
+  gridType?: string;
+  dashLength?: number;
+  boundaryGap?: string;
+  axisLabel?: {
+    rotate?: number;
+    fontSize?: number;
+    [key: string]: any;
+  };
+  [key: string]: any;
+}
+
+export function drawXAxis(
+  context: CanvasContext,
+  opts: ChartOptions,
+  config: UChartsConfig,
+  xAxisPoints: number[],
+  eachSpacing: number
+): void {
+  // 实现逻辑
+}
+
+export function drawYAxis(
+  context: CanvasContext,
+  opts: ChartOptions,
+  config: UChartsConfig,
+  yAxisPoints: number[],
+  eachSpacing: number
+): void {
+  // 实现逻辑
+}
+
+export function drawLegend(
+  context: CanvasContext,
+  opts: ChartOptions,
+  config: UChartsConfig,
+  offset: { x: number; y: number }
+): void {
+  // 实现逻辑
+}
+```
+
+```typescript
+// column-renderer.ts 类型定义示例
+export interface ColumnDataPoint {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  color?: string;
+  value?: number;
+}
+
+export function drawColumnDataPoints(
+  context: CanvasContext,
+  dataPoints: ColumnDataPoint[],
+  opts: ChartOptions,
+  config: UChartsConfig
+): void {
+  // 实现逻辑
+}
+
+export function drawMountDataPoints(
+  context: CanvasContext,
+  dataPoints: ColumnDataPoint[][],
+  opts: ChartOptions,
+  config: UChartsConfig
+): void {
+  // 实现逻辑
+}
+```
+
+```typescript
+// line-renderer.ts 类型定义示例
+export interface LineDataPoint {
+  x: number;
+  y: number;
+  color?: string;
+  value?: number;
+}
+
+export interface LineOption {
+  width?: number;
+  type?: string;
+  smooth?: boolean;
+  smoothLimit?: number;
+  [key: string]: any;
+}
+
+export function drawLineDataPoints(
+  context: CanvasContext,
+  dataPoints: LineDataPoint[],
+  opts: ChartOptions,
+  config: UChartsConfig,
+  lineOption?: LineOption
+): void {
+  // 实现逻辑
+}
+
+export function drawAreaDataPoints(
+  context: CanvasContext,
+  dataPoints: LineDataPoint[],
+  opts: ChartOptions,
+  config: UChartsConfig,
+  lineOption?: LineOption
+): void {
+  // 实现逻辑
+}
+```
+
+```typescript
+// pie-renderer.ts 类型定义示例
+export interface PieDataItem {
+  x: number;
+  y: number;
+  radius: number;
+  startAngle: number;
+  endAngle: number;
+  color?: string;
+  value?: number;
+  text?: string;
+}
+
+export function drawPieDataPoints(
+  context: CanvasContext,
+  series: PieDataItem[],
+  opts: ChartOptions,
+  config: UChartsConfig
+): void {
+  // 实现逻辑
+}
+
+export function drawRoseDataPoints(
+  context: CanvasContext,
+  series: PieDataItem[],
+  opts: ChartOptions,
+  config: UChartsConfig
+): void {
+  // 实现逻辑
+}
+
+export function drawGaugeDataPoints(
+  context: CanvasContext,
+  series: PieDataItem[],
+  opts: ChartOptions,
+  config: UChartsConfig
+): void {
+  // 实现逻辑
+}
+```
+
+```typescript
+// radar-renderer.ts 类型定义示例
+export interface RadarDataPoint {
+  x: number;
+  y: number;
+  value: number;
+  color?: string;
+}
+
+export function drawRadarDataPoints(
+  context: CanvasContext,
+  series: { data: RadarDataPoint[]; color?: string }[],
+  opts: ChartOptions,
+  config: UChartsConfig
+): void {
+  // 实现逻辑
+}
+```
+
+```typescript
+// special-renderer.ts 类型定义示例
+export interface ScatterDataPoint {
+  x: number;
+  y: number;
+  value?: number;
+  color?: string;
+  size?: number;
+}
+
+export function drawScatterDataPoints(
+  context: CanvasContext,
+  dataPoints: ScatterDataPoint[],
+  opts: ChartOptions,
+  config: UChartsConfig
+): void {
+  // 实现逻辑
+}
+
+export function drawBubbleDataPoints(
+  context: CanvasContext,
+  dataPoints: ScatterDataPoint[],
+  opts: ChartOptions,
+  config: UChartsConfig
+): void {
+  // 实现逻辑
+}
+
+export function drawMixDataPoints(
+  context: CanvasContext,
+  dataPoints: any[],
+  opts: ChartOptions,
+  config: UChartsConfig
+): void {
+  // 实现逻辑
+}
+
+export function drawFunnelDataPoints(
+  context: CanvasContext,
+  series: PieDataItem[],
+  opts: ChartOptions,
+  config: UChartsConfig
+): void {
+  // 实现逻辑
+}
+```
+
+### 编码标准
+
+**来源**: [coding-standards.md](../../architecture/coding-standards.md)
+
+- **代码风格**: TypeScript 严格模式，一致的缩进和命名
+- **类型注解**: 必须为所有函数参数和返回值添加类型注解
+- **接口定义**: 为复杂数据结构定义 TypeScript 接口
+- **导出规范**: 使用 ES6 `export` 语法导出函数和类型
+
+### 测试策略
+
+**来源**: [coding-standards.md](../../architecture/coding-standards.md)
+
+**测试框架**: Jest（mini 包使用 Jest，不是 Vitest）
+
+**测试位置**: `tests/` 目录（与源码并列）
+
+**测试类型**:
+- 单元测试: 测试绘制函数的正确性
+- **不要求**集成测试和 E2E 测试（这些在后续故事中）
+
+**测试要求**:
+1. 为每个绘制函数编写基础单元测试
+2. 测试覆盖率目标: 基础测试即可，不要求高覆盖率
+3. Mock 相关依赖（如配置、工具函数等）
+
+**测试命令**:
+```bash
+# 进入包目录
+cd mini-ui-packages/mini-charts
+
+# 运行所有测试
+pnpm test
+
+# 运行特定测试
+pnpm test --testNamePattern "绘制函数测试"
+
+# 类型检查
+pnpm typecheck
+```
+
+### 构建和发布规范
+
+**来源**: [ui-package-standards.md](../../architecture/ui-package-standards.md#构建和发布规范)
+
+mini-charts 包在 PNPM 工作空间中:
+- **开发模式**: 直接使用 TypeScript 源码
+- **构建**: 使用 `tsc` 编译到 `dist/` 目录
+- **类型检查**: 使用 `tsc --noEmit` 验证类型
+- **发布**: 本故事不要求发布，仅验证本地构建成功
+
+**重要**: 本故事完成后，应该可以:
+1. ✅ 运行 `pnpm build` 成功生成 `dist/` 目录
+2. ✅ 运行 `pnpm typecheck` 无类型错误
+3. ✅ 所有新模块正确导出，可以被主入口文件引用
+
+### 开发流程
+
+**来源**: [development-workflow.md](../../architecture/development-workflow.md)
+
+**开发命令**:
+```bash
+# 进入包目录
+cd mini-ui-packages/mini-charts
+
+# 安装依赖（在根目录）
+pnpm install
+
+# 开发模式（监听文件变化）
+pnpm dev
+
+# 类型检查
+pnpm typecheck
+
+# 运行测试
+pnpm test
+
+# 构建
+pnpm build
+```
+
+### 环境配置
+
+**来源**: [CLAUDE.md](../../CLAUDE.md)
+
+- **Node.js**: 20.19.2
+- **包管理器**: pnpm
+- **测试调试**: 使用 `pnpm test --testNamePattern "测试名称"` 运行特定测试
+- **Mini 测试**: 需要 Jest，不是 Vitest
+- **类型检查**: 使用 `pnpm typecheck` 加 grep 来过滤要检查的指定文件
+
+### 文件位置规范
+
+**来源**: [source-tree.md](../../architecture/source-tree.md)
+
+所有新文件应创建在:
+- 绘制函数模块目录: `mini-ui-packages/mini-charts/src/lib/renderers/`
+- 绘制函数文件:
+  - `common-renderer.ts`: 通用绘制函数
+  - `axis-renderer.ts`: 坐标轴和图例绘制
+  - `column-renderer.ts`: 柱状图绘制
+  - `line-renderer.ts`: 折线图绘制
+  - `candle-renderer.ts`: K线图绘制
+  - `pie-renderer.ts`: 饼图绘制
+  - `radar-renderer.ts`: 雷达图绘制
+  - `map-renderer.ts`: 地图绘制
+  - `special-renderer.ts`: 特殊图表绘制
+  - `index.ts`: 绘制函数模块统一导出
+- 主入口: `mini-ui-packages/mini-charts/src/index.ts`（需要更新导出）
+- 测试文件: `mini-ui-packages/mini-charts/tests/`（可选，本故事不强制要求）
+
+### 技术约束
+
+1. **搬迁原则**: 保持代码逻辑完全不变，只改变文件组织方式
+2. **类型注解**: 只在搬迁过程中添加 TypeScript 类型注解，不修改代码的实现逻辑
+3. **文件大小**: 每个文件控制在 500 行以内
+4. **类型安全**: 避免使用 `any` 类型（除非必要）
+5. **向后兼容**: 保持与原始 u-charts.ts 的功能兼容性
+
+### 验证标准
+
+完成本故事后，应该满足:
+1. ✅ `src/lib/renderers/` 目录下所有文件存在
+2. ✅ 所有绘制函数都有完整类型注解
+3. ✅ 运行 `pnpm typecheck` 无类型错误
+4. ✅ 每个文件控制在 500 行以内
+5. ✅ 代码逻辑与原始 u-charts.ts 完全一致
+6. ✅ 所有新模块正确导出，可以被主入口文件引用
+
+### 不包含在本故事中的工作
+
+**来源**: [epic-016 故事列表](../../prd/epic-016-mini-charts-package.md#故事列表)
+
+以下工作**不在**本故事范围内:
+- ❌ 核心类模块化（故事 016.006）
+- ❌ React 组件封装（故事 016.007）
+
+### Testing
+
+**测试框架**: Jest（不是 Vitest）
+
+**测试位置**: `tests/` 目录（与源码并列）
+
+**测试要求**:
+1. 创建基础测试验证绘制函数的正确导入和导出
+2. 测试绘制函数的基本功能（可选，本故事不强制要求）
+3. Mock 相关依赖（如配置、工具函数等）
+4. 测试覆盖率目标: 基础测试即可，不要求高覆盖率
+
+**测试命令**:
+```bash
+# 运行所有测试
+pnpm test
+
+# 运行特定测试
+pnpm test --testNamePattern "绘制函数测试"
+```
+
+**参考**: [coding-standards.md](../../architecture/coding-standards.md)
+
+## Change Log
+
+| Date | Version | Description | Author |
+|------|---------|-------------|--------|
+| 2025-12-24 | 1.0 | 创建故事文档 | Bob (Scrum Master) |
+| 2025-12-24 | 1.1 | 更新状态为 Approved | Bob (Scrum Master) |
+
+## Dev Agent Record
+
+*此部分由开发代理在实施过程中填写*
+
+### Agent Model Used
+
+待填写
+
+### Debug Log References
+
+待填写
+
+### Completion Notes List
+
+待填写
+
+### File List
+
+待填写
+
+## QA Results
+
+*此部分由 QA 代理在审查完成后填写*