64 lines
1.8 KiB
Markdown
64 lines
1.8 KiB
Markdown
|
---
|
|||
|
|
title: 响应式图表布局规格
|
|||
|
|
author: AI Assistant
|
|||
|
|
date: 2026-02-16
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## ADDED Requirements
|
|||
|
|
|
|||
|
|
### Requirement: 容器自适应
|
|||
|
|
BaseChart 组件 SHALL 自动适应父容器大小。
|
|||
|
|
|
|||
|
|
#### Scenario: 容器大小变化
|
|||
|
|
- **WHEN** 父容器大小发生变化
|
|||
|
|
- **THEN** 图表 SHALL 自动调整尺寸
|
|||
|
|
- **AND** 使用 ResizeObserver 进行监听
|
|||
|
|
- **AND** 图表 SHALL 保持比例不失真
|
|||
|
|
|
|||
|
|
#### Scenario: 横竖屏切换
|
|||
|
|
- **WHEN** 移动设备从竖屏切换到横屏
|
|||
|
|
- **THEN** 图表 SHALL 在 300ms 内完成重绘
|
|||
|
|
- **AND** 所有元素 SHALL 保持可读性
|
|||
|
|
|
|||
|
|
### Requirement: 触控交互优化
|
|||
|
|
图表 SHALL 针对移动设备触控操作进行优化。
|
|||
|
|
|
|||
|
|
#### Scenario: 悬停效果增强
|
|||
|
|
- **WHEN** 用户悬停/触摸饼图扇区
|
|||
|
|
- **THEN** `hoverOffset` SHALL 为 8px（比默认值大）
|
|||
|
|
- **AND** 过渡动画 SHALL 流畅自然
|
|||
|
|
|
|||
|
|
#### Scenario: 折线图点触控
|
|||
|
|
- **WHEN** 用户触摸折线图数据点
|
|||
|
|
- **THEN** 点的 `pointHoverRadius` SHALL 为 6px
|
|||
|
|
- **AND** 触控目标 SHALL 足够大（最小 44px）
|
|||
|
|
|
|||
|
|
### Requirement: 空状态处理
|
|||
|
|
图表组件 SHALL 优雅处理空数据情况。
|
|||
|
|
|
|||
|
|
#### Scenario: 无数据时显示空状态
|
|||
|
|
- **WHEN` 传入的数据为空数组或 datasets 为空
|
|||
|
|
- **THEN** 显示 VanEmpty 组件
|
|||
|
|
- **AND** 显示文案 "暂无数据"
|
|||
|
|
|
|||
|
|
#### Scenario: 加载状态
|
|||
|
|
- **WHEN** `loading` prop 为 true
|
|||
|
|
- **THEN** 显示 VanLoading 组件
|
|||
|
|
- **AND** 显示文案 "加载中..."
|
|||
|
|
|
|||
|
|
### Requirement: 最小高度限制
|
|||
|
|
图表容器 SHALL 有最小高度限制以确保可读性。
|
|||
|
|
|
|||
|
|
#### Scenario: 小容器适配
|
|||
|
|
- **WHEN** 父容器高度小于 200px
|
|||
|
|
- **THEN** 图表 SHALL 使用 200px 作为最小高度
|
|||
|
|
- **AND** SHALL 显示滚动条或缩放提示
|
|||
|
|
|
|||
|
|
## MODIFIED Requirements
|
|||
|
|
|
|||
|
|
无修改的现有需求。
|
|||
|
|
|
|||
|
|
## REMOVED Requirements
|
|||
|
|
|
|||
|
|
无删除的需求。
|