# ECharts 折线图

## 📋 业务与功能

### 1.1 核心目标

该元素用于展示时间序列与趋势数据，支持多系列可视化与基础交互。

该元素面向通用数据可视化场景，强调清晰的趋势表达与可配置性。

### 1.2 功能清单

- **标题区域**：展示图表标题
- **图例区域**：显示系列名称并支持开关
- **绘图区**：折线与数据点绘制
- **坐标轴**：X/Y 轴名称与刻度
- **提示框**：鼠标悬停展示数据详情
- **加载动画**：支持显示/隐藏加载状态

### 1.3 交互要点

- 悬停数据点：显示 tooltip，反馈当前数据值
- 点击图表：触发 `onClick` 事件
- 图例切换：触发 `onLegendSelect` 事件
- 数据缩放：触发 `onDataZoom` 事件
- 动作 `updateData` 更新数据并重绘图表

---

## 📊 内容规划

### 2.1 信息架构

```
ECharts 折线图
├── 标题
├── 图例
└── 绘图区
    ├── 坐标轴
    ├── 折线与数据点
    └── 提示框
```

### 2.2 数据来源

- **数据类型**：系列数据（`series`）
- **数据源**：用户提供（props data）/ 内置示例
- **关键字段**：
  - `name`: 系列名称
  - `data`: 数值数组

- **数据类型**：X 轴数据（`xAxis.data`）
- **数据源**：用户提供（props data）/ 内置示例
- **关键字段**：
  - `data`: 类目/时间标签数组

### 2.3 内容示例

**示例**：
- 系列：`系列1` / [120, 132, 101, 134, 90, 230, 210]
- X 轴：`Mon` ~ `Sun`

---

## 🎨 布局与结构

### 3.1 整体布局

- **布局模式**：单容器自适应
- **容器宽度**：流式
- **关键尺寸**：
  - 最小尺寸：`300px` × `200px`
  - 图表区域占满容器

### 3.2 响应式适配

- **桌面端（≥1200px）**：图表自适应容器宽高
- **平板端（768-1199px）**：图表自适应容器宽高
- **移动端（<768px）**：图表自适应容器宽高

---

## 🎨 视觉规范

### 4.1 设计规范来源

**设计依据**：
- [x] 用户提供的设计规范：`/docs/设计规范.UIGuidelines.md`

### 4.2 自定义设计要点

**自定义色彩**（如有）：
- `primaryColor`：折线主题色（默认 `#1890ff`）

**自定义尺寸**（如有）：
- 无

**其他自定义规范**（如有）：
- 无

### 4.3 组件状态

- **默认态（default）**：折线与坐标轴正常显示
- **悬停态（hover）**：显示提示框并高亮数据点
- **加载态（loading）**：显示/隐藏加载动画遮罩

---

## ⚙️ Axure API 说明

### 5.1 事件列表（eventList）

| 事件名称 | Payload 类型 | 触发时机 | 说明 |
|---------|-------------|---------|------|
| `onClick` | `object` | 点击图表时 | ECharts 点击事件参数 |
| `onDataZoom` | `object` | 数据缩放时 | ECharts 缩放事件参数 |
| `onLegendSelect` | `object` | 切换图例时 | ECharts 图例事件参数 |

### 5.2 动作列表（actionList）

| 动作名称 | Params 类型 | 参数说明 | 功能描述 |
|---------|------------|---------|---------|
| `updateData` | `object` | `{ series, xAxis }` | 更新图表数据 |
| `resize` | `void` | 无 | 触发图表自适应 |
| `showLoading` | `void` | 无 | 显示加载动画 |
| `hideLoading` | `void` | 无 | 隐藏加载动画 |

### 5.3 变量列表（varList）

| 变量名称 | 类型 | 默认值 | 说明 |
|---------|-----|-------|------|
| `chart_instance` | `EChartsInstance` | `null` | ECharts 实例对象 |
| `current_data` | `object` | 默认数据 | 当前图表数据 |

### 5.4 配置项列表（configList）

| 配置项名称 | 类型 | 默认值 | 说明 |
|----------|-----|-------|------|
| `title` | `string` | `折线图` | 图表标题 |
| `xAxisName` | `string` | `X轴` | X 轴名称 |
| `yAxisName` | `string` | `Y轴` | Y 轴名称 |
| `primaryColor` | `string` | `#1890ff` | 主题色 |
| `showLegend` | `boolean` | `true` | 是否显示图例 |
| `showTooltip` | `boolean` | `true` | 是否显示提示框 |

### 5.5 数据项列表（dataList）

**数据结构**：
```typescript
{
  series: Array<{
    name: string;   // 系列名称
    data: number[]; // 数值数组
  }>;
  xAxis: {
    data: string[]; // X 轴标签
  };
}
```