S2

📦 安装

使用基础版本 @antv/s2

使用 npm 或 yarn 或 pnpm 安装

# npm
$ npm install @antv/s2 --save

# yarn
$ yarn add @antv/s2

# pnpm
$ pnpm add @antv/s2

使用 React 版本 @antv/s2-react

npm install @antv/s2 @antv/s2-react --save

使用 React 版本分析组件 @antv/s2-react-components

npm install @antv/s2 @antv/s2-react-components antd @ant-design/icons --save

使用 Vue3 版本 @antv/s2-vue 停止维护

注意

@antv/s2-vue 现已停止维护，由于精力投入有限，出于维护成本，包下载量等因素综合考虑，从 2.0.0 正式版后不再继续更新，请基于 @antv/s2 自行封装，或 fork 仓库进行二次开发社区版本。

npm install @antv/s2 @antv/s2-vue ant-design-vue@3.x --save

浏览器引入不推荐

查看示例：

我们提供了 dist 目录的 UMD 编译文件，引入 dist/s2.min.js , 可访问全局变量 window.S2

<script src="./dist/s2.min.js"></script>
<script>
   async function bootstrap() {
      const s2 = new S2.PivotSheet(container, s2DataConfig, s2Options);
      await s2.render();
   }

   bootstrap();
</script>

所有的导出统一挂载在全局变量 window.S2 下

<script type="module">
-  import { S2Event, PivotSheet, TableSheet } from '@antv/s2'
+  const { S2Event, PivotSheet, TableSheet } = S2
</script>

如果使用的是 React 版本 @antv/s2-react , 或者 Vue3 版本 @antv/s2-vue 还需额外引入样式文件

<link rel="stylesheet" href="./dist/s2-react.min.css"/>
<link rel="stylesheet" href="./dist/s2-vue.min.css"/>

也可以直接使用 CDN （推荐）, 比如 UNPKG 或者

<script src="https://unpkg.com/@antv/s2/dist/s2.min.js"></script>

// React 需额外引入样式：
<link rel="stylesheet" href="https://unpkg.com/@antv/s2-react/dist/s2-react.min.css"/>

// Vue3 版本 需额外引入样式：
<link rel="stylesheet" href="https://unpkg.com/@antv/s2-vue/dist/s2-vue.min.css"/>

🔨 使用

版本

提示

创建 S2 表格有三种方式，基础类版本 @antv/s2 和基于 @antv/s2 封装的 React 和 Vue3 版本：

基础版本 @antv/s2: 基于 Canvas 和 AntV/G 6.0 开发，提供基本的表格展示/交互等能力。

版本依赖：无

React 版本 @antv/s2-react: 基于 React 18, 和 @antv/s2 封装，兼容 React 16/17 版本，同时提供配套的分析组件 (@antv/s2-react-components).

版本依赖：

"peerDependencies": {
  "@antv/s2": "^2.0.0",
  "react": ">=16.9.0",
  "react-dom": ">=16.9.0"
}

Vue 版本 @antv/s2-vue: 基于 Vue3, @antv/s2 , ant-design-vue@3.x 封装。停止维护

版本依赖：

"peerDependencies": {
  "@antv/s2": "^2.0.0",
  "ant-design-vue": "^3.2.0",
  "vue": ">=3.x"
}

也就是说 @antv/s2 和框架无关，无任何额外依赖, 你可以在 Vue, Angular 等任意框架中使用。

包名	稳定版	包大小	下载量
@antv/s2
@antv/s2-react
@antv/s2-react-components
@antv/s2-vue（停止维护）

如何获取新版本发布通知？

订阅：https://github.com/antvis/S2/releases.atom 来获得新版本发布的通知。
Watch S2 代码仓库, 选择 Custom - Releases 来获取消息推送。

preview

基础类

1. 数据 (data) 准备

s2DataConfig

const s2DataConfig = {
  fields: {
    rows: ['province', 'city'],
    columns: ['type'],
    values: ['price'],
  },
  data: [
    {
      province: "浙江",
      city: "杭州",
      type: "笔",
      price: "1",
    },
    {
      province: "浙江",
      city: "杭州",
      type: "纸张",
      price: "2",
    },
    {
      province: "浙江",
      city: "舟山",
      type: "笔",
      price: "17",
    },
    {
      province: "浙江",
      city: "舟山",
      type: "纸张",
      price: "6",
    },
    {
      province: "吉林",
      city: "长春",
      type: "笔",
      price: "8",
    },
    {
      province: "吉林",
      city: "白山",
      type: "笔",
      price: "12",
    },
    {
      province: "吉林",
      city: "长春",
      type: "纸张",
      price: "3",
    },
    {
      province: "吉林",
      city: "白山",
      type: "纸张",
      price: "25",
    },
    {
      province: "浙江",
      city: "杭州",
      type: "笔",
      cost: "0.5",
    },
    {
      province: "浙江",
      city: "杭州",
      type: "纸张",
      cost: "20",
    },
    {
      province: "浙江",
      city: "舟山",
      type: "笔",
      cost: "1.7",
    },
    {
      province: "浙江",
      city: "舟山",
      type: "纸张",
      cost: "0.12",
    },
    {
      province: "吉林",
      city: "长春",
      type: "笔",
      cost: "10",
    },
    {
      province: "吉林",
      city: "白山",
      type: "笔",
      cost: "9",
    },
    {
      province: "吉林",
      city: "长春",
      type: "纸张",
      cost: "3",
    },
    {
      province: "吉林",
      city: "白山",
      type: "纸张",
      cost: "1",
    }
  ]
};

