You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by wa...@apache.org on 2019/11/07 10:04:03 UTC
[incubator-echarts-doc] branch doc-revise updated: fix: option/legend、option/grid of doc
This is an automated email from the ASF dual-hosted git repository.
wangdd pushed a commit to branch doc-revise
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-doc.git
The following commit(s) were added to refs/heads/doc-revise by this push:
new 054ddcb fix: option/legend、option/grid of doc
054ddcb is described below
commit 054ddcb3450b7fa553dce4f84ebd7595b22b4218
Author: Wdingding <wa...@gmail.com>
AuthorDate: Thu Nov 7 18:00:04 2019 +0800
fix: option/legend、option/grid of doc
---
zh/option/component/grid.md | 14 +++---
zh/option/component/legend.md | 99 +++++++++++++++++++++++--------------------
zh/option/partial/icon.md | 12 +++---
3 files changed, 64 insertions(+), 61 deletions(-)
diff --git a/zh/option/component/grid.md b/zh/option/component/grid.md
index 853e639..f2ce98d 100644
--- a/zh/option/component/grid.md
+++ b/zh/option/component/grid.md
@@ -5,9 +5,9 @@
直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制[折线图](~series-line)，[柱状图](~series-bar)，[散点图（气泡图）](~series-scatter)。
-在 ECharts 2.x 里单个 echarts 实例中最多只能存在一个 grid 组件，在 ECharts 3 中可以存在任意个 grid 组件。
+在 ECharts 2.x 里单个 echarts 实例中最多只能存在一个 grid 组件，在 ECharts 3 中可以存在任意多个 grid 组件。
-**例如下面这个 Anscombe Quartet 的示例：**
+**例如：**下面这个 Anscombe Quartet 的示例
~[600x400](${galleryViewPath}scatter-anscombe-quartet&edit=1&reset=1)
@@ -15,7 +15,7 @@
## show(boolean) = false
-是否显示直角坐标系网格。
+是否显示 grid 区域。默认不显示。
{{ use: partial-rect-layout-width-height(
componentName="grid ",
@@ -30,11 +30,11 @@
grid 区域是否包含坐标轴的[刻度标签](~yAxis.axisLabel)。
+ containLabel 为 `false` 的时候：
- + `grid.left` `grid.right` `grid.top` `grid.bottom` `grid.width` `grid.height` 决定的是由坐标轴形成的矩形的尺寸和位置。
- + 这比较适用于多个 `grid` 进行对齐的场景，因为往往多个 `grid` 对齐的时候，是依据坐标轴来对齐的。
-+ containLabel 为 `true` 的时候：
+ + `grid.left` `grid.right` `grid.top` `grid.bottom` `grid.width` `grid.height` 决定了由坐标轴形成的矩形的尺寸和位置。
+ + 这比较适用于多个 `grid` 进行对齐的场景，因为经常多个 `grid` 对齐的时候，是依据坐标轴来对齐的。
+ + containLabel 为 `true` 的时候：
+ `grid.left` `grid.right` `grid.top` `grid.bottom` `grid.width` `grid.height` 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。
- + 这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件。
+ + 这常用于防止标签溢出的场景。标签溢出指的是标签长度动态变化时，可能会溢出容器或者覆盖其他组件。
{{ use:partial-component-common-style(componentName="网格", prefix='#', needShow=true) }}
diff --git a/zh/option/component/legend.md b/zh/option/component/legend.md
index e0248b2..5fe616b 100644
--- a/zh/option/component/legend.md
+++ b/zh/option/component/legend.md
@@ -3,25 +3,24 @@
# legend(Object)
-图例组件。
-
-图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
-
-ECharts 3 中单个 echarts 实例中可以存在多个图例组件，会方便多个图例的布局。
+图表的图例组件。图表的每个系列都对应一个图例，图例组件中包含标记 (symbol)、颜色和系列名称。可以通过点击图例来控制系列是否在图表中显示。
+单个 echarts 实例中可以存在多个图例组件，会方便多个图例的布局。
当图例数量过多时，可以使用 [滚动图例（垂直）](${galleryEditorPath}pie-legend&edit=1&reset=1) 或 [滚动图例（水平）](${galleryEditorPath}radar2&edit=1&reset=1)，参见：[legend.type](~legend.type)
## type(string)
-图例的类型。可选值：
+图例的类型。
+
+**可选：**
-+ `'plain'`：普通图例。缺省就是普通图例。
-+ `'scroll'`：可滚动翻页的图例。当图例数量较多时可以使用。
++ `'plain'`：普通图例。默认类型。
++ `'scroll'`：可滚动翻页的图例。当图例数量较多时使用。
参见 [滚动图例（垂直）](${galleryEditorPath}pie-legend&edit=1&reset=1) 或 [滚动图例（水平）](${galleryEditorPath}radar2&edit=1&reset=1)。
-当使用 `'scroll'` 时，这些使用这些设置进行细节配置：
+当使用 `'scroll'` 时，可以使用以下配置项来设置更多细节：
+ [legend.scrollDataIndex](~legend.scrollDataIndex)
+ [legend.pageButtonItemGap](~legend.pageButtonItemGap)
+ [legend.pageButtonGap](~legend.pageButtonGap)
@@ -39,25 +38,27 @@ ECharts 3 中单个 echarts 实例中可以存在多个图例组件，会方便
## show(boolean) = true
+是否显示图例组件。
+
{{use: partial-rect-layout-width-height(componentName="图例")}}
## orient(string) = 'horizontal'
-图例列表的布局朝向。
+图例组件的布局朝向。
-可选：
-+ `'horizontal'`
-+ `'vertical'`
+**可选：**
++ `'horizontal'`：水平布局。
++ `'vertical'`：垂直布局。
## align(string) = 'auto'
-图例标记和文本的对齐。默认自动，根据组件的位置和 orient 决定，当组件的 [left](~legend.left) 值为 `'right'` 以及纵向布局（[orient](~legend.orient) 为 `'vertical'`）的时候为右对齐，即为 `'right'`。
+图例和文本的对齐。默认自动，根据组件的位置和 [orient](~legend.orient) 决定。当组件的 [right](~legend.right) 值为 `'right'` 并且图例组件为纵向布局（[orient](~legend.orient) 为 `'vertical'`）的时候，图例和文本为右对齐，即为 `'right'`。
-可选：
-+ `'auto'`
-+ `'left'`
-+ `'right'`
+**可选：**
++ `'auto'`：元素自动对齐。
++ `'left'`：元素左边缘对齐。
++ `'right'`：元素右边缘对齐。
## padding(number) = 5
@@ -65,25 +66,25 @@ ECharts 3 中单个 echarts 实例中可以存在多个图例组件，会方便
## itemGap(number) = 10
-图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。
+每项图例之间的间隔。单位为 px。图例横向布局时为水平间隔，纵向布局时为纵向间隔。
## itemWidth(number) = 25
-图例标记的图形宽度。
+图例标记的图形宽度。单位为 px。
## itemHeight(number) = 14
-图例标记的图形高度。
+图例标记的图形高度。单位为 px。
## symbolKeepAspect(boolean) = true
-如果图标（可能来自系列的 `symbol` 或用户自定义的 `legend.data.icon`）是 `path://` 的形式，是否在缩放时保持该图形的长宽比。
+如果图标（可能来自系列的 `symbol` 或用户自定义的 `legend.data.icon`）是 `path://` 的形式，是否在缩放时保持该图形的长宽比。默认为保持，可以设成 `false` 关闭。
## formatter(string|Function) = null
用来格式化图例文本，支持字符串模板和回调函数两种形式。
-示例：
+**示例：**
```js
// 使用字符串模板，模板变量为图例名称 {name}
formatter: 'Legend {name}'
@@ -97,17 +98,22 @@ formatter: function (name) {
图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 `false` 关闭。
-除此之外也可以设成 `'single'` 或者 `'multiple'` 使用单选或者多选模式。
+除此之外，也可以选择图例使用单选或者多选模式。
+
+**可选：**
++ `'single'` 单选模式
++ `'multiple'` 多选模式
+
## inactiveColor(Color) = '#ccc'
-图例关闭时的颜色。
+图例关闭的颜色。
## selected(Object)
-图例选中状态表。
+图例选中的状态表。
-示例：
+**示例：**
```
selected: {
// 选中'系列1'
@@ -119,7 +125,7 @@ selected: {
## textStyle(Object)
-图例的公用文本样式。
+图例的文本样式。
{{ use: partial-text-style(
componentName='图例',
@@ -131,7 +137,9 @@ selected: {
## tooltip(Object)
-图例的 tooltip 配置，配置项同 [tooltip](~tooltip)。默认不显示，可以在 legend 文字很多的时候对文字做裁剪并且开启 tooltip，如下示例：
+图例的 tooltip 配置，配置项同 [tooltip](~tooltip)。默认不显示，可以在 legend 文字很多的时候对文字做裁剪并且开启 tooltip。
+
+**示例：**
```js
legend: {
@@ -152,7 +160,7 @@ legend: {
## data(Array)
-图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 `name`（如果是[饼图](~series-pie)，也可以是饼图单个数据的 `name`）。图例组件会自动根据对应系列的图形标记（symbol）来绘制自己的颜色和标记，特殊字符串 `''`（空字符串）或者 `'\n'`（换行字符串）用于图例的换行。
+图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 `name`（如果是[饼图](~series-pie)，也可以是饼图单个数据的 `name`）。图例组件会自动根据对应系列的图形标记（symbol）来绘制自己的标记和颜色，特殊字符串 `''`（空字符串）或者 `'\n'`（换行字符串）用于图例的换行。
如果 `data` 没有被指定，会自动从当前系列中获取。多数系列会取自 [series.name](~series.name) 或者 [series.encode](~series.encode) 的 `seriesName` 所指定的维度。如 [饼图](~series-pie) and [漏斗图](~series-funnel) 等会取自 series.data 中的 name。
@@ -172,7 +180,7 @@ data: [{
```
### name(string)
-图例项的名称，应等于某系列的`name`值（如果是饼图，也可以是饼图单个数据的 `name`）。
+图例项的名称，相当于某系列的`name`值（如果是饼图，也可以是饼图单个数据的 `name`）。
### icon(string)
@@ -199,7 +207,7 @@ data: [{
图例当前最左上显示项的 `dataIndex`。
-`setOption` 时指定此项的话，可决定当前图例滚动到哪里。
+在 `setOption` 模式时指定此项的话，可决定当前图例滚动到哪里。
但是，如果仅仅想改变图例翻页，一般并不调用 `setOption`（因为这太重量了），仅仅使用 action [legendScroll](api.html#action.legend.legendScroll) 即可。
@@ -225,7 +233,9 @@ data: [{
[legend.type](~legend.type) 为 `'scroll'` 时有效。
-图例控制块的位置。可选值为：
+图例控制块的位置。
+
+**可选：**
+ `'start'`：控制块在左或上。
+ `'end'`：控制块在右或下。
@@ -246,7 +256,6 @@ data: [{
}
```
-
参见 [滚动图例（垂直）](${galleryEditorPath}pie-legend&edit=1&reset=1) 或 [滚动图例（水平）](${galleryEditorPath}radar2&edit=1&reset=1)。
## pageIcons(Object)
@@ -259,11 +268,9 @@ data: [{
[legend.orient](~legend.orient) 为 `'horizontal'` 时的翻页按钮图标。
-是一个数组，表示 `[previous page button, next page button]`。默认值为 `['M0,0L12,-10L12,10z', 'M0,0L-12,-10L-12,10z']`，。
+是一个数组，表示 `[previous page button, next page button]`。默认值为 `['M0,0L12,-10L12,10z', 'M0,0L-12,-10L-12,10z']`。
-数组中每项，
-
-{{ use: partial-icon-image-path }}
+数组中每项，{{ use: partial-icon-image-path }}
参见 [滚动图例（垂直）](${galleryEditorPath}pie-legend&edit=1&reset=1) 或 [滚动图例（水平）](${galleryEditorPath}radar2&edit=1&reset=1)。
@@ -273,9 +280,7 @@ data: [{
是一个数组，表示 `[previous page button, next page button]`。默认值为 `['M0,0L20,0L10,-20z', 'M0,0L20,0L10,20z']`，。
-数组中每项，
-
-{{ use: partial-icon-image-path }}
+数组中每项，{{ use: partial-icon-image-path }}
参见 [滚动图例（垂直）](${galleryEditorPath}pie-legend&edit=1&reset=1) 或 [滚动图例（水平）](${galleryEditorPath}radar2&edit=1&reset=1)。
@@ -291,7 +296,7 @@ data: [{
[legend.type](~legend.type) 为 `'scroll'` 时有效。
-翻页按钮不激活时（即翻页到头时）的颜色。
+翻页按钮不激活时（即翻页到头无法再翻页时）的颜色。
参见 [滚动图例（垂直）](${galleryEditorPath}pie-legend&edit=1&reset=1) 或 [滚动图例（水平）](${galleryEditorPath}radar2&edit=1&reset=1)。
@@ -299,7 +304,7 @@ data: [{
[legend.type](~legend.type) 为 `'scroll'` 时有效。
-翻页按钮的大小。可以是数字，也可以是数组，如 `[10, 3]`，表示 `[宽，高]`。
+翻页按钮的大小。可以是数字，也可以是数组，如 `[10, 3]`，分别表示宽和高。单位为 px。
参见 [滚动图例（垂直）](${galleryEditorPath}pie-legend&edit=1&reset=1) 或 [滚动图例（水平）](${galleryEditorPath}radar2&edit=1&reset=1)。
@@ -317,13 +322,13 @@ data: [{
## animationDurationUpdate(number) = 800
-图例翻页时的动画时长。
+图例翻页动画的时长。单位为 ms。
## selector(boolean|Array) = false
图例组件中的选择器按钮，目前包括全选和反选两种功能。默认不显示，用户可手动开启，也可以手动配置每个按钮的标题。
-使用方式如下：
+**例如：**
```js
selector: [
@@ -363,8 +368,8 @@ selector: ['all', 'inverse']
## selectorItemGap(number) = 7
-选择器按钮之间的间隔。
+选择器按钮之间的间隔。单位为 px。
## selectorButtonGap(number) = 10
-选择器按钮与图例组件之间的间隔。
+选择器按钮与图例组件之间的间隔。单位为 px。
diff --git a/zh/option/partial/icon.md b/zh/option/partial/icon.md
index 604cb31..99f78e1 100644
--- a/zh/option/partial/icon.md
+++ b/zh/option/partial/icon.md
@@ -9,16 +9,14 @@ ECharts 提供的标记类型包括 {{ import: partial-icon-buildin}}
-{{ target: partial-icon-image-path }}
+{{ target: partial-icon-image-path }} 可以通过 `'image://url'` 设置为图片，其中 URL 可以为图片链接或者 `dataURI`。
-可以通过 `'image://url'` 设置为图片，其中 URL 为图片的链接，或者 `dataURI`。
-
-URL 为图片链接例如：
+URL 为图片链接，**例如：**
```
'image://http://xxx.xxx.xxx/a/b.png'
```
-URL 为 `dataURI` 例如：
+URL 为 `dataURI`，**例如：**
```
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'
```
@@ -35,9 +33,9 @@ URL 为 `dataURI` 例如：
{{ target: partial-icon-path }}
-可以通过 `'path://'` 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 [SVG PathData](http://www.w3.org/TR/SVG/paths.html#PathData)。可以从 Adobe Illustrator 等工具编辑导出。
+可以通过 `'path://'` 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 [SVG PathData](http://www.w3.org/TR/SVG/paths.html#PathData)，路径可以使用 Adobe Illustrator 等工具编辑导出。
-例如：
+**例如：**
```
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'
```
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org