# Pivot 数据透视组件使用说明

## 组件概述

Pivot 是一个数据透视分析组件，以 Dialog 弹窗形式呈现。支持对表格数据进行多维度聚合分析，提供分组统计和交叉统计两种模式，可视化方式包括图表视图和表格视图。

## 基础用法

```vue
<template>
  <div>
    <el-button @click="showPivot = true">打开数据透视</el-button>
    <Pivot
      :visible.sync="showPivot"
      :data="tableData"
      :columns="columns"
      :row-fields="rowFields"
      :col-fields="colFields"
      :value-fields="valueFields"
      :chart-type="chartType"
      @refresh="handleRefresh"
      @export="handleExport"
      @add-to-home="handleAddToHome"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPivot: false,
      // 数据源
      tableData: [
        { region: '华东', product: '产品A', amount: 10000, count: 50 },
        { region: '华东', product: '产品B', amount: 15000, count: 60 },
        { region: '华南', product: '产品A', amount: 8000, count: 40 },
        { region: '华南', product: '产品B', amount: 12000, count: 55 },
        // ...更多数据
      ],
      // 列定义
      columns: [
        { key: 'region', label: '地区', type: 'string' },
        { key: 'product', label: '产品', type: 'string' },
        { key: 'amount', label: '金额', type: 'number' },
        { key: 'count', label: '数量', type: 'number' }
      ],
      // 行维度（分组统计时使用）
      rowFields: ['region'],
      // 列维度（交叉统计时使用）
      colFields: ['region', 'product'],
      // 计算指标
      valueFields: ['amount', 'count'],
      // 图表类型
      chartType: 'bar'
    }
  },
  methods: {
    handleRefresh() {
      console.log('刷新数据')
    },
    handleExport(data) {
      console.log('导出数据', data)
    },
    handleAddToHome(report) {
      console.log('添加到首页', report)
    }
  }
}
</script>
```

## Props 参数

| 参数 | 说明 | 类型 | 默认值 | 必填 |
|------|------|------|--------|------|
| visible | 控制弹窗显示，支持 .sync 修饰符 | Boolean | false | 是 |
| data | 数据源，原始表格数据 | Array | [] | 是 |
| columns | 列定义配置 | Array | [] | 是 |
| rowFields | 行维度字段（分组统计使用） | Array | [] | 否 |
| colFields | 列维度字段（交叉统计使用） | Array | [] | 否 |
| valueFields | 计算指标字段 | Array | [] | 否 |
| chartType | 图表类型 | String | 'bar' | 否 |
| width | 组件宽度 | Number/String | 1360 | 否 |
| height | 组件高度 | Number/String | 820 | 否 |

### columns 列定义格式

```javascript
// 维度字段（字符串类型）
{ key: 'region', label: '地区', type: 'string' }

// 指标字段（数值类型）
{ key: 'amount', label: '金额', type: 'number' }

// 日期字段（作为维度）
{ key: 'date', label: '日期', type: 'date' }
```

> **自动推断**：如果未指定 rowFields/colFields/valueFields，组件会根据 columns 中的 type 自动推断：
> - `type: 'string' | 'date'` → 作为维度字段
> - `type: 'number'` → 作为指标字段

### chartType 图表类型

| 值 | 说明 |
|----|------|
| 'bar' | 柱状图（默认） |
| 'line' | 折线图 |
| 'pie' | 饼图 |
| 'area' | 面积图 |

## Events 事件

| 事件名 | 说明 | 回调参数 |
|--------|------|----------|
| update:visible | 弹窗显示状态变化 | (visible: Boolean) |
| refresh | 点击刷新按钮 | - |
| export | 导出数据 | (data: Array) |
| add-to-home | 添加到首页 | (report: Object) |

## 功能说明

### 1. 统计模式

#### 分组统计（默认）
- 按选定的维度字段进行分组
- 对每个分组内的指标进行聚合计算
- 支持图表视图和表格视图

#### 交叉统计
- 按行维度和列维度进行交叉分析
- 仅支持表格视图
- 切换到交叉统计时会自动切换为表格视图

### 2. 聚合方式

每个指标可独立设置聚合类型：

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

### 3. 多报表管理

- **新建报表**：点击左侧边栏顶部的 "+" 按钮
- **重命名**：悬停报表项 → 点击更多 → 选择重命名
- **删除**：悬停报表项 → 点击更多 → 选择删除
- **切换报表**：点击报表项即可切换

> 报表配置会自动保存到 localStorage，刷新页面后保留。

### 4. 数据导出

点击工具栏的"更多"按钮 → 选择"导出"，可将当前透视结果导出为 CSV 文件。

### 5. 分页功能

表格视图支持分页，可切换每页显示条数（10/20/50/100），支持跳转指定页码。

## 界面布局

```
┌────────────────────────────────────────────────────────────────┐
│                         数据透视分析中心                         │
├──────────────┬─────────────────────────────────┬──────────────┤
│  我的报表清单 │          主内容区域              │   维度配置   │
│   (280px)    │                                  │   (280px)    │
│              │  ┌─────────────────────────────┐ │              │
│  + 新建报表   │  │ 报表标题 | 添加到首页        │ │  报表标题    │
│              │  │ 计算耗时 | 数据条数          │ │  统计类型    │
│  ● 报表1     │  ├─────────────────────────────┤ │  展示形式    │
│  ○ 报表2     │  │                             │ │  分组维度    │
│  ○ 报表3     │  │    图表视图 / 表格视图       │ │  计算指标    │
│              │  │                             │ │              │
│              │  └─────────────────────────────┘ │              │
└──────────────┴─────────────────────────────────┴──────────────┘
```

## 使用示例

### 示例1：基础分组统计

```vue
<Pivot
  :visible.sync="showPivot"
  :data="salesData"
  :columns="[
    { key: 'region', label: '地区', type: 'string' },
    { key: 'amount', label: '销售额', type: 'number' }
  ]"
/>
```

### 示例2：交叉统计分析

```vue
<Pivot
  :visible.sync="showPivot"
  :data="salesData"
  :columns="[
    { key: 'region', label: '地区', type: 'string' },
    { key: 'product', label: '产品', type: 'string' },
    { key: 'amount', label: '销售额', type: 'number' }
  ]"
  :col-fields="['region', 'product']"
/>
```

### 示例3：自定义图表类型

```vue
<Pivot
  :visible.sync="showPivot"
  :data="salesData"
  :columns="columns"
  chart-type="pie"
/>
```

## 注意事项

1. **数据量限制**：当前版本未实现虚拟滚动，大数据量（>10000条）时可能存在性能问题
2. **交叉统计无图表**：交叉统计模式仅支持表格视图，不渲染图表
3. **配置持久化**：报表配置保存在 localStorage，清除浏览器缓存会丢失
4. **列定义必填**：columns 参数必须正确配置，否则无法正确识别维度和指标字段

## 依赖组件

| 组件 | 说明 |
|------|------|
| Dialog | 弹窗容器 |
| ViewToggle | 视图切换控件 |
| Empty | 空状态展示 |
| echarts | 图表渲染（按需加载） |
| xe-utils | 数据聚合计算 |
