antv-s2 入门

S2 是一个面向可视分析领域的数据驱动的表可视化引擎。"S" 取自于 "SpreadSheet" 的两个 "S"，"2" 代表了透视表中的行列两个维度。旨在提供美观、易用、高性能、易扩展的多维表格。

# 简介

# 使用方法

# 安装


npm install @antv/s2

# React
npm install @antv/s2 @antv/s2-react

# Vue3
npm install @antv/s2 @antv/s2-vue

1
2
3
4
5
6
7
8
9

# 本版介绍

创建 S2 表格有三种方式，基础类版本 (s2-core) 和基于 core 层封装的 React 和 Vue3 版本

core 版本：@antv/s2
React 版本：@antv/s2-react
Vue3 版本：@antv/s2-vue

# 基本使用

数据准备S2DataConfig 官网 (opens new window)

参数	说明	类型	必选
data	原始数据	Data[]	✓
fields	维度指标	Fields	✓
totalData	总计/小计数据	Data[]
meta	字段元数据，可配置字段别名和数值格式化	Meta[]
sortParams	排序参数配置	SortParams

配置项准备S2Options 官网 (opens new window)

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

1
2
3
4

渲染

import { PivotSheet } from "@antv/s2";

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

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

s2.render();

1
2
3
4
5
6
7

主题配置官网 (opens new window)
事件绑定官网 (opens new window)

# 表格形态

透视表PivotSheet
明细表TableSheet

# 基础类配置

render: 渲染表格
setDataCfg: 更新数据配置
setOptions: 更新表格配置
setThemeCfg: 更新主题配置（含主题 schema, 色板，主题名）
on: 绑定数据
emit: 解绑数据

s2.on(S2Event.ROW_CELL_CLICK, (event) => {
  console.log("rowCellClick", event);
});

1
2
3

名称	事件名	描述
展开树状结构	S2Event.ROW_CELL_COLLAPSE_TREE_ROWS	树状结构下，行头单元格展开
点击	S2Event.ROW_CELL_CLICK	行头单元格点击
双击	S2Event.ROW_CELL_DOUBLE_CLICK	行头单元格双击
右键	S2Event.ROW_CELL_CONTEXT_MENU	行头单元格右键
悬停	S2Event.ROW_CELL_HOVER	行头单元格悬停

# 交互方法

Interaction基本配置

参数	说明	类型	默认值
customInteractions	自定义交互	CustomInteraction[]
scrollSpeedRatio	用于控制滚动速率，分水平和垂直两个方向，默认为 1	ScrollSpeedRatio
autoResetSheetStyle	用于控制点击表格外区域和按下 esc 键时是否重置交互状态	boolean	true
resize	用于控制 resize 热区是否显示 boolean	ResizeInteractionOptions	true
brushSelection	是否允许单元格（包含行头，列头，数值单元格）刷选。行头，列头刷选只支持透视表 boolean	BrushSelection	true
multiSelection	是否允许多选（包含行头，列头，数值单元格）	boolean	true
rangeSelection	是否允许区间快捷多选	boolean	true

s2.interaction.reset();

reset: 重置所有交互
setState: 设置状态

# 单元格基础类

参数	说明	类型
getMeta	获取单元格元数据	() => ViewMeta
setMeta	设置单元格元数据	(vieMeta: ViewMeta) => void
getIconStyle	获取单元格图标样式	() => IconTheme
getStyle	获取单元格样式	() => DefaultCellTheme
getTextAndIconPosition	获取单元格文本和图标的位置	(iconCount: number) => TextAndIconPosition
getActualText	获取绘制的文本	() => string
cellType	单元格类型	CellTypes
initCell	初始化单元格	() => void

上次更新: 2024/01/18, 10:44:15

← antv-g2Plot antv-l7Plot→