2. 配置项准备

const s2Options = {
  width: 600,
  height: 480
}

3. 渲染

<div id="container" />

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

async function bootstrap() {
  const container = document.getElementById('container');

  const s2 = new PivotSheet(container, s2DataConfig, s2Options);

  await s2.render(); // 返回 Promise
}

bootstrap();

4. 结果

`React` 版本 @antv/s2-react

S2 提供了开箱即用的 React 版本表格组件, 帮助开发者快速满足业务看数分析需求。还有丰富的配套分析组件,

版本依赖

"peerDependencies": {
  "@antv/s2": "^2.0.0",
  "react": ">=16.9.0",
  "react-dom": ">=16.9.0"
}

使用

import React from 'react';
import { SheetComponent } from '@antv/s2-react';
import '@antv/s2-react/dist/s2-react.min.css';

const App = () => {
  return (
    <SheetComponent
      dataCfg={s2DataConfig}
      options={s2Options}
    />
  )
}

📊 查看 React 版本透视表 demo。

`React` 版本分析组件 @antv/s2-react-components

S2 提供了配套的分析组件, 可以和 @antv/s2 或 @antv/s2-react 组合使用。

版本依赖

"peerDependencies": {
  "@ant-design/icons": ">=4.7.0",
  "@antv/s2": "^2.0.0",
  "antd": ">=4.16.13",
  "react": ">=16.9.0",
  "react-dom": ">=16.9.0"
}

使用

import React from 'react';
import { AdvancedSort } from '@antv/s2-react-components';
import '@antv/s2-react-components/dist/s2-react-components.min.css';

const App = () => {
  return (
    <AdvancedSort />
  )
}

📊 前往进阶教程 - 分析组件了解更多。

`Vue3` 版本 @antv/s2-vue 停止维护

注意

S2 同时也提供了开箱即用的 Vue3 版本表格组件，帮助开发者快速满足业务看数分析需求。

版本依赖

"peerDependencies": {
  "@antv/s2": "^2.0.0",
  "ant-design-vue": "^3.2.0",
  "vue": ">=3.x"
}

使用

// App.vue
<script lang="ts">
import type { S2DataConfig, S2Options } from '@antv/s2';
import { SheetComponent } from '@antv/s2-vue';
import { defineComponent, onMounted, reactive, ref, shallowRef } from 'vue';
import "@antv/s2-vue/dist/s2-vue.min.css";

export default defineComponent({
  setup() {
    // dataCfg 数据字段较多，建议使用 shallow, 如果有数据更改直接替换整个对象
    const dataCfg = shallowRef(s2DataConfig);
    const options: S2Options = reactive(s2Options);

    return {
      dataCfg,
      options,
    };
  },

  components: {
    SheetComponent,
  },
});
</script>

<template>
  <SheetComponent :dataCfg="dataCfg" :options="options" />
</template>

渲染组件

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

注意事项

Vue3 版本的 分析组件 如：导出, 下钻, Tooltip 等组件基于 ant-design-vue@3.x 组件库开发，如需使用，需要额外安装，并引入对应样式。

pnpm add ant-design-vue@3.x

import "@antv/s2-vue/dist/s2-vue.min.css";

📊 查看 Vue3 版本透视表 demo。

TypeScript

S2 使用 TypeScript 开发，提供完整的类型定义文件，配合 VS Code 等编辑器可以获得良好的类型提示。

⌨️ 本地开发

跃跃欲试想贡献？

查看贡献指南

S2 使用 pnpm 作为包管理器

git clone git@github.com:antvis/S2.git

cd S2

# 切换到 2.x 分支
git checkout next

# 安装依赖
pnpm install # 或者 pnpm bootstrap

# 打包
pnpm build

# 调试 s2-core
pnpm core:start

# 调试 s2-react 和 s2-core（推荐）
pnpm core:build-esm # 首次运行需要先执行一次（安装依赖后自动执行）
pnpm react:playground

# 调试 s2-react-components
pnpm react-components:playground

# 调试 s2-vue 和 s2-core
pnpm vue:playground

# 单元测试
pnpm test
pnpm core:test
pnpm react:test

# 更新单元格测试快照
pnpm core:test -- -u
pnpm react:test -- -u

# 代码风格和类型检测
pnpm lint

# 本地启动官网
pnpm build # 首次运行官网需要先执行一次
pnpm site:start

快速上手

📦 安装

使用基础版本 @antv/s2

使用 React 版本 @antv/s2-react

使用 React 版本分析组件 @antv/s2-react-components

使用 Vue3 版本 @antv/s2-vue 停止维护

注意

浏览器引入 不推荐

🔨 使用

版本

提示

如何获取新版本发布通知？

基础类

1. 数据 (data) 准备

2. 配置项准备

3. 渲染

4. 结果

React 版本 @antv/s2-react

版本依赖

使用

React 版本分析组件 @antv/s2-react-components

版本依赖

使用

Vue3 版本 @antv/s2-vue 停止维护

注意

版本依赖

使用

渲染组件

注意事项

TypeScript

⌨️ 本地开发

跃跃欲试想贡献？

浏览器引入不推荐

`React` 版本 @antv/s2-react

`React` 版本分析组件 @antv/s2-react-components

`Vue3` 版本 @antv/s2-vue 停止维护