简体中文 | English
开箱即用的多维可视分析表格。
S2 是 AntV 在多维交叉分析表格领域的解决方案,完全基于数据驱动的方式。通过提供底层能力库,基础组件,业务场景组件以及自由扩展的能力,让开发者基于自身场景自由选择,既能开箱即用,又能自由发挥。
- 多维交叉分析: 告别单一分析维度,全面拥抱任意维度的自由组合分析。
- 高性能:能支持全量百万数据下
<8s渲染,也能通过局部下钻来实现秒级渲染。 - 高扩展性:支持任意的自定义扩展(包括但不局限于布局,样式,交互,数据 hook 流等)。
- 开箱即用:提供不同分析场景下开箱即用的
React,Vue3版本表组件及配套分析组件,只需要简单的配置即可轻松实现复杂场景的表渲染。 - 可交互:支持丰富的交互形式(单选、圈选、行选、列选、冻结行头、宽高拖拽,自定义交互等)
$ npm install @antv/s2 --save # yarn add @antv/s2 --save # pnpm install @antv/s2 --save
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', }, ], };
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 | latest | beta | alpha | next | size | download |
| @antv/s2-react | latest | beta | alpha | next | size | download |
| @antv/s2-vue | latest | beta | alpha | next | size | download |
S2 使用 pnpm 作为包管理器
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
有任何问题请严格按照模版 提交 Issue 或在 Discussions 提问。
https://github.com/antvis/s2/graphs/contributors
MIT@AntV