Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: 将 S2Event 提取到 API 文档中, 方便查看 #1618

Merged
merged 1 commit into from
Jul 29, 2022
Merged

docs: 将 S2Event 提取到 API 文档中, 方便查看 #1618

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion s2-site/docs/api/general/S2DataConfig.zh.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ redirect_from:
- /zh/docs/api
---

数据映射，description
表格数据配置

| 参数 | 说明 | 类型 | 默认值 | 必选 |
| :------------- | :----------------- | :--------- | :----- | :--- |
Expand Down
6 changes: 6 additions & 0 deletions s2-site/docs/api/general/S2Event.en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
title: S2Event
order: 4
---

`markdown:docs/api/general/S2Event.en.md`
101 changes: 101 additions & 0 deletions s2-site/docs/api/general/S2Event.zh.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
---
title: S2Event
order: 4
redirect_from:
- /zh/docs/api
---

表格事件列表，可以根据实际需要，监听所需事件，实现自定义业务。[详情](https://github.com/antvis/S2/blob/master/packages/s2-core/src/common/constant/events/basic.ts)

```ts
s2.on(S2Event.ROW_CELL_CLICK, () => {
...
});
```

### 行头

| 名称 | 事件名 | 描述 |
| :----------- | :------------------------------------ | :------------------------- |
| 展开树状结构 | `S2Event.ROW_CELL_COLLAPSE_TREE_ROWS` | 树状结构下，行头单元格展开 |
| 点击 | `S2Event.ROW_CELL_CLICK` | 行头单元格点击 |
| 双击 | `S2Event.ROW_CELL_DOUBLE_CLICK` | 行头单元格双击 |
| 右键 | `S2Event.ROW_CELL_CONTEXT_MENU` | 行头单元格右键 |
| 悬停 | `S2Event.ROW_CELL_HOVER` | 行头单元格悬停 |
| 鼠标按下 | `S2Event.ROW_CELL_MOUSE_DOWN` | 行头单元格鼠标按下 |
| 鼠标移动 | `S2Event.ROW_CELL_MOUSE_MOVE` | 行头单元格鼠标移动 |
| 鼠标松开 | `S2Event.ROW_CELL_MOUSE_UP` | 行头单元格鼠标松开 |
| 滚动 | `S2Event.ROW_CELL_SCROLL` | 行头单元格滚动 |

### 列头

| 名称 | 事件名 | 描述 |
| :------- | :------------------------------ | :----------------- |
| 点击 | `S2Event.COL_CELL_CLICK` | 列头单元格点击 |
| 双击 | `S2Event.COL_CELL_DOUBLE_CLICK` | 列头单元格双击 |
| 右键 | `S2Event.COL_CELL_CONTEXT_MENU` | 列头单元格右键 |
| 悬停 | `S2Event.COL_CELL_HOVER` | 列头单元格悬停 |
| 鼠标按下 | `S2Event.COL_CELL_MOUSE_DOWN` | 列头单元格鼠标按下 |
| 鼠标移动 | `S2Event.COL_CELL_MOUSE_MOVE` | 列头单元格鼠标移动 |
| 鼠标松开 | `S2Event.COL_CELL_MOUSE_UP` | 列头单元格鼠标松开 |

### 数值单元格

| 名称 | 事件名 | 描述 |
| :------------- | :----------------------------------- | :-------------------------------------- |
| 点击 | `S2Event.DATA_CELL_CLICK` | 数值单元格点击 |
| 双击 | `S2Event.DATA_CELL_DOUBLE_CLICK` | 数值单元格双击 |
| 右键 | `S2Event.DATA_CELL_CONTEXT_MENU` | 数值单元格右键 |
| 悬停 | `S2Event.DATA_CELL_HOVER` | 数值单元格悬停 |
| 鼠标按下 | `S2Event.DATA_CELL_MOUSE_DOWN` | 数值单元格鼠标按下 |
| 鼠标移动 | `S2Event.DATA_CELL_MOUSE_MOVE` | 数值单元格鼠标移动 |
| 鼠标松开 | `S2Event.DATA_CELL_MOUSE_UP` | 数值单元格鼠标松开 |
| 趋势 icon 点击 | `S2Event.DATA_CELL_TREND_ICON_CLICK` | 数值单元格 tooltip 里面的趋势 icon 点击 |
| 刷选 | `S2Event.DATA_CELL_BRUSH_SELECTION` | 数值单元格刷选 |

### 角头

| 名称 | 事件名 | 描述 |
| :------- | :--------------------------------- | :----------------- |
| 点击 | `S2Event.CORNER_CELL_CLICK` | 角头单元格点击 |
| 双击 | `S2Event.CORNER_CELL_DOUBLE_CLICK` | 角头单元格双击 |
| 右键 | `S2Event.CORNER_CELL_CONTEXT_MENU` | 角头单元格右键 |
| 悬停 | `S2Event.CORNER_CELL_HOVER` | 角头单元格悬停 |
| 鼠标按下 | `S2Event.CORNER_CELL_MOUSE_DOWN` | 角头单元格鼠标按下 |
| 鼠标移动 | `S2Event.CORNER_CELL_MOUSE_MOVE` | 角头单元格鼠标移动 |
| 鼠标松开 | `S2Event.CORNER_CELL_MOUSE_UP` | 角头单元格鼠标松开 |

### 布局

| 名称 | 事件名 | 描述 |
| :----------------------- | :--------------------------------- | :------------------------------------------ |
| 单元格调整 | `S2Event.LAYOUT_RESIZE` | 单元格宽高发生改变 |
| 调整单元格大小时鼠标按下 | `S2Event.LAYOUT_RESIZE_MOUSE_DOWN` | 调整单元格大小鼠标按下，目前仅 行/列 头有效 |
| 调整单元格大小时鼠标移动 | `S2Event.LAYOUT_RESIZE_MOUSE_MOVE` | 调整单元格大小鼠标移动，目前仅 行/列 头有效 |
| 调整单元格大小时鼠标松开 | `S2Event.LAYOUT_RESIZE_MOUSE_UP` | 调整单元格大小鼠标松开，目前仅 行/列 头有效 |
| 行头宽度改变 | `S2Event.LAYOUT_RESIZE_ROW_WIDTH` | |
| 行头高度改变 | `S2Event.LAYOUT_RESIZE_ROW_HEIGHT` | |
| 列头宽度改变 | `S2Event.LAYOUT_RESIZE_COL_WIDTH` | |
| 列头高度改变 | `S2Event.LAYOUT_RESIZE_COL_HEIGHT` | |
| 树状结构宽度改变 | `S2Event.LAYOUT_RESIZE_TREE_WIDTH` | 树状模式下，单元格宽度发生改变时触发 |
| 列头展开 | `S2Event.LAYOUT_COLS_EXPANDED` | 列头展开时触发 |
| 列头隐藏 | `S2Event.LAYOUT_COLS_HIDDEN` | 列头隐藏时触发 |
| 单元格虚拟滚动 | `S2Event.LAYOUT_CELL_SCROLL` | 已废弃，请使用 `S2Event.GLOBAL_SCROLL` 替代 |

### 全局

| 名称 | 事件名 | 描述 |
| :-------- | :--------------------------------- | :------------------------------------------- |
| 键盘按下 | `S2Event.GLOBAL_KEYBOARD_DOWN` | 键盘按下 |
| 键盘松开 | `S2Event.GLOBAL_KEYBOARD_UP` | 键盘松开 |
| 复制 | `S2Event.GLOBAL_COPIED` | 对选中的单元格复制 |
| 鼠标松开 | `S2Event.GLOBAL_MOUSE_UP` | 图表区域鼠标松开 |
| 点击 | `S2Event.GLOBAL_CLICK` | 图表区域点击 |
| 右键 | `S2Event.GLOBAL_CONTEXT_MENU` | 图表区域按下右键 |
| 选中 | `S2Event.GLOBAL_SELECTED` | 选中单元格时，如：刷选，多选，单选 |
| 悬停 | `S2Event.GLOBAL_HOVER` | 鼠标悬停在单元格 |
| 重置 | `S2Event.GLOBAL_RESET` | 点击空白处，按下 Esc 键 重置交互样式时 |
| 链接跳转 | `S2Event.GLOBAL_LINK_FIELD_JUMP` | 点击行列头被编辑为链接字段的文本时 |
| icon 点击 | `S2Event.GLOBAL_ACTION_ICON_CLICK` | 单元格右侧的操作 icon 点击时，比如：排序图标 |
| icon 悬停 | `S2Event.GLOBAL_ACTION_ICON_HOVER` | 单元格右侧的操作 icon 悬停时，比如：排序图标 |
| 滚动 | `S2Event.GLOBAL_SCROLL` | 表格滚动 （含数值和行头单元格） |
2 changes: 2 additions & 0 deletions s2-site/docs/api/general/S2Options.zh.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ title: S2Options
order: 1
---

表格参数配置

| 参数 | 类型 | 必选 | 默认值 | 功能描述 |
| :-- | :-- | :-: | :-- | :-- | --- |
| width | `number` | | 600 | 表格宽度 |
Expand Down
20 changes: 10 additions & 10 deletions s2-site/docs/api/graphic.zh.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,17 @@ redirect_from:
- /en/docs/api
---

S2 使用 [AntV/G](https://g.antv.vision/zh/docs/guide/introduce) 作为绘图引擎。一些图形的样式配置，如单元格的 `fill`属性，`stroke`属性，以及绘制字体的`fontFamily`和`fontSize`等，都是直接透传 [AntV/G 的绘图属性](https://g.antv.vision/zh/docs/api/shape/attrs)。
S2 使用 [AntV/G](https://g.antv.vision/zh/docs/guide/introduce) 作为绘图引擎。一些图形的样式配置，如单元格的 `fill` 属性，`stroke` 属性，以及绘制字体的 `fontFamily` 和 `fontSize` 等，都是直接透传 [AntV/G 的绘图属性](https://g.antv.vision/zh/docs/api/shape/attrs)。

这里对 S2 常用的绘图属性进行简单介绍：

## 配置图形样式

| 属性名 | 类型 | 功能描述 |
| ------------- | --------------- | ------------------------------------------------------------------------------------------------------------ |
| fill | `string` | 图形背景的填充颜色，支持 [渐变色配置](#配置渐变色) ，[纹理配置](#配置纹理) |
| fill | `string` | 图形背景的填充颜色，支持 [渐变色配置](#配置渐变色） ，[纹理配置](#配置纹理) |
| fillOpacity | `number` | 图形背景的填充透明度 |
| stroke | `string` | 图形描边，支持 [渐变色配置](#配置渐变色) ，[纹理配置](#配置纹理) |
| stroke | `string` | 图形描边，支持 [渐变色配置](#配置渐变色） ，[纹理配置](#配置纹理) |
| lineWidth | `number` | 图形描边宽度 |
| lineDash | `[number,number]` | 图形描边的虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离 |
| lineOpacity | `number` | 图形描边描边透明度 |
Expand All @@ -30,7 +30,7 @@ S2 使用 [AntV/G](https://g.antv.vision/zh/docs/guide/introduce) 作为绘图

| 属性名 | 类型 | 功能描述 |
| ------------- | ----------------- | ------------------------------------------------------------------------------------------------------ |
| stroke | `string` | 线段颜色，支持 [渐变色配置](#配置渐变色) ，[纹理配置](#配置纹理) |
| stroke | `string` | 线段颜色，支持 [渐变色配置](#配置渐变色） ，[纹理配置](#配置纹理) |
| lineWidth | `number` | 线段宽度 |
| lineDash | `[number,number]` | 线段虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离|
| opacity | `number` | 线段透明度 |
Expand All @@ -50,9 +50,9 @@ S2 使用 [AntV/G](https://g.antv.vision/zh/docs/guide/introduce) 作为绘图
| lineHeight | `number` | 文字的行高 |
| textAlign | `center` \| `left` \| `right` \| `start` \| `end` | 设置文本内容的对齐方式 |
| textBaseline | `top` \| `middle` \| `bottom` \| `alphabetic` \| `hanging` | 设置在绘制文本时使用的当前文本基线|
| fill | `string` | 文字填充颜色，支持 [渐变色配置](#配置渐变色) ，[纹理配置](#配置纹理) |
| fill | `string` | 文字填充颜色，支持 [渐变色配置](#配置渐变色） ，[纹理配置](#配置纹理) |
| fillOpacity | `number` | 文字填充透明度 |
| stroke | `string` | 文字描边，支持 [渐变色配置](#配置渐变色) ，[纹理配置](#配置纹理) |
| stroke | `string` | 文字描边，支持 [渐变色配置](#配置渐变色） ，[纹理配置](#配置纹理) |
| lineWidth | `number` | 文字描边宽度 |
| lineDash | `[number,number]` | 描边的虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离 |
| lineOpacity | `number` | 描边透明度 |
Expand All @@ -71,7 +71,7 @@ S2 提供线性渐变，环形渐变两种形式

<img alt="linear" src="https://gw.alipayobjects.com/zos/rmsportal/ieWkhtoHOijxweuNFWdz.png" width="600">

* `l` 表示使用线性渐变，即*linear gradient*，绿色的字体为变量，可自定义
* `l` 表示使用线性渐变，即 *linear gradient*，绿色的字体为变量，可自定义
* 颜色变量可采用 16 进制或者 rgb(a) 形式

示例：
Expand All @@ -89,7 +89,7 @@ fill: `l(0) 0:#95F0FF 1:#3A9DBF`,

<img alt="radial" src="https://gw.alipayobjects.com/zos/rmsportal/qnvmbtSBGxQlcuVOWkdu.png" width="600">

* `r` 表示使用放射状渐变，即*radial gradient*，绿色的字体为变量，可自定义
* `r` 表示使用放射状渐变，即 *radial gradient*，绿色的字体为变量，可自定义
* 圆的 `x`， `y`， `r` 值均为相对值，0 至 1 范围
* 颜色变量可采用 16 进制或者 rgb(a) 形式

Expand All @@ -110,8 +110,8 @@ fill: 'r(0.5, 0.5, 1) 0:#ffffff 0.5:#1890ff';

<img alt="radial" src="https://gw.alipayobjects.com/zos/rmsportal/NjtjUimlJtmvXljsETAJ.png" width="600">

* `p`表示使用纹理，即*pattern*，绿色的字体为变量，可自定义
* 重复方式有以下4种：
* `p`表示使用纹理，即 *pattern*，绿色的字体为变量，可自定义
* 重复方式有以下 4 种：
* `a`: 该模式在水平和垂直方向重复
* `x`: 该模式只在水平方向重复
* `y`: 该模式只在垂直方向重复
Expand Down
Loading