开源的高性能多维交叉表格分析工具

小半 • 2022年12月29日下午11:00 • 开源速递 • 阅读 619

《开源精选》是我们分享 Github、Gitee 等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个多维交叉分析表格领域的解决方案——S2。

S2 是 AntV 在多维交叉分析表格领域的解决方案，完全基于数据驱动的方式。通过提供底层能力库，基础组件，业务场景组件以及自由扩展的能力，让开发者基于自身场景自由选择，既能开箱即用，又能自由发挥。

特性

• 多维交叉分析： 告别单一分析维度，全面拥抱任意维度的自由组合分析。
• 高性能：能支持全量百万数据下 <8s 渲染，也能通过局部下钻来实现秒级渲染。
• 高扩展性：支持任意的自定义扩展（包括但不局限于布局，样式，交互，数据 hook 流等）。
• 开箱即用：提供不同分析场景下开箱即用的 react 表组件及配套分析组件，只需要简单的配置即可轻松实现复杂场景的表渲染。
• 可交互：支持丰富的交互形式（单选、圈选、行选、列选、冻结行头、宽高拖拽，自定义交互等）

快速上手

npm | yarn 安装

# npm
$ npm install @antv/s2

# yarn
$ yarn add @antv/s2

浏览器引入

如需兼容 IE，需要自行引入 polyfill 兼容。

<!-- 引入在线资源 -->
<script type="text/javascript" src="https://unpkg.com/@antv/s2@latest/dist/index.min.js"></script>

<!-- 下载到本地 引入本地脚本 -->
<script src="./dist/index.min.js"></script>

使用

创建 S2 表格有两种方式，基础类版本 (s2-core) 和基于 core 层封装的 React 版本。

core 版本：

https://github.com/antvis/S2/tree/master/packages/s2-core

react 版本：

https://github.com/antvis/S2/tree/master/packages/s2-react

1. 数据准备

const s2DataConfig = {
  fields: {
    rows: ['province', 'city'],
    columns: ['type'],
    values: ['price'],
  },
  data: [
    {
      province: "浙江",
      city: "杭州",
      type: "笔",
      price: "1",
    },
    {
      province: "浙江",
      city: "杭州",
      type: "纸张",
      price: "2",
    },
   ......
  ]
};

2. 配置项准备

const s2options = {
  width: 600,
  height: 600
}

3. 渲染

<div id="container"></div>

import { PivotSheet } from '@antv/s2';

const container = document.getElementById('container');

const s2 = new PivotSheet(container, s2DataConfig, s2options)

s2.render()