3402ffaae2
All checks were successful
Docker Build & Deploy / Build Docker Image (push) Successful in 3m13s
Docker Build & Deploy / Deploy to Production (push) Successful in 8s
Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 1s
Docker Build & Deploy / WeChat Notification (push) Successful in 1s
104 lines
3.3 KiB
Markdown
104 lines
3.3 KiB
Markdown
---
|
||
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`
|