9921cd5fdf
- Migrated 4 components from ECharts to Chart.js: * MonthlyExpenseCard.vue (折线图) * DailyTrendChart.vue (双系列折线图) * ExpenseCategoryCard.vue (环形图) * BudgetChartAnalysis.vue (仪表盘 + 多种图表) - Removed all ECharts imports and environment variable switches - Unified all charts to use BaseChart.vue component - Build verified: pnpm build success ✓ - No echarts imports remaining ✓ Refs: openspec/changes/migrate-remaining-echarts-to-chartjs
3.5 KiB
3.5 KiB
MODIFIED Requirements
Requirement: Budget gauge charts must display health status
The system SHALL render monthly and yearly budget health using gauge (semi-circle) charts showing current usage vs limit.
Scenario: Monthly gauge shows expense usage
- WHEN user views expense budget analysis
- THEN monthly gauge displays current expense / monthly limit as a percentage with remaining balance in center
Scenario: Monthly gauge shows income progress
- WHEN user views income budget analysis
- THEN monthly gauge displays current income / monthly target as a percentage with shortfall/excess in center
Scenario: Yearly gauge shows expense usage
- WHEN user views expense budget analysis
- THEN yearly gauge displays current expense / yearly limit as a percentage with remaining balance in center
Scenario: Yearly gauge shows income progress
- WHEN user views income budget analysis
- THEN yearly gauge displays current income / yearly target as a percentage with shortfall/excess in center
Scenario: Gauge changes color when exceeding limit
- WHEN expense usage exceeds 100% of budget
- THEN gauge arc color changes to red (var(--van-danger-color))
Scenario: Gauge changes color when exceeding income target
- WHEN income exceeds 100% of target
- THEN gauge arc color changes to green (var(--van-success-color))
Requirement: Budget variance chart must show category-level differences
The system SHALL render a horizontal bar chart comparing actual vs budgeted amounts for each category.
Scenario: Variance chart displays all categories
- WHEN user has multiple budget categories
- THEN chart shows horizontal bars for each category with actual (solid) and budget (dashed) values
Scenario: Variance chart highlights overbudget categories
- WHEN a category's actual exceeds budget
- THEN the bar is colored red and labeled with overage amount
Scenario: Variance chart shows underbudget categories
- WHEN a category's actual is below budget
- THEN the bar is colored green and labeled with remaining amount
Requirement: Budget burndown chart must track daily spending trend
The system SHALL render line charts showing cumulative spending vs ideal pace for monthly and yearly periods.
Scenario: Monthly burndown chart shows ideal vs actual
- WHEN user views monthly burndown
- THEN chart displays two lines: ideal linear spending and actual cumulative spending
Scenario: Monthly burndown projects month-end total
- WHEN current date is mid-month
- THEN chart shows projected month-end total based on current pace (dotted line extension)
Scenario: Yearly burndown chart shows ideal vs actual
- WHEN user views yearly burndown
- THEN chart displays two lines: ideal linear spending and actual cumulative spending by month
Scenario: Yearly burndown highlights current month
- WHEN user views yearly burndown
- THEN chart highlights the current month's data point with a larger marker
Requirement: Charts must maintain existing interaction behavior
The system SHALL preserve all existing click, tooltip, and zoom interactions from the ECharts implementation.
Scenario: Chart tooltip shows on hover/tap
- WHEN user hovers over (desktop) or taps (mobile) a data point
- THEN tooltip displays formatted value with label
Scenario: Chart updates when switching budget type
- WHEN user switches between expense/income/savings tabs
- THEN all charts update their data and labels within 300ms