开箱即用的多维可视分析表格。
S2 是 AntV 在多维交叉分析表格领域的解决方案，完全基于数据驱动的方式。通过提供底层能力库，基础组件，业务场景组件以及自由扩展的能力，让开发者基于自身场景自由选择，既能开箱即用，又能自由发挥。
- 多维交叉分析： 告别单一分析维度，全面拥抱任意维度的自由组合分析。
- 高性能：能支持全量百万数据下
<8s渲染，也能通过局部下钻来实现秒级渲染。 - 高扩展性：支持任意的自定义扩展（包括但不局限于布局，样式，交互，数据 hook 流等）。
- 开箱即用：提供不同分析场景下开箱即用的
React,Vue3版本表组件及配套分析组件，只需要简单的配置即可轻松实现复杂场景的表渲染。 - 可交互：支持丰富的交互形式（单选、圈选、行选、列选、冻结行头、宽高拖拽，自定义交互等）
$ npm install @antv/s2 --save
# yarn add @antv/s2 --save
# pnpm install @antv/s2 --saves2DataConfig
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',
},
],
};const s2Options = {
width: 600,
height: 600,
}<div id="container"></div>import { PivotSheet } from '@antv/s2';
const container = document.getElementById('container');
const s2 = new PivotSheet(container, s2DataConfig, s2Options);
s2.render();
| Package | Latest | Beta | Alpha | Next | Size | Download |
|---|---|---|---|---|---|---|
| @antv/s2 | |
 |
 |
|
|
|
| @antv/s2-react |  |
 |
 |
 |
 |
 |
| @antv/s2-vue |  |
 |
 |
 |
 |
 |
S2 使用 pnpm 作为包管理器
git clone [email protected]: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
有任何问题请严格按照模版 提交 Issue 或在 Discussions 提问。
MIT@AntV
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "github-actions[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent