---
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`