JSPM

@antv/s2

0.1.2
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 12120
  • Score
    100M100P100Q135847F
  • License MIT

effective spreadsheet render core lib

Package Exports

  • @antv/s2

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@antv/s2) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

简体中文 | English

@antv/s2

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

Version npm bundle size License: MIT@AntV

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

✨ 特性

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

📦 安装

$ npm install @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 { SpreadSheet } from '@antv/s2';
import '@antv/s2/dist/s2.min.css'

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

const s2 = new SpreadSheet(container, s2DataConfig, s2options)

s2.render()

4. 结果

result

Author

👤 @AntV

🤝 参与贡献

$ git clone git@github.com:antvis/S2.git

$ cd s2

$ npm run bootstrap

$ npm run core:start

📄 License

MIT@AntV.