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

docs: 完善图例文档 & 增加图表组件的示例导航 & 补充图例两个demo #2477

Merged
merged 4 commits into from
Mar 31, 2021
Merged

docs: 完善图例文档 & 增加图表组件的示例导航 & 补充图例两个demo #2477

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
502d985
docs: 完善图例文档 & 增加图表组件的示例导航 & 补充图例两个demo
visiky Mar 31, 2021
bc18e32
fix: 修复 lint 问题
visiky Mar 31, 2021
ad7ab0f
docs(component): 其他图表组件文档润色下
visiky Mar 31, 2021
1b7d39b
docs: 优化demo
visiky Mar 31, 2021
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 docs/api/components/axis.en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ order: 1

#### Axes

<img src="https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*o64XRZfivrEAAAAAAAAAAABkARQnAQ" alt="axis" class="component-img" />
![axis](https://gw.alipayobjects.com/zos/antfincdn/9%26VKKR%24IRL/53914110-1361-47f8-80c0-02d6150bdf99.png)

#### Usage

Expand Down
6 changes: 3 additions & 3 deletions docs/api/components/axis.zh.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ order: 1

🎨 前往墨者学院 [AntV 设计 | 坐标轴 Axis](https://www.yuque.com/mo-college/vis-design/twx9oi) 查看**设计指引**

#### 坐标轴组成
#### 构成元素

<img src="https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*o64XRZfivrEAAAAAAAAAAABkARQnAQ" alt="axis" class="component-img" />
![axis](https://gw.alipayobjects.com/zos/antfincdn/9%26VKKR%24IRL/53914110-1361-47f8-80c0-02d6150bdf99.png)

#### 使用方式

Expand All @@ -34,6 +34,6 @@ xAxis: {
}
```

#### 配置项 (_AxisCfg_)
#### 配置属性 - _AxisCfg_

`markdown:docs/common/axis.zh.md`
76 changes: 41 additions & 35 deletions docs/api/components/legend.en.md
View file
Open in desktop

Large diffs are not rendered by default.

82 changes: 47 additions & 35 deletions docs/api/components/legend.zh.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,25 @@
---
title: 图例 - Legend
order: 0
contributors:
[
{
author: '新茗',
github: 'visiky',
avatar: 'https://gw.alipayobjects.com/zos/antfincdn/KAeYPA3TV0/avatar.jpeg',
},
]
---

`markdown:docs/styles/component.md`

🏷️ 图例（legend）是图表的辅助元素，使用颜色、大小、形状区分不同的数据类型，用于图表中数据的筛选。

🎨 前往墨者学院 [AntV 设计 | 图例 Legend](https://www.yuque.com/mo-college/vis-design/hcs9p2) 查看**设计指引**。
🎨 前往墨者学院 [AntV 设计 | 图例 Legend](https://www.yuque.com/mo-college/vis-design/hcs9p2) 查看**设计指引**。

#### 构成元素

![legend](https://gw.alipayobjects.com/zos/antfincdn/COyXvtsGrl/f5bb4c22-f16a-422e-bfee-a9b3d0a5b1b9.png)

#### 使用方式

Expand All @@ -29,43 +41,43 @@ legend: {
}
```

#### 配置项（_LegendCfg_）

| 属性 | 类型 | 默认值 | 描述 | 适用于 |
| --- | --- | --- | --- | --- |
| layout | _string_ | horizontal | 图例的布局方式，可选项：_horizontal \| vertical_ | |
| title | _object_ | - | 图例标题配置，默认不展示。详见 [title 配置](#title) | |
| position | _string_ | - | 图例的位置。详见 [position 配置](#position) | |
| offsetX | _number_ | - | 图例 x 方向的偏移。 | |
| offsetY | _number_ | - | 图例 y 方向的偏移。 | |
| background | _object_ | - | 背景框配置项。详见 [background 配置](#background) | |
| flipPage | _boolean_ | false | 当图例项过多时是否进行分页。 | <tag color="green" text="分类图例">分类图例</tag> |
| pageNavigator | _object_ | - | 分页器的主题样式设置。 | <tag color="green" text="分类图例">分类图例</tag> |
| itemWidth | _number \| null_ | null | 图例项的宽度, 默认为 null（自动计算）。 | <tag color="green" text="分类图例">分类图例</tag> |
| itemHeight | _number \| null_ | null | 图例的高度, 默认为 null。 | <tag color="green" text="分类图例">分类图例</tag> |
| itemName | _object_ | - | 图例项 name 文本的配置。详见 [itemName 配置](#itemname) | <tag color="green" text="分类图例">分类图例</tag> |
| itemValue | _object_ | - | 图例项 value 附加值的配置项。详见 [itemValue 配置](#itemvalue)。 | <tag color="green" text="分类图例">分类图例</tag> |
| itemSpacing | _number_ | - | 控制图例项水平方向的间距 | <tag color="green" text="分类图例">分类图例</tag> |
| animate | _boolean_ | - | 是否开启动画开关。 | |
| animateOption | _object_ | - | 动画参数配置，当且仅当 animate 属性为 true，即动画开启时生效，详见 [animateOption 配置](#animateOption) | |
| label | _object_ | - | 文本的配置项。详见 [label 配置](#label) | <tag color="green" text="分类图例">分类图例</tag> |
| marker | _object_ | - | 图例项的 marker 图标的配置。 | <tag color="green" text="分类图例">分类图例</tag> |
| maxWidth | _number_ | - | 图例项最大宽度设置。 | <tag color="green" text="分类图例">分类图例</tag> |
| maxHeight | _number_ | - | 图例项最大高度设置。 | <tag color="green" text="分类图例">分类图例</tag> |
| rail | _object_ | - | 图例滑轨（背景）的样式配置项。详见 [rail 配置](#rail) | <tag color="green" text="分类图例">分类图例</tag> |
| reversed | _boolean_ | - | 是否将图例项逆序展示。 | <tag color="green" text="分类图例">分类图例</tag> |
| min | _number_ | - | 范围的最小值。 | <tag color="cyan" text="连续图例">连续图例</tag> |
| max | _number_ | - | 选择范围的最大值。 | <tag color="cyan" text="连续图例">连续图例</tag> |
| value | _number[]_ | - | 选择的值。 | <tag color="cyan" text="连续图例">连续图例</tag> |
| slidable | _boolean_ | - | 滑块是否可以滑动。 | <tag color="cyan" text="连续图例">连续图例</tag> |
| track | _object_ | - | 选择范围的色块样式配置项。详见 [track 配置](#track) | <tag color="cyan" text="连续图例">连续图例</tag> |
| handler | _object_ | - | 滑块的配置项。详见 [handler 配置](#handler) | <tag color="cyan" text="连续图例">连续图例</tag> |
| custom | _boolean_ | false | 是否为自定义图例，当该属性为 true 时，需要声明 items 属性。 | |
| items | _object[]_ | - | 用户自己配置图例项的内容。详见 [items 配置](#items) | |
#### 配置属性 - _LegendCfg_

| 属性 | 类型 | 描述 | 适用于 |
| --- | --- |--- | --- |
| layout | _string_ | 图例的布局方式，可选项：_horizontal \| vertical_ | |
| title | _object_ | 图例标题配置，默认不展示。详见 [title 配置](#title) | |
| position | _string_ | 图例的位置。详见 [position 配置](#position) | |
| offsetX | _number_ | 图例 x 方向的偏移。 | |
| offsetY | _number_ | 图例 y 方向的偏移。 | |
| background | _object_ | 背景框配置项。详见 [background 配置](#background) | |
| flipPage | _boolean_ | 当图例项过多时是否进行分页。 | <tag color="green" text="分类图例">分类图例</tag> |
| pageNavigator | _object_ | 分页器的主题样式设置。 | <tag color="green" text="分类图例">分类图例</tag> |
| itemWidth | _number \| null_ | 图例项的宽度, 默认为 null（自动计算）。 | <tag color="green" text="分类图例">分类图例</tag> |
| itemHeight | _number \| null_ | 图例的高度, 默认为 null。 | <tag color="green" text="分类图例">分类图例</tag> |
| itemName | _object_ | 图例项 name 文本的配置。详见 [itemName 配置](#itemname) | <tag color="green" text="分类图例">分类图例</tag> |
| itemValue | _object_ | 图例项 value 附加值的配置项。详见 [itemValue 配置](#itemvalue)。 | <tag color="green" text="分类图例">分类图例</tag> |
| itemSpacing | _number_ | 控制图例项水平方向的间距 | <tag color="green" text="分类图例">分类图例</tag> |
| marker | _object_ | 图例项的 marker 图标的配置。 | <tag color="green" text="分类图例">分类图例</tag> |
| maxWidth | _number_ | 图例项最大宽度设置。 | <tag color="green" text="分类图例">分类图例</tag> |
| maxHeight | _number_ | 图例项最大高度设置。 | <tag color="green" text="分类图例">分类图例</tag> |
| reversed | _boolean_ | 是否将图例项逆序展示。 | <tag color="green" text="分类图例">分类图例</tag> |
| custom | _boolean_ | 是否为自定义图例，当该属性为 true 时，需要声明 items 属性。 |<tag color="green" text="分类图例">分类图例</tag> |
| items | _object[]_ | 用户自己配置图例项的内容。详见 [items 配置](#items) | <tag color="green" text="分类图例">分类图例</tag> |
| min | _number_ | 范围的最小值。 | <tag color="cyan" text="连续图例">连续图例</tag> |
| max | _number_ | 选择范围的最大值。 | <tag color="cyan" text="连续图例">连续图例</tag> |
| label | _object_ | 文本的配置项。详见 [label 配置](#label) | <tag color="cyan" text="连续图例">连续图例</tag> |
| value | _number[]_ | 选择的值。 | <tag color="cyan" text="连续图例">连续图例</tag> |
| slidable | _boolean_ | 滑块是否可以滑动。 | <tag color="cyan" text="连续图例">连续图例</tag> |
| rail | _object_ | 图例滑轨（背景）的样式配置项。详见 [rail 配置](#rail) | <tag color="cyan" text="连续图例">连续图例</tag> |
| track | _object_ | 选择范围的色块样式配置项。详见 [track 配置](#track) | <tag color="cyan" text="连续图例">连续图例</tag> |
| handler | _object_ | 滑块的配置项。详见 [handler 配置](#handler) | <tag color="cyan" text="连续图例">连续图例</tag> |
| animate | _boolean_ | 是否开启动画开关。 | |
| animateOption | _object_ | 动画参数配置，当且仅当 animate 属性为 true，即动画开启时生效，详见 [animateOption 配置](#animateOption) | |

<a name="fDpx7"></a>

#### 配置项详解
#### 详细介绍

`markdown:docs/common/legend-cfg.zh.md`

Expand Down
10 changes: 9 additions & 1 deletion docs/api/components/scrollbar.en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,19 @@
---
title: Scrollbar
order: 3
contributors:
[
{
author: '新茗',
github: 'visiky',
avatar: 'https://gw.alipayobjects.com/zos/antfincdn/KAeYPA3TV0/avatar.jpeg',
},
]
---

`markdown:docs/styles/component.md`

#### Configurations (_ScrollbarCfg_)
#### Properties - _ScrollbarCfg_

`markdown:docs/common/scrollbar.en.md`

Expand Down
10 changes: 9 additions & 1 deletion docs/api/components/scrollbar.zh.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,19 @@
---
title: 滚动条 - Scrollbar
order: 3
contributors:
[
{
author: '新茗',
github: 'visiky',
avatar: 'https://gw.alipayobjects.com/zos/antfincdn/KAeYPA3TV0/avatar.jpeg',
},
]
---

`markdown:docs/styles/component.md`

#### 配置项 (_ScrollbarCfg_)
#### 配置属性 - _ScrollbarCfg_

`markdown:docs/common/scrollbar.zh.md`

Expand Down
2 changes: 1 addition & 1 deletion docs/api/components/slider.en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,6 @@ order: 2

<img src="https://gw.alipayobjects.com/zos/antfincdn/A3UeXLPhhU/slider-intro.jpg" class="component-img" alt="slider" />

#### Configurations (_SliderCfg_)
#### Properties - _SliderCfg_

`markdown:docs/common/slider.en.md`
4 changes: 2 additions & 2 deletions docs/api/components/slider.zh.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@ order: 2

🎨 前往墨者学院 [AntV 设计 | 缩略轴 Axis Navigator](https://www.yuque.com/mo-college/vis-design/gs5ow9) 查看**设计指引**。

#### 缩略轴组成
#### 构成团苏

<img src="https://gw.alipayobjects.com/zos/antfincdn/A3UeXLPhhU/slider-intro.jpg" class="component-img" alt="slider" />

#### 配置项 (_SliderCfg_)
#### 配置属性 - _SliderCfg_

`markdown:docs/common/slider.zh.md`
2 changes: 1 addition & 1 deletion docs/api/components/tooltip.en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ order: 5

<img src="https://gw.alipayobjects.com/zos/antfincdn/qAwyqRLJXT/Tooltip%252520jieshao.png" class="component-img" alt="tooltip" />

#### Configurations (_TooltipCfg_)
#### Properties - _TooltipCfg_

`markdown:docs/common/tooltip.en.md`

Expand Down
2 changes: 1 addition & 1 deletion docs/api/components/tooltip.zh.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ order: 5

<img src="https://gw.alipayobjects.com/zos/antfincdn/qAwyqRLJXT/Tooltip%252520jieshao.png" class="component-img" alt="tooltip" />

#### 配置项 (_TooltipCfg_)
#### 配置属性 - _TooltipCfg_

`markdown:docs/common/tooltip.zh.md`

Expand Down
2 changes: 1 addition & 1 deletion docs/common/axis.en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ Configurations related to axis label. Set this to `null` to prevent the axis lab

| Properties | Type | |
| ------------ | -------------------------------------------------------- | ------- | --------------------------------------------------------- |
| style | _[ShapeAttrs](/zh/docs/api/graphic-style)_ | - | Axis label text graphic property style |
| style | _[ShapeAttrs](/en/docs/api/graphic-style)_ | - | Axis label text graphic property style |
| offset | _number_ | - | Axis label offset |
| rotate | _number_ | - | Axis label text rotation Angle |
| autoRotate | _boolean_ | `true` | Whether to rotate automatically, default true |
Expand Down
Loading