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
78 lines
3.3 KiB
Markdown
78 lines
3.3 KiB
Markdown
## MODIFIED Requirements
|
|
|
|
### Requirement: Daily trend chart must display expense/income over time
|
|
The system SHALL render a line chart showing daily transaction totals for the selected time period (week/month/year).
|
|
|
|
#### Scenario: Week view shows 7 days
|
|
- **WHEN** user selects "Week" time period
|
|
- **THEN** chart displays 7 data points (Mon-Sun) with expense and income lines
|
|
|
|
#### Scenario: Month view shows daily trend
|
|
- **WHEN** user selects "Month" time period
|
|
- **THEN** chart displays 28-31 data points (one per day) with expense and income lines
|
|
|
|
#### Scenario: Year view shows monthly trend
|
|
- **WHEN** user selects "Year" time period
|
|
- **THEN** chart displays 12 data points (one per month) with expense and income lines
|
|
|
|
#### Scenario: Chart highlights max expense day
|
|
- **WHEN** user views daily trend
|
|
- **THEN** the day with highest expense has a highlighted marker
|
|
|
|
#### Scenario: Chart supports zooming
|
|
- **WHEN** user pinches on mobile or scrolls on desktop
|
|
- **THEN** chart zooms in/out to show more/less detail
|
|
|
|
### Requirement: Expense category pie chart must show spending breakdown
|
|
The system SHALL render a pie chart displaying expense amounts grouped by category for the selected time period.
|
|
|
|
#### Scenario: Pie chart shows all expense categories
|
|
- **WHEN** user has expenses in multiple categories
|
|
- **THEN** chart displays one slice per category with percentage labels
|
|
|
|
#### Scenario: Pie chart uses category colors
|
|
- **WHEN** categories have custom colors defined
|
|
- **THEN** chart slices use the corresponding category colors
|
|
|
|
#### Scenario: Pie chart shows "Others" for small categories
|
|
- **WHEN** more than 8 categories exist
|
|
- **THEN** categories below 3% are grouped into "Others" slice
|
|
|
|
#### Scenario: Tapping slice shows category detail
|
|
- **WHEN** user taps a pie slice
|
|
- **THEN** app navigates to category detail view with transaction list
|
|
|
|
### Requirement: Monthly expense bar chart must compare months
|
|
The system SHALL render a vertical bar chart comparing expense totals across recent months.
|
|
|
|
#### Scenario: Bar chart shows 6 recent months
|
|
- **WHEN** user views monthly expense card
|
|
- **THEN** chart displays 6 bars representing the last 6 months
|
|
|
|
#### Scenario: Current month bar is highlighted
|
|
- **WHEN** user views monthly expense card
|
|
- **THEN** current month's bar uses primary color, previous months use gray
|
|
|
|
#### Scenario: Bar height reflects expense amount
|
|
- **WHEN** a month has higher expenses
|
|
- **THEN** its bar is proportionally taller
|
|
|
|
#### Scenario: Bar shows tooltip with formatted amount
|
|
- **WHEN** user hovers/taps a bar
|
|
- **THEN** tooltip displays month name and expense amount formatted as "¥X,XXX.XX"
|
|
|
|
### Requirement: Charts must maintain existing responsive behavior
|
|
The system SHALL ensure all statistics charts adapt to different screen sizes and orientations.
|
|
|
|
#### Scenario: Chart scales on narrow screens
|
|
- **WHEN** screen width is less than 375px
|
|
- **THEN** chart font sizes scale down proportionally while maintaining readability
|
|
|
|
#### Scenario: Chart reflows on orientation change
|
|
- **WHEN** device orientation changes from portrait to landscape
|
|
- **THEN** chart re-renders to fill available width within 300ms
|
|
|
|
#### Scenario: Chart labels truncate on small screens
|
|
- **WHEN** category names are longer than 12 characters
|
|
- **THEN** labels show ellipsis (e.g., "Entertainment..." ) and full text in tooltip
|