fix

.doc/chart-grid-lines-issue.md

@@ -0,0 +1,103 @@
+---
+title: Doughnut/Pie 图表显示网格线问题修复
+author: AI Assistant
+date: 2026-02-19
+status: final
+category: 技术修复
+---
+
+# Doughnut/Pie 图表显示网格线问题修复
+
+## 问题描述
+
+在使用 Chart.js 的 Doughnut（环形图）或 Pie（饼图）时，图表中不应该显示笛卡尔坐标系的网格线，但在某些情况下会错误地显示出来。
+
+## 问题根源
+
+`useChartTheme.ts` 中的 `baseChartOptions` 包含了 `scales.x` 和 `scales.y` 配置（第 82-108 行），这些配置适用于折线图、柱状图等**笛卡尔坐标系图表**，但不适用于 Doughnut/Pie 这类**极坐标图表**。
+
+当使用 `getChartOptions()` 合并配置时，这些默认的 `scales` 配置会被带入到圆形图表中，导致显示网格线。
+
+## 修复方案
+
+### 方案 1：在具体组件中显式禁用（已应用）
+
+在使用 Doughnut/Pie 图表的组件中，调用 `getChartOptions()` 时显式传入 `scales` 配置：
+
+```javascript
+const chartOptions = computed(() => {
+  return getChartOptions({
+    cutout: '65%',
+    // 显式禁用笛卡尔坐标系（Doughnut 图表不需要）
+    scales: {
+      x: { display: false },
+      y: { display: false }
+    },
+    plugins: {
+      // ...其他插件配置
+    }
+  })
+})
+```
+
+### 方案 2：BaseChart 组件自动处理（已优化）
+
+优化 `BaseChart.vue` 组件（第 106-128 行），使其能够自动检测圆形图表并强制禁用坐标轴：
+
+```javascript
+const mergedOptions = computed(() => {
+  const isCircularChart = props.type === 'pie' || props.type === 'doughnut'
+
+  const merged = getChartOptions(props.options)
+
+  if (isCircularChart) {
+    if (!props.options?.scales) {
+      // 用户完全没传 scales，直接删除
+      delete merged.scales
+    } else {
+      // 用户传了 scales，确保 display 设置为 false
+      if (merged.scales) {
+        if (merged.scales.x) merged.scales.x.display = false
+        if (merged.scales.y) merged.scales.y.display = false
+      }
+    }
+  }
+
+  return merged
+})
+```
+
+## 已修复的文件
+
+1. **Web/src/views/statisticsV2/modules/ExpenseCategoryCard.vue**
+   - 在 `chartOptions` 中添加了显式的 `scales` 禁用配置（第 321-324 行）
+
+2. **Web/src/components/Charts/BaseChart.vue**
+   - 优化了圆形图表的 `scales` 处理逻辑（第 106-128 行）
+
+## 已验证的文件（无需修改）
+
+1. **Web/src/components/Budget/BudgetChartAnalysis.vue**
+   - `monthGaugeOptions` 和 `yearGaugeOptions` 已经包含正确的 `scales` 配置
+
+## 预防措施
+
+1. **新增 Doughnut/Pie 图表时**：始终显式设置 `scales: { x: { display: false }, y: { display: false } }`
+2. **使用 BaseChart 组件**：依赖其自动处理逻辑（已优化）
+3. **代码审查**：检查所有圆形图表配置，确保不包含笛卡尔坐标系配置
+
+## Chart.js 图表类型说明
+
+| 图表类型 | 坐标系 | 是否需要 scales |
+|---------|--------|----------------|
+| Line    | 笛卡尔 | ✓ 需要 x/y     |
+| Bar     | 笛卡尔 | ✓ 需要 x/y     |
+| Pie     | 极坐标 | ✗ 不需要       |
+| Doughnut| 极坐标 | ✗ 不需要       |
+| Radar   | 极坐标 | ✗ 不需要       |
+
+## 相关资源
+
+- Chart.js 官方文档：https://www.chartjs.org/docs/latest/
+- 项目主题配置：`Web/src/composables/useChartTheme.ts`
+- 图表基础组件：`Web/src/components/Charts/BaseChart.vue`