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.3 KiB
3.3 KiB
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