!!!###!!!title=基本表数据分析——VisActor/VTable 教程文档!!!###!!!!!!###!!!description=目前支持的能力有排序,过滤,数据聚合计算。!!!###!!!

基础表格数据分析

目前支持的能力有排序,过滤,数据聚合计算。

数据排序

具体可参阅教程:https://visactor.io/vtable/guide/basic_function/sort/list_sort

数据过滤

基础表格组件通过接口updateFilterRules来设置数据过滤规则,支持值过滤和函数过滤。下面是过滤数据的用法示例:

tableInstance.updateFilterRules([
  {
    filterKey: 'sex',
    filteredValues: ['boy']
  },
  {
    filterFunc: (record: Record<string, any>) => {
      return record.age > 30;
    }
  }
]);

在上述示例中,我们通过filterKeyfilteredValues来设置值过滤,只显示性别为"boy"的数据;同时,我们使用了函数过滤,通过filterFunc来自定义过滤逻辑,只显示age字段即年龄大于 30 的数据。

具体示例:https://visactor.io/vtable/demo/list-table-data-analysis/list-table-data-filter

清除数据过滤规则的话,请将函数参数传空tableInstance.updateFilterRules()

数据聚合

基础表格支持对数据进行聚合计算,每一列可以设置不同的聚合方式,包括求和、平均、最大值、最小值,以及自定义函数汇总逻辑。同一列可以设置多种聚合方式,聚合结果会展示在多行。

聚合计算类型

  • 求和,设置aggregationTypeAggregationType.SUM
  • 平均,设置aggregationTypeAggregationType.AVG
  • 最大值,设置aggregationTypeAggregationType.MAX
  • 最小值,设置aggregationTypeAggregationType.MIN
  • 计数,设置aggregationTypeAggregationType.COUNT
  • 自定义函数,设置aggregationTypeAggregationType.CUSTOM,通过aggregationFun来设置自定义的聚合逻辑

聚合值格式化函数

通过formatFun来设置聚合值的格式化函数,可以自定义聚合值的展示格式。

聚合结果展示位置

通过showOnTop来控制聚合结果的展示位置,默认为false,即聚合结果展示在 body 的底部。如果设置为true,则聚合结果展示在 body 的顶部。

注意:目前聚合值没有自定冻结能力,需要结合 bottomFrozonRowCount 来实现固定显示,另外尴尬的是目前还没有增加 topFrozonRowCount,所以建议可以先将聚合结果显示在 body 底部。后续会支持全面的冻结能力。

聚合配置

聚合配置可以在 columns 列定义中进行设置,也可以在表格全局 option 中配置中。

列定义中配置聚合方式

在列定义中,可以通过aggregation属性来配置聚合方式。下面是一个聚合配置的示例:

columns: [
  {
    field: 'salary',
    title: 'salary',
    width: 100,
    aggregation: [
      {
        aggregationType: AggregationType.MAX,
        formatFun(value) {
          return '最高薪资:' + Math.round(value) + '元';
        }
      },
      {
        aggregationType: AggregationType.MIN,
        formatFun(value) {
          return '最低薪资:' + Math.round(value) + '元';
        }
      },
      {
        aggregationType: AggregationType.AVG,
        showOnTop: false,
        formatFun(value, col, row, table) {
          return '平均:' + Math.round(value) + '元 (共计' + table.recordsCount + '条数据)';
        }
      }
    ]
  }
];

在上述示例中,我们针对salary这一列设置了三种聚合方式:最大值、最小值和平均值。通过aggregationType来指定聚合方式,然后可以通过formatFun来自定义聚合结果的展示格式,通过showOnTop来控制将聚合结果展示在 body 的顶部还是底部。

表格全局配置聚合方式

除了在列定义中配置聚合方式,也可以在表格全局配置中进行设置。下面是一个全局配置的示例:

aggregation(args) {
  if (args.col === 1) {
    return [
      {
        aggregationType: AggregationType.MAX,
        formatFun(value) {
          return '最大ID:' + Math.round(value) + '号';
        }
      },
      {
        aggregationType: AggregationType.MIN,
        showOnTop: false,
        formatFun(value, col, row, table) {
          return '最小ID:' + Math.round(value) + '号';
        }
      }
    ];
  }
  if (args.field === 'salary') {
    return [
      {
        aggregationType: AggregationType.MIN,
        formatFun(value) {
          return '最低薪资:' + Math.round(value) + '元';
        }
      },
      {
        aggregationType: AggregationType.AVG,
        showOnTop: false,
        formatFun(value, col, row, table) {
          return '平均薪资:' + Math.round(value) + '元 (共计' + table.recordsCount + '条数据)';
        }
      }
    ];
  }
  return null;
}

在上述示例中,我们通过全局配置的aggregation函数来设置聚合方式,根据不同的条件返回不同的聚合配置。例如,当args.col === 1时,我们设置了最大值和最小值的聚合方式;当args.field === 'salary'时,我们设置了最低值和平均值的聚合方式。

具体示例可参考:https://visactor.io/vtable/demo/list-table-data-analysis/list-table-aggregation-multiple

以上就是基础表格数据分析能力的教程文档,涵盖了数据过滤和数据聚合的配置和用法。希望这份文档能对你有所帮助!如有任何疑问,请随时提问。