# Pivot 数据透视组件

## 组件作用描述

Pivot 是一个基于 Vue 2.6 和 vxe-table 的数据透视组件，通过 Dialog 弹窗呈现。核心功能是将外部传入的表格数据进行多维度聚合分析，支持分组统计和交叉统计两种模式，可视化方式包括图表视图和表格视图。

## 依赖说明

| 依赖       | 版本 | 用途                           |
| ---------- | ---- | ------------------------------ |
| vxe-table  | \*   | 表格核心，支持大数据虚拟滚动   |
| xe-utils   | \*   | vxe-table 工具库，数据聚合计算 |
| echarts    | \*   | 图表渲染（仅分组统计模式可用） |
| Dialog     | 内置 | 弹窗容器                       |
| ViewToggle | 内置 | 视图切换控件                   |

## Props 接口

```typescript
{
  visible: Boolean // 控制弹窗显示，默认 false
  dataSource: Array // 数据源，外部传入的原始表格数据
  columns: Array // 列定义，格式: { key, label, type }
  dimensionsField: Array // 维度字段，未指定默认columns中string类型的字段
  metricsField: Array // 聚合计算字段，未指定默认columns中number类型的字段
}
```

### columns 列定义

```javascript
// 维度字段 typeof dataSource[index].region  === 'string'
{ prop: 'region', label: '地区' }
// 指标字段 typeof dataSource[index].amount  === 'number'
{ prop: 'amount', label: '金额' }
```

> 分组维度 (dimensions) 和计算指标 (metrics) 的可选项由外部通过 `columns` 配置传入，组件根据 dataSource 数据源中对应的 columns 中的 prop 自动区分：
>
> - `'string' | 'date'` → 作为维度字段
> - `'number'` → 作为指标字段（支持聚合）

## 核心功能

### 1. 统计模式

| 模式             | 说明                             | 可视化              |
| ---------------- | -------------------------------- | ------------------- |
| 分组统计 (group) | 按维度字段分组，聚合计算每个指标 | 图表视图 + 表格视图 |
| 交叉统计 (cross) | 行列交叉分析                     | 仅表格视图          |

### 2. 聚合方式

每项指标支持独立设置聚合类型：

| 类型  | 说明   |
| ----- | ------ |
| sum   | 求和   |
| count | 计数   |
| avg   | 平均值 |
| max   | 最大值 |
| min   | 最小值 |

### 3. 图表类型（仅分组统计模式）

- 柱状图
- 折线图
- 饼图
- 条形图

> 交叉统计模式仅支持表格展示，不渲染图表。

### 4. 多报表管理

- 新建报表
- 重命名报表
- 删除报表
- 报表配置本地持久化 (localStorage)

## 布局结构

```
┌──────────────────────────────────────────────────────────────┐
│                         Dialog                                │
│                       width: 1360px (固定)                    │
├──────────────┬─────────────────────────────┬─────────────────┤
│  左侧边栏     │         主内容区域           │   右侧边栏       │
│  280px       │         flex: 1            │   280px         │
│              │                             │                 │
│ 我的报表清单   │ 工具栏 (标题/统计信息)      │ 维度配置          │
│ - 报表1      ├─────────────────────────────┤                 │
│ - 报表2      │                             │ 报表标题         │
│ - 报表3      │ 图表视图 / 表格视图          │ 统计类型         │
│              │                             │ 展示形式         │
│              │                             │ 分组维度         │
│              │                             │ 计算指标         │
└──────────────┴─────────────────────────────┴─────────────────┘
```

## 开发进度

| 功能       | 状态            | 说明                       |
| ---------- | --------------- | -------------------------- |
| 分组统计   | ✅ 完成，待优化 | 支持图表和表格双视图       |
| 交叉统计   | ✅ 完成，待优化 | 仅表格视图，无图表         |
| 图表渲染   | ✅ 完成，待优化 | echarts 实现，分组模式可用 |
| 虚拟滚动   | ⬜ 待实现       | 依赖 vxe-table，大数据优化 |
| 指标聚合   | ✅ 完成，待优化 | 支持每指标独立设置聚合类型 |
| 多报表管理 | ✅ 完成，待优化 | CRUD + localStorage 持久化 |
| 分页       | ✅ 完成，待优化 | 表格统计支持               |

## 注意事项

1. **组件宽度固定为 1360px**，不接受动态调整
2. **dimensions 和 metrics 由外部传入**，如未配置，组件根据 columns 配置自动派生可用选项
3. **交叉统计模式不渲染图表**，切换到该模式时会自动切换为表格视图
4. **虚拟滚动待实现**，当前版本在大数据量场景下可能存在性能问题
