@antv/s2
TypeScript icon, indicating that this package has built-in type declarations

1.55.0 • Public • Published

简体中文 | English

S2

数据驱动的多维分析表格。

npm Version Version ci test status Coverage release-date

npm bundle size Discussions issues-helper License: MIT@AntV

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

🏠 官网

homepage

✨ 特性

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

📦 安装

$ npm install @antv/s2
# yarn add @antv/s2
# pnpm add @antv/s2

🔨 使用

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',
    },
  ],
};

2. 配置项准备

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

3. 渲染

<div id="container"></div>
import { PivotSheet } from '@antv/s2';

const container = document.getElementById('container');

const s2 = new PivotSheet(container, s2DataConfig, s2Options);

s2.render();

4. 结果

result

📦 Packages

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

👤 Author

@AntV

🤝 参与贡献

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 提问。

👬 Contributors

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

📄 License

MIT@AntV

Package Sidebar

Install

npm i @antv/s2

Weekly Downloads

2,161

Version

1.55.0

License

MIT

Unpacked Size

15.5 MB

Total Files

13

Last publish

Collaborators

  • lvisei
  • yisi.wang
  • basketduck
  • biupiubiupiu
  • flash1
  • dreammy23
  • laixingui.lxg
  • zhangjunjie-loki
  • rainy25ghz
  • zeyuwang
  • yanxiong
  • susiwen8
  • freestyle21
  • soundquiet
  • elaine.q.10
  • sturuby
  • sakuya223
  • serializedowen
  • xdzhao
  • yangzhanmei
  • wjgogogo
  • leungwensen
  • dori
  • iaaron
  • yard
  • simaq
  • dxq613
  • intchous
  • susan_ann
  • jinke.li
  • lzxue
  • army8735
  • atool
  • baizn
  • dengfuping
  • neoddish
  • jeffy2012
  • zqlu
  • afc163
  • pomelo-nwu
  • kopiluwaky
  • ccnuzindex
  • panyuqi
  • bubkoo
  • zengyue
  • kasmine
  • boyu.zlj
  • l1ud0ngq1
  • newbyvector
  • winniexing
  • chenluli
  • kn9117
  • xdddst
  • semious2020
  • esora
  • nadia_liu
  • bbsqq
  • mxz96102
  • openwayne
  • pearmini
  • pddpd
  • yiqianyao
  • zhanba
  • cxxxxxn