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

    0.2.1 • Public • Published

    简体中文 | English

    [WIP]S2

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

    🚧 激情建设中。.. 详见 Roadmap for S2

    Version npm bundle size License: MIT@AntV

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

    特性

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

    📦 安装

    yarn 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: 800,
      height: 600,
    }

    3. 渲染

    <div id="container"></div>
    import { PivotSheet } from '@antv/s2';
    import '@antv/s2/dist/s2.min.css'
    
    const container = document.getElementById('container');
    
    const s2 = new PivotSheet(container, s2DataConfig, s2options)
    
    s2.render()

    4. 结果

    result

    Author

    👤 @AntV

    🤝 参与贡献

    git clone git@github.com:antvis/S2.git
    
    cd s2
    
    yarn bootstrap
    
    yarn core:start

    📄 License

    MIT@AntV.

    Install

    npm i @antv/s2

    DownloadsWeekly Downloads

    283

    Version

    0.2.1

    License

    MIT

    Unpacked Size

    8.64 MB

    Total Files

    568

    Last publish

    Collaborators

    • freestyle21
    • soundquiet
    • elaine.q.10
    • sturuby
    • lviser
    • 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