S2

❓ 什么是 S2

S2 是一个面向可视分析领域的数据驱动的表可视化引擎。S 取自于 SpreadSheet 的两个 S，2 代表了透视表中的行列两个维度。旨在提供美观、易用、高性能、易扩展的多维表格。

demos

✨ 特性

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

📦 安装

使用基础版本 @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

🔨 使用

1. 数据准备

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",
    }
  ],
  meta: [
    {
      field: 'price',
      name: '价格',
    },
    {
      field: 'province',
      name: '省份',
    },
    {
      field: 'city',
      name: '城市',
    },
    {
      field: 'type',
      name: '类别',
    },
    {
      field: 'sub_type',
      name: '子类别',
    },
  ]
};

2. 配置项准备

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

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(); // 异步渲染
}

bootstrap();

4. 结果

📦 版本

提示

创建 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

🖥️ 浏览器兼容性

Edge	Firefox	Chrome	Safari
Edge	last 2 versions	last 2 versions	last 2 versions

@antv/s2-react 和 @antv/s2-vue 见官方 React JavaScript 环境要求和 Vite 浏览器兼容性

🙋‍♂️ 问题反馈

如果你遇到了问题，或者对 Issues 和 Discussions 列表的问题感兴趣，可以直接认领并尝试修复，帮助 S2 变得更好，期待在贡献者列表里看见你的头像。

请严格按照模版提交 Issue 或在 Discussions 提问，在这之前强烈建议阅读《⚠️ 提 Issue 前必读》

⌨️ 本地开发

跃跃欲试想贡献？

查看贡献指南

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

🤝 参与贡献

S2 非常需要你的共建，请阅读贡献指南后提交 PR.

👁️ 项目洞察

Alt

👬 贡献者们

👤 作者

@AntV

📄 License

MIT@AntV

简介