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
ADDED Requirements
Requirement: Chart.js must be integrated with Vue 3 Composition API
The system SHALL use vue-chartjs 5.x to integrate Chart.js with Vue 3 components using the Composition API pattern.
Scenario: Chart component renders successfully
- WHEN a component imports and uses vue-chartjs chart components
- THEN the chart renders correctly in the DOM without console errors
Scenario: Chart updates reactively
- WHEN the chart's data prop changes
- THEN the chart re-renders with the new data using Chart.js update mechanism
Requirement: Theme system must support Vant UI color scheme
The system SHALL provide a centralized theme configuration that adapts to Vant UI's theme variables, including dark mode support.
Scenario: Chart uses Vant primary color
- WHEN a chart is rendered
- THEN the chart uses
var(--van-primary-color)for primary elements (lines, bars, etc.)
Scenario: Chart adapts to dark mode
- WHEN user switches to dark mode via Vant ConfigProvider
- THEN chart text color changes to
var(--van-text-color)and background adapts accordingly
Requirement: Base chart component must encapsulate common configuration
The system SHALL provide a BaseChart.vue component that encapsulates responsive behavior, theme integration, and error handling.
Scenario: Chart responds to container resize
- WHEN the parent container resizes (e.g., orientation change)
- THEN the chart automatically adjusts its dimensions using ResizeObserver
Scenario: Chart shows loading state
- WHEN chart data is being fetched
- THEN the component displays a loading indicator (Vant Loading component)
Scenario: Chart handles empty data gracefully
- WHEN chart receives empty or null data
- THEN the component displays an empty state message without errors
Requirement: Gauge chart plugin must be available
The system SHALL provide a custom Chart.js plugin that renders a gauge chart using Doughnut chart with center text overlay.
Scenario: Gauge chart displays percentage
- WHEN gauge chart is rendered with value and limit props
- THEN the chart shows a semi-circle gauge with percentage text in the center
Scenario: Gauge chart supports color thresholds
- WHEN gauge value exceeds 100%
- THEN the gauge color changes to danger color (red for expense, green for income)
Requirement: Charts must support mobile touch interactions
The system SHALL enable touch-friendly interactions including tap-to-highlight and pan gestures.
Scenario: User taps chart segment
- WHEN user taps a bar/pie segment on mobile
- THEN the segment highlights and shows tooltip with details
Scenario: User pans line chart
- WHEN user swipes horizontally on a line chart with many data points
- THEN the chart scrolls to show hidden data points
Requirement: Chart animations must be configurable
The system SHALL allow disabling or customizing chart animations via configuration.
Scenario: Animation duration is consistent
- WHEN a chart first loads
- THEN the animation completes in 750ms (matching Vant UI transition timing)
Scenario: Animation respects prefers-reduced-motion
- WHEN user has
prefers-reduced-motion: reduceenabled - THEN charts render instantly without animation