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

title, author, date, status, category

title	author	date	status	category
Doughnut/Pie 图表显示网格线问题修复	AI Assistant	2026-02-19	final	技术修复

Doughnut/Pie 图表显示网格线问题修复

问题描述

在使用 Chart.js 的 Doughnut（环形图）或 Pie（饼图）时，图表中不应该显示笛卡尔坐标系的网格线，但在某些情况下会错误地显示出来。

问题根源

useChartTheme.ts 中的 baseChartOptions 包含了 scales.x 和 scales.y 配置（第 82-108 行），这些配置适用于折线图、柱状图等笛卡尔坐标系图表，但不适用于 Doughnut/Pie 这类极坐标图表。

当使用 getChartOptions() 合并配置时，这些默认的 scales 配置会被带入到圆形图表中，导致显示网格线。

修复方案

方案 1：在具体组件中显式禁用（已应用）

在使用 Doughnut/Pie 图表的组件中，调用 getChartOptions() 时显式传入 scales 配置：

const chartOptions = computed(() => {
  return getChartOptions({
    cutout: '65%',
    // 显式禁用笛卡尔坐标系（Doughnut 图表不需要）
    scales: {
      x: { display: false },
      y: { display: false }
    },
    plugins: {
      // ...其他插件配置
    }
  })
})

方案 2：BaseChart 组件自动处理（已优化）

优化 BaseChart.vue 组件（第 106-128 行），使其能够自动检测圆形图表并强制禁用坐标轴：

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