Skip to content

antvis/S2

Folders and files

NameName
Last commit message
Last commit date
Mar 15, 2024
Jan 16, 2023
Apr 26, 2024
Apr 15, 2024
Feb 5, 2024
May 31, 2022
Oct 31, 2023
Mar 2, 2023
Mar 8, 2024
Sep 27, 2021
Oct 31, 2023
Sep 8, 2021
Jul 12, 2021
Jan 18, 2024
Oct 31, 2023
Sep 14, 2021
Mar 8, 2024
Mar 8, 2024
Jan 18, 2024
Mar 8, 2024
Mar 8, 2024
Oct 31, 2023
Mar 11, 2024
Mar 22, 2024
Jan 9, 2023
Oct 31, 2023
May 25, 2022

Repository files navigation

language 简体中文 | English

S2

开箱即用的多维可视分析表格。

npm latest version next version ci test status test coverage release date

npm bundle size GitHub discussions issues helper License: MIT@AntV contributors issues closed pr welcome

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

🏠 官网

homepage

✨ 特性

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

📦 安装

$ npm install @antv/s2@next --save
# yarn add @antv/s2@next
# pnpm add @antv/s2@next

🔨 使用

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: '0.5',
    },
    {
      province: '吉林',
      city: '长春',
      type: '笔',
      price: '8',
    },
    {
      province: '吉林',
      city: '白山',
      type: '笔',
      price: '9',
    },
    {
      province: '吉林',
      city: '长春',
      type: ' 纸张',
      price: '3',
    },
    {
      province: '吉林',
      city: '白山',
      type: '纸张',
      price: '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. 结果

result

📦 版本

Package Latest Beta Alpha Next Size Download
@antv/s2 latest beta alpha next size download
@antv/s2-react latest beta alpha next size download
@antv/s2-vue latest beta alpha next size download

🖥️ 兼容环境

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

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

🙋‍♂️ 问题反馈

有任何问题请严格按照模版 提交 Issue, 在这之前强烈建议阅读 ⚠️ 提 Issue 前必读》

⌨️ 本地开发

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

cd S2

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

# 打包
pnpm build

# 调试 s2-core
pnpm core:start

# 调试 s2-react
pnpm react:playground

# 调试 s2-vue
pnpm vue:playground

# 单元测试
pnpm test

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

# 本地启动官网
pnpm site:start

🤝 参与贡献

请查看 贡献指南

👁️ 项目洞察

Alt

📧 联系我们

群聊仅供交流,不提供任何答疑,有任何问题请 提交 Issue.

DingTalk

👬 贡献者们

https://github.com/antvis/s2/graphs/contributors

👤 作者

@AntV

📄 License

MIT@AntV