This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch next
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-doc.git
The following commit(s) were added to refs/heads/next by this push:
new 93617bf add labelLayout in zh doc
93617bf is described below
commit 93617bf22170ca43f8b291680ad8ce102d04b7a6
Author: pissang <[email protected]>
AuthorDate: Mon Aug 17 22:58:19 2020 +0800
add labelLayout in zh doc
---
zh/option/component/geo-common.md | 2 -
zh/option/partial/label-layout.md | 115 ++++++++++++++++++++++++++++++++++++++
zh/option/series/bar.md | 7 ++-
zh/option/series/custom.md | 6 ++
zh/option/series/effectScatter.md | 5 ++
zh/option/series/funnel.md | 5 ++
zh/option/series/graph.md | 6 ++
zh/option/series/heatmap.md | 5 ++
zh/option/series/line.md | 6 ++
zh/option/series/lines.md | 5 ++
zh/option/series/map.md | 5 ++
zh/option/series/pictorialBar.md | 6 ++
zh/option/series/pie.md | 5 ++
zh/option/series/radar.md | 5 ++
zh/option/series/sankey.md | 5 ++
zh/option/series/scatter.md | 5 ++
zh/option/series/sunburst.md | 6 ++
zh/option/series/themeRiver.md | 5 ++
zh/option/series/tree.md | 5 ++
zh/option/series/treemap.md | 12 ++--
20 files changed, 211 insertions(+), 10 deletions(-)
diff --git a/zh/option/component/geo-common.md
b/zh/option/component/geo-common.md
index 343e11c..c57b8d7 100644
--- a/zh/option/component/geo-common.md
+++ b/zh/option/component/geo-common.md
@@ -118,8 +118,6 @@ boundingCoords: [
formatter=true
)}}
-
-
#${prefix} itemStyle(Object)
{{ use: partial-item-style-desc(name= '地图区域的多边形') }}
diff --git a/zh/option/partial/label-layout.md
b/zh/option/partial/label-layout.md
new file mode 100644
index 0000000..8111b6c
--- /dev/null
+++ b/zh/option/partial/label-layout.md
@@ -0,0 +1,115 @@
+{{target: partial-label-layout}}
+
+标签的统一布局配置。
+
+该配置项是在每个系列默认的标签布局基础上，统一调整标签的`(x, y)`位置，标签对齐等属性以实现想要的标签布局效果。
+
+该配置项也可以是一个有如下参数的回调函数
+
+```js
+// 标签对应数据的 dataIndex
+dataIndex: number
+// 标签对应的数据类型，只在关系图中会有 node 和 edge 数据类型的区分
+dataType?: string
+// 标签对应的系列的 index
+seriesIndex: number
+// 标签显示的文本
+text: string
+// 默认的标签的包围盒，由系列默认的标签布局决定
+labelRect: {x: number, y: number, width: number, height: number}
+// 默认的标签水平对齐
+align: 'left' | 'center' | 'right'
+// 默认的标签垂直对齐
+verticalAlign: 'top' | 'middle' | 'bottom'
+// 标签所对应的数据图形的包围盒，可用于定位标签位置
+rect: {x: number, y: number, width: number, height: number}
+// 默认引导线的位置，目前只有饼图(pie)和漏斗图(funnel)有默认标签位置
+// 如果没有该值则为 null
+labelLinePoints?: number[][]
+```
+
+**示例：**
+
+将标签显示在图形右侧 10px 的位置，并且垂直居中：
+
+```js
+labelLayout(params) {
+ return {
+ x: params.rect.x + 10,
+ y: params.rect.y + params.rect.height / 2,
+ verticalAlign: 'middle',
+ align: 'left'
+ }
+}
+```
+
+根据图形的包围盒尺寸决定文本尺寸
+
+```js
+
+labelLayout(params) {
+ return {
+ fontSize: Math.max(params.rect.width / 10, 5)
+ };
+}
+```
+
+
+#${prefix} hideOverlap(boolean)
+
+是否隐藏重叠的标签。
+
+#${prefix} moveOverlap(string)
+
+在标签重叠的时候是否挪动标签位置以防止重叠。
+
+目前支持配置为：
+
++ `'shiftX'` 水平方向依次位移，在水平方向对齐时使用
++ `'shiftY'` 垂直方向依次位移，在垂直方向对齐时使用
+
+#${prefix} x(number|string)
+
+标签的 x 位置。支持绝对的像素值或者`'20%'`这样的相对值。
+
+#${prefix} y(number|string)
+
+标签的 y 位置。支持绝对的像素值或者`'20%'`这样的相对值。
+
+#${prefix} dx(number)
+
+标签在 x 方向上的像素偏移。可以和`x`一起使用。
+
+#${prefix} dy(number)
+
+标签在 y 方向上的像素偏移。可以和`y`一起使用
+
+#${prefix} rotate(number)
+
+标签旋转角度。
+
+#${prefix} align(string)
+
+标签水平对齐。可以设置`'left'`, `'center'`, `'right'`。
+
+#${prefix} verticalAlign(string)
+
+标签垂直对齐。可以设置`'top'`, `'middle'`, `'bottom'`。
+
+#${prefix} fontSize(number)
+
+标签的文本大小，可以根据
+
+#${prefix} draggable(boolean)
+
+标签是否可以允许用户通过拖拽二次调整位置。
+
+#${prefix} labelLinePoints(Array.<Array.<number>>)
+
+标签引导线三个点的位置。格式为：
+
+```js
+[[x, y], [x, y], [x, y]]
+```
+
+在饼图中常用来微调已经计算好的引导线，其它情况一般不建议设置。
diff --git a/zh/option/series/bar.md b/zh/option/series/bar.md
index cd7a84a..c1e1f03 100644
--- a/zh/option/series/bar.md
+++ b/zh/option/series/bar.md
@@ -119,6 +119,12 @@ option = {
formatter=true
)}}
+## labelLayout(Object)
+
+{{ use: partial-label-layout(
+ prefix="##"
+) }}
+
## itemStyle(Object)
{{use:partial-item-style-desc}}
{{use:partial-bar-item-style(
@@ -235,7 +241,6 @@ option = {
{{ use:partial-label(prefix="####") }}
-
#### itemStyle(Object)
{{use:partial-bar-item-style(prefix="####")}}
diff --git a/zh/option/series/custom.md b/zh/option/series/custom.md
index 85008d5..5d66b16 100644
--- a/zh/option/series/custom.md
+++ b/zh/option/series/custom.md
@@ -389,6 +389,12 @@ renderItem 函数的第二个参数。
hasCallback=false
)}}
+## labelLayout(Object)
+{{ use: partial-label-layout(
+ prefix="##"
+) }}
+
+
## emphasis(Object)
高亮图形样式
diff --git a/zh/option/series/effectScatter.md
b/zh/option/series/effectScatter.md
index a0f59be..9f13177 100644
--- a/zh/option/series/effectScatter.md
+++ b/zh/option/series/effectScatter.md
@@ -99,6 +99,11 @@ const option = {
formatter=true
)}}
+## labelLayout(Object)
+{{ use: partial-label-layout(
+ prefix="##"
+) }}
+
## itemStyle(Object)
{{use:partial-item-style-desc}}
{{use:partial-item-style(
diff --git a/zh/option/series/funnel.md b/zh/option/series/funnel.md
index 66db66d..4a7d1c8 100644
--- a/zh/option/series/funnel.md
+++ b/zh/option/series/funnel.md
@@ -93,6 +93,11 @@ option = {
formatter=true
)}}
+## labelLayout(Object)
+{{ use: partial-label-layout(
+ prefix="##"
+) }}
+
## labelLine(Object)
标签的视觉引导线样式，在 [label 位置](~series-funnel.label.position)
设置为`'left'`或者`'right'`的时候会显示视觉引导线。
{{ use: partial-funnel-label-line(
diff --git a/zh/option/series/graph.md b/zh/option/series/graph.md
index 3eacedb..90d4903 100644
--- a/zh/option/series/graph.md
+++ b/zh/option/series/graph.md
@@ -209,6 +209,12 @@ edgeSymbol: ['circle', 'arrow']
prefix="##"
)}}
+## labelLayout(Object)
+{{ use: partial-label-layout(
+ prefix="##"
+) }}
+
+
## emphasis(Object)
高亮的图形样式。
### itemStyle(Object)
diff --git a/zh/option/series/heatmap.md b/zh/option/series/heatmap.md
index 4000cfc..4d80930 100644
--- a/zh/option/series/heatmap.md
+++ b/zh/option/series/heatmap.md
@@ -102,6 +102,11 @@ option = {
defaultPosition="inside"
) }}
+## labelLayout(Object)
+{{ use: partial-label-layout(
+ prefix="##"
+) }}
+
## itemStyle(Object)
样式设置，在直角坐标系([coordinateSystem](~series-heatmap.coordinateSystem):
'cartesian2d')上有效。
{{use:partial-item-style(prefix="##")}}
diff --git a/zh/option/series/line.md b/zh/option/series/line.md
index 24fc981..77f3d89 100644
--- a/zh/option/series/line.md
+++ b/zh/option/series/line.md
@@ -124,6 +124,12 @@ const option = {
formatter=true
)}}
+## labelLayout(Object)
+{{ use: partial-label-layout(
+ prefix="##"
+) }}
+
+
## itemStyle(Object)
折线拐点标志的样式。
{{use: partial-item-style(
diff --git a/zh/option/series/lines.md b/zh/option/series/lines.md
index 4f899ef..97a7049 100644
--- a/zh/option/series/lines.md
+++ b/zh/option/series/lines.md
@@ -101,6 +101,11 @@ ECharts 2.x 里会用地图上的 `markLine` 去绘制迁徙效果，在 ECharts
标签相关配置。在 [polyline](~series-lines.polyline) 设置为 `true` 时无效。
{{ use: lines-label(prefix="##")}}
+## labelLayout(Object)
+{{ use: partial-label-layout(
+ prefix="##"
+) }}
+
## emphasis(Object)
高亮的线条和标签样式。
diff --git a/zh/option/series/map.md b/zh/option/series/map.md
index a520d87..58a59f6 100644
--- a/zh/option/series/map.md
+++ b/zh/option/series/map.md
@@ -48,6 +48,11 @@
{{ use: partial-datasetIndex }}
+## labelLayout(Object)
+{{ use: partial-label-layout(
+ prefix="##"
+) }}
+
## data(Array)
{{ use: partial-1d-data-desc(name="地图") }}
diff --git a/zh/option/series/pictorialBar.md b/zh/option/series/pictorialBar.md
index 0bb309c..112e2f8 100644
--- a/zh/option/series/pictorialBar.md
+++ b/zh/option/series/pictorialBar.md
@@ -124,6 +124,11 @@ option = {
formatter=true
)}}
+## labelLayout(Object)
+{{ use: partial-label-layout(
+ prefix="##"
+) }}
+
## itemStyle(Object)
{{use:partial-item-style-desc}}
{{use:partial-item-style(
@@ -139,6 +144,7 @@ option = {
prefix="###",
formatter=true
)}}
+
### itemStyle(Object)
{{use:partial-item-style(
prefix="###"
diff --git a/zh/option/series/pie.md b/zh/option/series/pie.md
index f3ee00d..0ed829e 100644
--- a/zh/option/series/pie.md
+++ b/zh/option/series/pie.md
@@ -189,6 +189,11 @@ const option = {
smooth=true
)}}
+## labelLayout(Object)
+{{ use: partial-label-layout(
+ prefix="##"
+) }}
+
## itemStyle(Object)
{{use:partial-item-style-desc}}
{{use:partial-item-style(
diff --git a/zh/option/series/radar.md b/zh/option/series/radar.md
index 401b212..1fe6a4a 100644
--- a/zh/option/series/radar.md
+++ b/zh/option/series/radar.md
@@ -74,6 +74,11 @@ const option = {
formatter=true
)}}
+## labelLayout(Object)
+{{ use: partial-label-layout(
+ prefix="##"
+) }}
+
## itemStyle(Object)
折线拐点标志的样式。
{{use: partial-item-style(
diff --git a/zh/option/series/sankey.md b/zh/option/series/sankey.md
index 1b58ec1..db9d241 100644
--- a/zh/option/series/sankey.md
+++ b/zh/option/series/sankey.md
@@ -170,6 +170,11 @@ levels: [{
formatter1d=true
)}}
+## labelLayout(Object)
+{{ use: partial-label-layout(
+ prefix="##"
+) }}
+
## itemStyle(Object)
桑基图节点矩形的样式。
diff --git a/zh/option/series/scatter.md b/zh/option/series/scatter.md
index 11f1156..e8265fd 100644
--- a/zh/option/series/scatter.md
+++ b/zh/option/series/scatter.md
@@ -121,6 +121,11 @@ const option = {
formatter=true
)}}
+## labelLayout(Object)
+{{ use: partial-label-layout(
+ prefix="##"
+) }}
+
## itemStyle(Object)
{{use:partial-item-style-desc}}
diff --git a/zh/option/series/sunburst.md b/zh/option/series/sunburst.md
index 388b40c..0351dbc 100644
--- a/zh/option/series/sunburst.md
+++ b/zh/option/series/sunburst.md
@@ -297,6 +297,12 @@ const option = {
)}}
+## labelLayout(Object)
+{{ use: partial-label-layout(
+ prefix="##"
+) }}
+
+
## data(Array)
[series-sunburst.data](~series-sunburst.data) 的数据格式是树状的，例如：
diff --git a/zh/option/series/themeRiver.md b/zh/option/series/themeRiver.md
index 70094bd..1b543b4 100644
--- a/zh/option/series/themeRiver.md
+++ b/zh/option/series/themeRiver.md
@@ -142,6 +142,11 @@ const option = {
defaultFontSize=11,
)}}
+## labelLayout(Object)
+{{ use: partial-label-layout(
+ prefix="##"
+) }}
+
## itemStyle(Object)
主题河流中每个带状河流分支的样式。
diff --git a/zh/option/series/tree.md b/zh/option/series/tree.md
index 281e5be..8ce7145 100644
--- a/zh/option/series/tree.md
+++ b/zh/option/series/tree.md
@@ -169,6 +169,11 @@ const option = {
formatter1d=true
)}}
+## labelLayout(Object)
+{{ use: partial-label-layout(
+ prefix="##"
+) }}
+
## lineStyle(Object)
diff --git a/zh/option/series/treemap.md b/zh/option/series/treemap.md
index a13b89d..0d46964 100644
--- a/zh/option/series/treemap.md
+++ b/zh/option/series/treemap.md
@@ -10,7 +10,6 @@
~[700x580](${galleryViewPath}treemap-obama&edit=1&reset=1)
-<br>
**视觉映射：**
treemap 首先是把数值映射到『面积』这种视觉元素上。
@@ -20,7 +19,6 @@ treemap 首先是把数值映射到『面积』这种视觉元素上。
{{ use: partial-treemap-visual-detial }}
-<br>
**下钻（drill down）：**
`drill down` 功能即点击后才展示子层级。
@@ -30,9 +28,6 @@ treemap 首先是把数值映射到『面积』这种视觉元素上。
~[800x500](${galleryViewPath}treemap-drill-down&edit=1&reset=1)
-<br>
-<br>
-<br>
注：treemap 的配置项 和 ECharts2 相比有一些变化，一些不太成熟的配置方式不再支持或不再兼容：
+ `center/size` 方式的定位不再支持，而是统一使用 `left/top/bottom/right/width/height` 方式定位。
@@ -45,8 +40,6 @@ treemap 首先是把数值映射到『面积』这种视觉元素上。
+
`itemStyle.childBorderWidth`、`itemStyle.childBorderColor`不再支持（因为这个配置方式只能定义两层的treemap）。统一使用
[series-treemap.levels](~series-treemap.levels) 来进行各层级的定义。
-<br>
-<br>
<ExampleBaseOption name="treemap" title="基础矩形树图" title-en="Basic Treemap">
const data = [{
@@ -469,6 +462,11 @@ treemap 默认把第一个维度（Array 第一项）映射到『面积』上。
)}}
+## labelLayout(Object)
+{{ use: partial-label-layout(
+ prefix="##"
+) }}
+
## data(Array)
[series-treemap.data](~series-treemap.data) 的数据格式是树状的，例如：
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
