Skip to content

Commit

Permalink
docs: 将 S2Event 提取到 API 文档中, 方便查看 (#1618)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lijinke666
lijinke666 authored Jul 29, 2022
1 parent f40a711 commit 5689ae3
Show file tree
Hide file tree
Showing 6 changed files with 153 additions and 109 deletions.
2 changes: 1 addition & 1 deletion s2-site/docs/api/general/S2DataConfig.zh.md
View file
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
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
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
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
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

0 comments on commit 5689ae3

Please sign in to comment.