简体中文 | [English](./README.en-US.md)
S2
S2 是 AntV 在多维交叉分析表格领域的解决方案，完全基于数据驱动的方式。通过提供底层能力库，基础组件，业务场景组件以及自由扩展的能力，让开发者基于自身场景自由选择，既能开箱即用，又能自由发挥。
## 🏠 官网
* [主页](https://s2.antv.antgroup.com)
* [Demo 示例](https://s2.antv.antgroup.com/examples)
## ✨ 特性
1. 多维交叉分析：告别单一分析维度，全面拥抱任意维度的自由组合分析。
2. 高性能：能支持全量百万数据下 `<8s` 渲染，也能通过局部下钻来实现秒级渲染。
3. 高扩展性：支持任意的自定义扩展（包括但不局限于布局，样式，交互，数据 hook 流等）。
4. 开箱即用：提供不同分析场景下开箱即用的 `React`, `Vue3` 版本表组件及配套分析组件，只需要简单的配置即可轻松实现复杂场景的表渲染。
5. 可交互：支持丰富的交互形式（单选、圈选、行选、列选、冻结行头、宽高拖拽，自定义交互等）
## 📦 安装
```bash
$ pnpm add @antv/s2
# yarn add @antv/s2
# npm install @antv/s2 --save
```
## 🔨 使用
### 1. 数据准备
s2DataConfig
```ts
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. 配置项准备
```ts
const s2Options = {
width: 600,
height: 600
}
```
### 3. 渲染
```html
```
```ts
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. 结果
### 📦 版本
| 包名 | 稳定版 | 包大小 | 下载量 |
| -------- | ------ | --------- | ------ |
| [@antv/s2](https://github.com/antvis/S2/tree/next/packages/s2-core) |  |  |  |
| [@antv/s2-react](https://github.com/antvis/S2/tree/next/packages/s2-react) |  |  |  |
| [@antv/s2-react-components](https://github.com/antvis/S2/tree/next/packages/s2-react-components) |  |  |  |
| [@antv/s2-vue](https://github.com/antvis/S2/tree/next/packages/s2-vue)|  |  |  |
## 问题反馈
如果你遇到了问题，或者对 [Issues](https://github.com/antvis/S2/issues) 和 [Discussions](https://github.com/antvis/S2/discussions) 列表的问题感兴趣，**可以直接认领并尝试修复**，帮助 S2 变得更好，期待在 [贡献者列表](https://github.com/antvis/S2/graphs/contributors) 里看见你的头像。
请严格按照模版 [提交 Issue](https://github.com/antvis/S2/issues/new/choose) 或在 [Discussions](https://github.com/antvis/S2/discussions) 提问，在这之前强烈建议阅读 [《⚠️ 提 Issue 前必读》](https://github.com/antvis/S2/issues/1904)
## 🤝 参与贡献 & ⌨️ 本地开发
S2 非常需要你的共建，请阅读 [贡献指南](https://s2.antv.antgroup.com/manual/contribution) 后提交 PR.
## 👁️ 项目洞察
## 👬 贡献者们
## 👤 作者
[**@AntV**](https://github.com/orgs/antvis/people)
## 📄 License
MIT@[AntV](https://github.com/antvis)
