Skip to content

vPivot 透视表

透视表/数据透视组件。

基础用法

vue
<script setup>
import { vPivot } from '@twi1i9ht/visual-lib'

const data = [
  { region: '华东', product: 'A', sales: 100 },
  { region: '华东', product: 'B', sales: 150 },
  { region: '华北', product: 'A', sales: 200 },
]

const config = {
  rows: ['region'],
  cols: ['product'],
  values: [{ field: 'sales', aggregator: 'sum' }],
}
</script>

<template>
  <vPivot :data="data" :config="config" />
</template>

Props

属性类型默认值说明
dataArray<Record<string, any>>原始数据
configPivotConfig透视配置

PivotConfig 类型

ts
interface PivotConfig {
  rows: string[] // 行维度字段
  cols: string[] // 列维度字段
  values: Array<{
    field: string // 值字段
    aggregator: 'sum' | 'count' | 'avg' | 'min' | 'max'
  }>
}

Released under the MIT License.