You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2020/09/08 11:35:59 UTC
[incubator-echarts-doc] branch next updated: add more states in
series.
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 da4e1e0 add more states in series.
da4e1e0 is described below
commit da4e1e0042db51ab345886bf7fc71ff3fdbcfc6e
Author: pissang <bm...@gmail.com>
AuthorDate: Tue Sep 8 19:35:48 2020 +0800
add more states in series.
---
tool/md2json.js | 20 +++--
zh/option/component/geo-common.md | 39 +++++---
zh/option/component/geo.md | 22 +++--
zh/option/series/effectScatter.md | 2 +-
zh/option/series/graph.md | 14 ---
zh/option/series/lines.md | 62 +++++++++----
zh/option/series/map.md | 42 +++++----
zh/option/series/pictorialBar.md | 65 +++++++++++---
zh/option/series/pie.md | 2 +-
zh/option/series/radar.md | 86 +++++++++++-------
zh/option/series/sankey.md | 136 +++++++++++++++++++---------
zh/option/series/scatter.md | 16 +---
zh/option/series/sunburst.md | 181 +++++++++++++++++++-------------------
zh/option/series/themeRiver.md | 57 ++++++++----
zh/option/series/tree.md | 109 +++++++++++++++++------
zh/option/series/treemap.md | 82 ++++++++++-------
16 files changed, 601 insertions(+), 334 deletions(-)
diff --git a/tool/md2json.js b/tool/md2json.js
index 6b5380d..c8c3b52 100644
--- a/tool/md2json.js
+++ b/tool/md2json.js
@@ -45,12 +45,22 @@ async function convert(opts) {
Object.prototype[key] = tplEnv[key];
});
- const mdStr = etplEngine.getRenderer(entry)({});
+ function clearEnvVariables() {
+ // Restore the global variables.
+ Object.keys(tplEnv).forEach(function (key) {
+ delete Object.prototype[key];
+ });
+ }
- // Restore the global variables.
- Object.keys(tplEnv).forEach(function (key) {
- delete Object.prototype[key];
- });
+ let mdStr;
+ try {
+ mdStr = etplEngine.getRenderer(entry)({});
+ clearEnvVariables();
+ }
+ catch (e) {
+ clearEnvVariables();
+ throw e;
+ }
// Markdown to JSON
const schema = mdToJsonSchema(mdStr, maxDepth, opts.imageRoot, entry);
diff --git a/zh/option/component/geo-common.md b/zh/option/component/geo-common.md
index f90372a..415d814 100644
--- a/zh/option/component/geo-common.md
+++ b/zh/option/component/geo-common.md
@@ -148,23 +148,16 @@ boundingCoords: [
高亮状态下的多边形和标签样式。
-##${prefix} label(Object)
-
-{{ use: partial-label(
- prefix = "##" + ${prefix},
- formatter = true
+{{ use: partial-geo-common-state(
+ prefix='#' + ${prefix}
) }}
-##${prefix} itemStyle(Object)
-
-###${prefix} areaColor(Color) = '#eee'
+#${prefix} select(Object)
-地图区域的颜色。
-
-{{ use: partial-color-desc() }}
+选中状态下的多边形和标签样式。
-{{ use: partial-item-style(
- prefix = ${prefix} + '##'
+{{ use: partial-geo-common-state(
+ prefix='#' + ${prefix}
) }}
{{ use: partial-rect-layout(
@@ -189,3 +182,23 @@ layoutSize: 100
地图的大小，见 `layoutCenter`。支持相对于屏幕宽高的百分比或者绝对的像素大小。
+{{ target: partial-geo-common-state }}
+
+#${prefix} label(Object)
+
+{{ use: partial-label(
+ prefix = "#" + ${prefix},
+ formatter = true
+) }}
+
+#${prefix} itemStyle(Object)
+
+##${prefix} areaColor(Color) = '#eee'
+
+地图区域的颜色。
+
+{{ use: partial-color-desc() }}
+
+{{ use: partial-item-style(
+ prefix = "#" + ${prefix}
+) }}
diff --git a/zh/option/component/geo.md b/zh/option/component/geo.md
index 3b37623..ea07ac8 100644
--- a/zh/option/component/geo.md
+++ b/zh/option/component/geo.md
@@ -84,7 +84,22 @@ geo 区域的颜色也可以被 map series 所控制，参见 [series-map.geoInd
### emphasis(Object)
-高亮的样式。
+高亮状态的设置。
+
+{{ use: geo-region-state() }}
+
+### select(Object)
+
+高亮状态的设置。
+
+{{ use: geo-region-state() }}
+
+{{ use: partial-silent(
+ prefix = "#"
+) }}
+
+
+{{ target: geo-region-state }}
#### itemStyle(Object)
@@ -104,8 +119,3 @@ geo 区域的颜色也可以被 map series 所控制，参见 [series-map.geoInd
prefix = "####",
formatter = true
) }}
-
-{{ use: partial-silent(
- prefix = "#"
-) }}
-
diff --git a/zh/option/series/effectScatter.md b/zh/option/series/effectScatter.md
index 3675f40..63e9f51 100644
--- a/zh/option/series/effectScatter.md
+++ b/zh/option/series/effectScatter.md
@@ -264,7 +264,7 @@ const option = {
{{ use: partial-label(
prefix = "#" + ${prefix},
- formatter = ${prefix === '##'}
+ formatter = ${prefix} === '##'
) }}
#${prefix} itemStyle(Object)
diff --git a/zh/option/series/graph.md b/zh/option/series/graph.md
index 13d48bc..6c5ea30 100644
--- a/zh/option/series/graph.md
+++ b/zh/option/series/graph.md
@@ -155,20 +155,6 @@ edgeLength: [10, 50]
节点是否可拖拽，只在使用力引导布局的时候有用。
-## focusNodeAdjacency(boolean) = false
-
-<ExampleUIControlBoolean default="false" />
-
-是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
-
-{{ use: partial-symbol(
- prefix = '#',
- defaultSymbol = "'circle'",
- defaultSymbolSize = 10,
- name = '关系图节点',
- hasCallback = true
-) }}
-
## edgeSymbol(Array|string) = ['none', 'none']
边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。默认不显示标记，常见的可以设置为箭头，如下：
diff --git a/zh/option/series/lines.md b/zh/option/series/lines.md
index b20fa78..0510e60 100644
--- a/zh/option/series/lines.md
+++ b/zh/option/series/lines.md
@@ -134,16 +134,30 @@ ECharts 2.x 里会用地图上的 `markLine` 去绘制迁徙效果，在 ECharts
高亮的线条和标签样式。
-### lineStyle(Object)
+{{ use: partial-focus-blur-scope() }}
-{{ use: partial-line-style(
- prefix = '###'
+{{ use: lines-state(
+ prefix="##"
) }}
-### label(Object)
+## blur(Object)
-{{ use: lines-label(
- prefix = "###"
+淡出的线条和标签样式。开启 [emphasis.focus](~series-lines.emphasis.focus) 后有效。
+
+{{ use: lines-state(
+ prefix="##"
+) }}
+
+## select(Object)
+
+选中的线条和标签样式。开启 [selectedMode](~series-lines.selectedMode) 后有效。
+
+{{ use: lines-state(
+ prefix="##"
+) }}
+
+{{ use: partial-selected-mode(
+ version = '5.0.0'
) }}
{{ use: partial-progressive(
@@ -206,18 +220,21 @@ ECharts 2.x 里会用地图上的 `markLine` 去绘制迁徙效果，在 ECharts
### emphasis(Object)
-#### lineStyle(Object)
+{{ use: lines-state(
+ prefix="###"
+)}}
-{{ use: partial-line-style(
- prefix = "####",
- hasCurveness = true
-) }}
+### blur(Object)
-#### label(Object)
+{{ use: lines-state(
+ prefix="###"
+)}}
-{{ use: lines-label(
- prefix = "####"
-) }}
+### select(Object)
+
+{{ use: lines-state(
+ prefix="###"
+)}}
{{ use: partial-marker(
prefix = "#",
@@ -264,3 +281,18 @@ ECharts 2.x 里会用地图上的 `markLine` 去绘制迁徙效果，在 ECharts
prefix = ${prefix}
) }}
+
+{{ target: lines-state }}
+
+#${prefix} lineStyle(Object)
+
+{{ use: partial-line-style(
+ prefix = '#' + ${prefix}
+) }}
+
+#${prefix} label(Object)
+
+{{ use: lines-label(
+ prefix = "#" + ${prefix}
+) }}
+
diff --git a/zh/option/series/map.md b/zh/option/series/map.md
index fcaf6b0..3147e19 100644
--- a/zh/option/series/map.md
+++ b/zh/option/series/map.md
@@ -103,7 +103,32 @@
### emphasis(Object)
-该数据所在区域的多边形高亮样式设置
+该数据所在区域的多边形高亮状态
+
+{{ use: map-region-state() }}
+
+### select(Object)
+
+该数据所在区域的多边形选中状态
+
+{{ use: map-region-state() }}
+
+{{ use: partial-tooltip-in-series-data() }}
+
+{{ use: partial-marker(
+ prefix = "#",
+ seriesType = "map",
+ hasCoord = true
+) }}
+
+{{ use: partial-silent(
+ prefix = "#"
+) }}
+
+{{ use: partial-tooltip-in-series() }}
+
+
+{{ target: map-region-state }}
#### itemStyle(Object)
@@ -125,18 +150,3 @@
noAlign = true,
noVerticalAlign = true
) }}
-
-{{ use: partial-tooltip-in-series-data() }}
-
-{{ use: partial-marker(
- prefix = "#",
- seriesType = "map",
- hasCoord = true
-) }}
-
-{{ use: partial-silent(
- prefix = "#"
-) }}
-
-{{ use: partial-tooltip-in-series() }}
-
diff --git a/zh/option/series/pictorialBar.md b/zh/option/series/pictorialBar.md
index 8f7def2..f476d3a 100644
--- a/zh/option/series/pictorialBar.md
+++ b/zh/option/series/pictorialBar.md
@@ -147,17 +147,32 @@ option = {
## emphasis(Object)
-### label(Object)
+高亮状态配置。
-{{ use: partial-label(
- prefix = "###",
- formatter = true
+{{ use: partial-focus-blur-scope() }}
+
+{{ use: pictoialBar-state(
+ prefix="##"
) }}
-### itemStyle(Object)
+## blur(Object)
-{{ use: partial-item-style(
- prefix = "###"
+淡出状态配置。开启 [emphasis.focus](~series-pictoialBar.emphasis.focus) 后有效。
+
+{{ use: pictoialBar-state(
+ prefix="##"
+) }}
+
+## select(Object)
+
+选中状态配置。开启 [selectedMode](~series-bar.selectedMode) 后有效。
+
+{{ use: partial-selected-mode(
+ version = '5.0.0'
+) }}
+
+{{ use: pictoialBar-state(
+ prefix="##"
) }}
{{ use: partial-barGrid(
@@ -211,16 +226,26 @@ option = {
### emphasis(Object)
-#### label(Object)
+单个数据的高亮状态配置。
-{{ use: partial-label(
- prefix = "####"
+{{ use: partial-bar-state(
+ prefix = "###"
) }}
-#### itemStyle(Object)
+### blur(Object)
-{{ use: partial-item-style(
- prefix = "####"
+单个数据的淡出状态配置。
+
+{{ use: partial-bar-state(
+ prefix = "###"
+) }}
+
+### select(Object)
+
+单个数据的选中状态配置。
+
+{{ use: partial-bar-state(
+ prefix = "###"
) }}
{{ use: partial-tooltip-in-series-data() }}
@@ -591,3 +616,17 @@ series: [{
}]
```
+{{ target: pictoialBar-state }}
+
+#${prefix} label(Object)
+
+{{ use: partial-label(
+ prefix = "#" + ${prefix},
+ formatter = ${prefix} === '##'
+) }}
+
+#${prefix} itemStyle(Object)
+
+{{ use: partial-item-style(
+ prefix = "#" + ${prefix}
+) }}
diff --git a/zh/option/series/pie.md b/zh/option/series/pie.md
index be38aa0..947d130 100644
--- a/zh/option/series/pie.md
+++ b/zh/option/series/pie.md
@@ -449,7 +449,7 @@ const option = {
{{ use: partial-pie-label(
prefix = "#" + ${prefix},
position = false,
- formatter = ${prefix === '##'}
+ formatter = ${prefix} === '##'
) }}
#${prefix} labelLine(Object)
diff --git a/zh/option/series/radar.md b/zh/option/series/radar.md
index 6ead677..62f26b4 100644
--- a/zh/option/series/radar.md
+++ b/zh/option/series/radar.md
@@ -111,31 +111,33 @@ const option = {
## emphasis(Object)
-高亮的样式设置
+高亮状态的配置。
-### itemStyle(Object)
+{{ use: partial-focus-blur-scope() }}
-{{ use: partial-item-style(
- prefix = "###"
+{{ use: radar-state(
+ prefix="##"
) }}
-### label(Object)
+## blur(Object)
-{{ use: partial-label(
- prefix = "###",
- formatter = true
+淡出状态的配置。开启 [emphasis.focus](~series-radar.emphasis.focus) 后有效。
+
+{{ use: radar-state(
+ prefix="##"
) }}
-### lineStyle(Object)
+## select(Object)
-{{ use: partial-line-style(
- prefix = "###"
+选中状态的配置。开启 [selectedMode](~series-radar.selectedMode) 后有效。
+
+{{ use: radar-state(
+ prefix="##"
) }}
-### areaStyle(Object)
-{{ use: partial-area-style(
- prefix = "###"
+{{ use: partial-selected-mode(
+ version = '5.0.0'
) }}
## data(Array)
@@ -207,31 +209,26 @@ data : [
### emphasis(Object)
-单个数据项样式的高亮设置。
+单个数据项样式的高亮状态。
-#### label(Object)
-
-{{ use: partial-label(
- prefix = "####",
- defaultPosition = "top"
+{{ use: radar-state(
+ prefix="###"
) }}
-#### itemStyle(Object)
-
-{{ use: partial-item-style(
- prefix = "####"
-) }}
+### blur(Object)
-#### lineStyle(Object)
+单个数据项样式的淡出状态。
-{{ use: partial-line-style(
- prefix = "####"
+{{ use: radar-state(
+ prefix="###"
) }}
-#### areaStyle(Object)
+### select(Object)
-{{ use: partial-area-style(
- prefix = "####"
+单个数据项样式的选中状态。
+
+{{ use: radar-state(
+ prefix="###"
) }}
{{ use: partial-tooltip-in-series-data() }}
@@ -251,3 +248,30 @@ data : [
{{ use: partial-tooltip-in-series() }}
+
+{{ target: radar-state }}
+
+#${prefix} itemStyle(Object)
+
+{{ use: partial-item-style(
+ prefix = "#" + ${prefix}
+) }}
+
+#${prefix} label(Object)
+
+{{ use: partial-label(
+ prefix = "#" + ${prefix},
+ formatter = ${prefix} === '##'
+) }}
+
+#${prefix} lineStyle(Object)
+
+{{ use: partial-line-style(
+ prefix = "#" + ${prefix}
+) }}
+
+#${prefix} areaStyle(Object)
+
+{{ use: partial-area-style(
+ prefix = "#" + ${prefix}
+) }}
\ No newline at end of file
diff --git a/zh/option/series/sankey.md b/zh/option/series/sankey.md
index 6a5cfe8..617ae27 100644
--- a/zh/option/series/sankey.md
+++ b/zh/option/series/sankey.md
@@ -85,20 +85,6 @@ const option = {"tooltip":{"trigger":"item","triggerOn":"mousemove"},"series":[{
控制节点拖拽的交互，默认开启。开启后，用户可以将图中任意节点拖拽到任意位置。若想关闭此交互，只需将值设为 `false` 就行了。
-## focusNodeAdjacency(boolean|string) = false
-
-<ExampleUIControlEnum options="false,true,allEdges,outEdges,inEdges" />
-
-鼠标 hover 到节点或边上，相邻接的节点和边高亮的交互，默认关闭，可手动开启。
-
-可选值为：
-
-+ `false`：hover 到节点或边时，只有被 hover 的节点或边高亮。
-+ `true`：同 `'allEdges'`。
-+ `'allEdges'`：hover 到节点时，与节点邻接的所有边以及边对应的节点全部高亮。hover 到边时，边和相邻节点高亮。
-+ `'outEdges'`：hover 的节点、节点的出边、出边邻接的另一节点 会被高亮。hover 到边时，边和相邻节点高亮。
-+ `'inEdges'`：hover 的节点、节点的入边、入边邻接的另一节点 会被高亮。hover 到边时，边和相邻节点高亮。
-
## levels(Array)
桑基图每一层的设置。可以逐层设置，如下：
@@ -146,23 +132,29 @@ levels: [{
指定设置的是桑基图哪一层，取值从 0 开始。
-### itemStyle(Object)
+{{ use: sankey-state(
+ prefix="##"
+) }}
-桑基图指定层节点的样式。
+### emphasis(Object)
-{{ use: partial-item-style(
- prefix = "###",
- useColorPalatte = true
+{{ use: sankey-state(
+ prefix="###"
) }}
-### lineStyle(Object)
+### blur(Object)
-桑基图指定层出边的样式。其中 [lineStyle.color](~series-sankey.lineStyle.color) 支持设置为`'source'`或者`'target'`特殊值，此时出边会自动取源节点或目标节点的颜色作为自己的颜色。
+{{ use: sankey-state(
+ prefix="###"
+) }}
-{{ use: partial-sankey-line-style(
- prefix = "###"
+### select(Object)
+
+{{ use: sankey-state(
+ prefix="###"
) }}
+
## label(Object)
`label` 描述了每个矩形节点中文本标签的样式。
@@ -203,25 +195,34 @@ levels: [{
## emphasis(Object)
-桑基图的高亮样式设置。
+桑基图的高亮状态。
-### label(Object)
+{{ use: partial-focus-blur-scope(
+ isTree=true
+) }}
-{{ use: partial-label(
- prefix = "###",
- formatter1d = true
+{{ use: sankey-state(
+ prefix="##"
) }}
-### itemStyle(Object)
+## blur(Object)
-{{ use: partial-item-style(
- prefix = "###"
+桑基图的淡出状态。开启 [emphasis.focus](~series-sankey.emphasis.focus) 后有效。
+
+{{ use: sankey-state(
+ prefix="##"
) }}
-### lineStyle(Object)
+## select(Object)
-{{ use: partial-sankey-line-style(
- prefix = "###"
+桑基图的选中状态。开启 [selectedMode](~series-sankey.selectedMode) 后有效。
+
+{{ use: sankey-state(
+ prefix="##"
+) }}
+
+{{ use: partial-selected-mode(
+ version = '5.0.0'
) }}
## data(Array)
@@ -272,16 +273,20 @@ data: [{
### emphasis(Object)
-#### itemStyle(Object)
+{{ use: sankey-node-state(
+ prefix="###"
+) }}
-{{ use: partial-item-style(
- prefix = "####"
+### blur(Object)
+
+{{ use: sankey-node-state(
+ prefix="###"
) }}
-#### label(Object)
+### select(Object)
-{{ use: partial-label(
- prefix = "####"
+{{ use: sankey-node-state(
+ prefix="###"
) }}
{{ use: partial-tooltip-in-series-data() }}
@@ -332,6 +337,22 @@ links: [{
prefix = "####"
) }}
+### blur(Object)
+
+#### lineStyle(Object)
+
+{{ use: partial-sankey-line-style(
+ prefix = "####"
+) }}
+
+### select(Object)
+
+#### lineStyle(Object)
+
+{{ use: partial-sankey-line-style(
+ prefix = "####"
+) }}
+
## edges(Array)
同 [links](~series-sankey.links)
@@ -349,7 +370,6 @@ links: [{
{{ use: partial-tooltip-in-series() }}
-
{{ target: partial-sankey-line-style }}
#${prefix} color(Color) = "'#314656'"
@@ -368,3 +388,37 @@ links: [{
prefix = ${prefix}
) }}
+{{ target: sankey-node-state }}
+
+#${prefix} label(Object)
+
+{{ use: partial-label(
+ prefix = "#" + ${prefix}
+) }}
+
+#${prefix} itemStyle(Object)
+
+{{ use: partial-item-style(
+ prefix = "#" + ${prefix}
+) }}
+
+{{ target: sankey-state }}
+
+#${prefix} label(Object)
+
+{{ use: partial-label(
+ prefix = "#" + ${prefix},
+ formatter1d = ${prefix} === '##'
+) }}
+
+#${prefix} itemStyle(Object)
+
+{{ use: partial-item-style(
+ prefix = "#" + ${prefix}
+) }}
+
+#${prefix} lineStyle(Object)
+
+{{ use: partial-sankey-line-style(
+ prefix = "#" + ${prefix}
+) }}
diff --git a/zh/option/series/scatter.md b/zh/option/series/scatter.md
index c4f2874..51666fc 100644
--- a/zh/option/series/scatter.md
+++ b/zh/option/series/scatter.md
@@ -153,20 +153,6 @@ const option = {
prefix="##"
) }}
-## emphasis(Object)
-
-高亮的图形和标签样式。
-
-### scale(boolean) = true
-
-<ExampleUIControlBoolean default="true" />
-
-是否开启高亮后的放大效果。
-
-{{ use: scatter-state(
- prefix="##"
-) }}
-
## blur(Object)
淡出状态的配置。开启 [emphasis.focus](~series-scatter.emphasis.focus) 后有效。
@@ -295,7 +281,7 @@ const option = {
{{ use: partial-label(
prefix = "#" + ${prefix},
- formatter = ${prefix === '##'}
+ formatter = ${prefix} === '##'
) }}
#${prefix} itemStyle(Object)
diff --git a/zh/option/series/sunburst.md b/zh/option/series/sunburst.md
index 97a9a5d..b9c68c1 100644
--- a/zh/option/series/sunburst.md
+++ b/zh/option/series/sunburst.md
@@ -7,6 +7,7 @@
如果是 `number` 类型，则表示标签的旋转角，从 -90 度到 90 度，正值是逆时针。
+{{ if: ${prefix} === '##' }}
除此之外，还可以是字符串 `'radial'` 表示径向旋转、`'tangential'` 表示切向旋转。
默认径向旋转，如果不需要文字旋转，可以将其设为 `0`。
@@ -14,6 +15,9 @@
下面的例子展示了不同的 `rotate` 设置方法：
~[700x400](${galleryViewPath}sunburst-label-rotate&edit=1&reset=1)
+{{ else }}
+同 [label.rotate](~sunburst.label.rotate)
+{{ /if }}
#${prefix} align(string) = 'center'
@@ -21,7 +25,11 @@
文字对齐方式，可取值为：`'left'`、 `'center'`、 `'right'`。注意，`'left'` 是指靠近内圈，而 `'right'` 是指靠近外圈。
+{{ if: ${prefix} === '##' }}
~[700x400](${galleryViewPath}doc-example/sunburst-label-align&edit=1&reset=1)
+{{ else }}
+同 [label.align](~sunburst.label.align)
+{{ /if }}
#${prefix} minAngle(number) = null
@@ -42,7 +50,7 @@
{{ target: partial-sunburst-label-props }}
-${prefix} label(Object)
+#${prefix} label(Object)
`label` 描述了每个扇形块中，文本标签的样式。
@@ -51,14 +59,14 @@ ${prefix} label(Object)
{{ use: partial-label-desc() }}
{{ use: partial-sunburst-label-helper(
- prefix = ${prefix}
+ prefix = ${prefix} + '#'
) }}
{{ target: partial-sunburst-itemStyle-props }}
-${prefix} itemStyle(Object)
+#${prefix} itemStyle(Object)
旭日图扇形块的样式。
@@ -66,10 +74,8 @@ ${prefix} itemStyle(Object)
**优先级：[series.data.itemStyle](~series-sunburst.data.itemStyle) > [series.levels.itemStyle](~series-sunburst.levels.itemStyle) > [series.itemStyle](~series-sunburst.itemStyle)。**
-ECharts 中，通常使用 *emphasis* 表示鼠标移动到图形上后的高亮状态。对于旭日图而言，我们引入了另两种状态：*highlight* 表示由于高亮了某个扇形块引起的其他相关扇形块的高亮；*downplay* 表示除了 highlight 扇形块之外的被淡化的扇形块。参见 [highlightPolicy](~series-sunburst.highlightPolicy)。
-
{{ use: partial-item-style(
- prefix = ${prefix},
+ prefix = ${prefix} + '#',
useColorPalatte = true,
defaultBorderWidth = 1,
defaultBorderColor = "'white'",
@@ -78,46 +84,17 @@ ECharts 中，通常使用 *emphasis* 表示鼠标移动到图形上后的高亮
-{{ target: partial-sunburst-other-state }}
-
-#${prefix} emphasis(Object)
-
-鼠标悬停后的配置项。
-
-{{ use: partial-sunburst-label-props(
- prefix = "##" + ${prefix}
-) }}
-
-{{ use: partial-sunburst-itemStyle-props(
- prefix = "##" + ${prefix}
-) }}
-
-#${prefix} highlight(Object)
-
-鼠标悬停后相关扇形块的配置项。参见 [highlightPolicy](~series-sunburst.highlightPolicy)。
+{{ target: partial-sunburst-state }}
{{ use: partial-sunburst-label-props(
- prefix = "##" + ${prefix}
-) }}
-
-{{ use: partial-sunburst-itemStyle-props(
- prefix = "##" + ${prefix}
-) }}
-
-#${prefix} downplay(Object)
-
-鼠标悬停后不相关扇形块的配置项。参见 [highlightPolicy](~series-sunburst.highlightPolicy)。
-
-{{ use: partial-sunburst-label-props(
- prefix = "##" + ${prefix}
+ prefix = ${prefix}
) }}
{{ use: partial-sunburst-itemStyle-props(
- prefix = "##" + ${prefix}
+ prefix = ${prefix}
) }}
-
{{ target: series-sunburst }}
# series.sunburst(Object)
@@ -301,12 +278,6 @@ const option = {
defaultRadius = "[0, '75%']"
) }}
-## labelLayout(Object|Function)
-
-{{ use: partial-label-layout(
- prefix = "##"
-) }}
-
## data(Array)
[series-sunburst.data](~series-sunburst.data) 的数据格式是树状的，例如：
@@ -364,64 +335,48 @@ const option = {
意义同 HTML `<a>` 标签中的 `target`，参见 [series-sunburst.data.link](~series-sunburst.data.link)。可选值为：`'blank'` 或 `'self'`。
{{ use: partial-sunburst-label-props(
- prefix = "###"
+ prefix = "##"
) }}
-{{ use: partial-sunburst-itemStyle-props(
- prefix = "###"
+## labelLayout(Object|Function)
+
+{{ use: partial-label-layout(
+ prefix = "##"
) }}
-{{ use: partial-sunburst-other-state(
+{{ use: partial-sunburst-itemStyle-props(
prefix = "##"
) }}
-### children(Array)
+### emphasis
-子节点，递归定义，格式同 [series-sunburst.data](~series-sunburst.data)。
+高亮状态配置。
-{{ use: partial-sunburst-label-props(
- prefix = "##"
+{{ use: partial-sunburst-state(
+ prefix = "###"
) }}
-{{ use: partial-sunburst-itemStyle-props(
- prefix = "##"
-) }}
+### blur
-## highlightPolicy(string) = 'descendant'
+淡出状态配置。
-<ExampleUIControlEnum default="descendant" options="descendant,ancestor,none" />
+{{ use: partial-sunburst-state(
+ prefix = "###"
+) }}
-当鼠标移动到一个扇形块时，可以高亮相关的扇形块。**如果其值为 `'descendant'`，则会高亮该扇形块和后代元素，其他元素将被淡化（*downplay*，参见 [itemStyle](~series-sunburst.itemStyle)）；如果其值为 `'ancestor'`，则会高亮该扇形块和祖先元素；如果其值为 `'self'` 则只高亮自身；`'none'` 则不会淡化其他元素。**
+### select
-~[700x350](${galleryViewPath}doc-example/sunburst-highlight-descendant&edit=1&reset=1)
+选中状态配置。
-上面的例子 `highlightPolicy` 是默认值 `'descendant'`，我们通过 `dispatchAction` 触发了旭日图中某个数据块的高亮操作（相当于将鼠标移动到下图中的 `target` 扇形块中）。目标扇形块将采用 `emphasis` 的样式（在本例中是为红色），和目标扇形块相关的扇形块（由 `highlightPolicy` 决定哪些扇形块是相关的）采用 `highlight` 的样式（橙色），其他扇形块采用 `downplay` 的样式（灰色）。而如果没有高亮对象，则所有扇形块都采用默认的样式。样式定义是类似这样的：
+{{ use: partial-sunburst-state(
+ prefix = "###"
+) }}
-```js
-itemStyle: {
- color: 'yellow',
- borderWidth: 2
-},
-emphasis: {
- itemStyle: {
- color: 'red'
- }
-},
-highlight: {
- itemStyle: {
- color: 'orange'
- }
-},
-downplay: {
- itemStyle: {
- color: '#ccc'
- }
-}
-```
-而如果将 `highlightPolicy` 设为 `'ancestor'`，则会得到这样的效果：
+### children(Array)
+
+子节点，递归定义，格式同 [series-sunburst.data](~series-sunburst.data)。
-~[700x350](${galleryViewPath}doc-example/sunburst-highlight-ancestor&edit=1&reset=1)
## nodeClick(boolean|string) = 'rootToNode'
@@ -452,15 +407,43 @@ function(nodeA, nodeB) {
如果数据没有 `name`，是否需要渲染文字。
{{ use: partial-sunburst-label-props(
- prefix = "##"
+ prefix = "#"
) }}
{{ use: partial-sunburst-itemStyle-props(
+ prefix = "#"
+) }}
+
+## emphasis
+
+高亮状态配置。
+
+{{ use: partial-focus-blur-scope(
+ isTree=true
+) }}
+
+{{ use: partial-sunburst-state(
prefix = "##"
) }}
-{{ use: partial-sunburst-other-state(
- prefix = "#"
+## blur
+
+淡出状态配置。开启 [emphasis.focus](~series-sunburst.emphasis.focus) 后有效。
+
+{{ use: partial-sunburst-state(
+ prefix = "##"
+) }}
+
+## select
+
+选中状态配置。开启 [selectedMode](~series-sunburst.selectedMode) 后有效。
+
+{{ use: partial-sunburst-state(
+ prefix = "##"
+) }}
+
+{{ use: partial-selected-mode(
+ version = '5.0.0'
) }}
## levels(Array)
@@ -495,15 +478,35 @@ series: {
```
{{ use: partial-sunburst-label-props(
- prefix = "###"
+ prefix = "##"
) }}
{{ use: partial-sunburst-itemStyle-props(
+ prefix = "##"
+) }}
+
+### emphasis
+
+高亮状态配置。
+
+{{ use: partial-sunburst-state(
prefix = "###"
) }}
-{{ use: partial-sunburst-other-state(
- prefix = "##"
+### blur
+
+淡出状态配置。
+
+{{ use: partial-sunburst-state(
+ prefix = "###"
+) }}
+
+### select
+
+选中状态配置。
+
+{{ use: partial-sunburst-state(
+ prefix = "###"
) }}
{{ use: partial-animation(
diff --git a/zh/option/series/themeRiver.md b/zh/option/series/themeRiver.md
index 5d3fff2..3c8ca11 100644
--- a/zh/option/series/themeRiver.md
+++ b/zh/option/series/themeRiver.md
@@ -156,26 +156,32 @@ const option = {
## emphasis(Object)
-高亮的图形和标签样式。
+高亮状态的配置。
-### label(Object)
+{{ use: partial-focus-blur-scope() }}
-{{ use: partial-label(
- prefix = "###",
- defaultPosition = "'left'",
- defaultMargin = 4,
- noAlign = true,
- noVerticalAlign = true,
- defaultColor = "'#000'",
- defaultFontSize = 11
-) }}
+{{ use: themeRiver-state(
+ prefix="##"
+)}}
-### itemStyle(Object)
+## blur(Object)
-{{ use: partial-item-style(
- prefix = "###",
- defaultShadowBlur = 20,
- defaultShadowColor = "'rgba(0,0,0,0.8)'"
+淡出状态的配置。
+
+{{ use: themeRiver-state(
+ prefix="##"
+)}}
+
+## select(Object)
+
+选中状态的配置。
+
+{{ use: themeRiver-state(
+ prefix="##"
+)}}
+
+{{ use: partial-selected-mode(
+ version = '5.0.0'
) }}
## data(Array)
@@ -214,3 +220,22 @@ data: [
{{ use: partial-tooltip-in-series() }}
+{{ target: themeRiver-state }}
+
+#${prefix} label(Object)
+
+{{ use: partial-label(
+ prefix = "#" + ${prefix},
+ defaultPosition = "'left'",
+ defaultMargin = 4,
+ noAlign = true,
+ noVerticalAlign = true,
+ defaultColor = "'#000'",
+ defaultFontSize = 11
+) }}
+
+#${prefix} itemStyle(Object)
+
+{{ use: partial-item-style(
+ prefix = "#" + ${prefix}
+) }}
\ No newline at end of file
diff --git a/zh/option/series/tree.md b/zh/option/series/tree.md
index da23fe5..96c3236 100644
--- a/zh/option/series/tree.md
+++ b/zh/option/series/tree.md
@@ -184,23 +184,32 @@ const option = {
树图中个图形和标签高亮的样式。
-### itemStyle(Object)
+{{ use: partial-focus-blur-scope(
+ isTree=true
+) }}
-{{ use: partial-item-style(
- prefix = "###"
+{{ use: tree-state(
+ prefix="##"
) }}
-### lineStyle(Object)
+## blur(Object)
-{{ use: partial-tree-line-style(
- prefix = "###"
+淡出状态的相关配置。开启 [emphasis.focus](~series-tree.emphasis.focus) 后有效。
+
+{{ use: tree-state(
+ prefix="##"
) }}
-### label(Object)
+## select(Object)
-{{ use: partial-label(
- prefix = "###",
- formatter1d = true
+选中状态的相关配置。开启 [selectedMode](~series-tree.selectedMode) 后有效。
+
+{{ use: tree-state(
+ prefix="##"
+) }}
+
+{{ use: partial-selected-mode(
+ version = '5.0.0'
) }}
## leaves(Object)
@@ -228,21 +237,29 @@ const option = {
### emphasis(Object)
-叶子节点高亮的样式。
+叶子节点高亮状态的配置。
-#### label(Object)
+{{ use: tree-node-state(
+ prefix="###"
+) }}
-{{ use: partial-label(
- prefix = "####",
- formatter1d = true
+### blur(Object)
+
+叶子节点淡出状态的配置。
+
+{{ use: tree-node-state(
+ prefix="###"
) }}
-#### itemStyle(Object)
+### select(Object)
-{{ use: partial-item-style(
- prefix = "####"
+叶子节点选中状态的配置。
+
+{{ use: tree-node-state(
+ prefix="###"
) }}
+
## data(Object)
[series-tree.data](~series-tree.data) 的数据格式是树状结构的，例如：
@@ -301,20 +318,29 @@ const option = {
### emphasis(Object)
-高亮的节点样式
+节点高亮状态的配置。
-#### label(Object)
+{{ use: tree-node-state(
+ prefix="###"
+) }}
-{{ use: partial-label(
- prefix = "####"
+### blur(Object)
+
+节点淡出状态的配置。
+
+{{ use: tree-node-state(
+ prefix="###"
) }}
-#### itemStyle(Object)
+### select(Object)
-{{ use: partial-item-style(
- prefix = "####"
+节点选中状态的配置。
+
+{{ use: tree-node-state(
+ prefix="###"
) }}
+
{{ use: partial-tooltip-in-series-data() }}
{{ use: partial-animation(
@@ -351,3 +377,36 @@ const option = {
prefix = ${prefix}
) }}
+
+
+{{ target: tree-node-state }}
+
+#${prefix} itemStyle(Object)
+
+{{ use: partial-item-style(
+ prefix = "#" + ${prefix}
+) }}
+
+#${prefix} label(Object)
+
+{{ use: partial-label(
+ prefix = "#" + ${prefix},
+ formatter1d = ${prefix} === '##'
+) }}
+
+{{ target: tree-edge-state }}
+
+#${prefix} lineStyle(Object)
+
+{{ use: partial-tree-line-style(
+ prefix = "#" + ${prefix}
+) }}
+
+{{ target: tree-state }}
+
+{{ use: tree-node-state(
+ prefix = ${prefix}
+) }}
+{{ use: tree-edge-state(
+ prefix = ${prefix}
+) }}
diff --git a/zh/option/series/treemap.md b/zh/option/series/treemap.md
index 9fa7ea3..fe27c75 100644
--- a/zh/option/series/treemap.md
+++ b/zh/option/series/treemap.md
@@ -303,8 +303,6 @@ levels: [
...
]
```
-
-<br>
**视觉映射的规则**
treemap中首要关注的是如何在视觉上较好得区分『不同层级』、『同层级中不同类别』。这需要合理得设置不同层级的『矩形颜色』、『边界粗细』、『边界颜色』甚至『矩形颜色饱和度』等。
@@ -315,8 +313,6 @@ treemap中首要关注的是如何在视觉上较好得区分『不同层级』
这样，可以做到：父层级配置 `color` 列表，子层级配置 `colorSaturation`。父层级的每个节点会从 `color` 列表中得到一个颜色，子层级的节点会从 `colorSaturation` 中得到一个值，并且继承父节点得到的颜色，合成得到自己的最终颜色。
-
-<br>
**维度与『额外的视觉映射』**
例子：每一个 `value` 字段是一个 Array，其中每个项对应一个维度（dimension）。
@@ -351,11 +347,8 @@ treemap中首要关注的是如何在视觉上较好得区分『不同层级』
treemap 默认把第一个维度（Array 第一项）映射到『面积』上。而如果想表达更多信息，用户可以把其他的某一个维度（[series-treemap.visualDimension](~series-treemap.viusalDimension)），映射到其他的『视觉元素』上，比如颜色明暗等。参见[例子](${galleryEditorPath}treemap-obama&edit=1&reset=1)中，legend选择 `Growth`时的状态。
-<br>
-
{{ use: partial-treemap-borderColor-setting() }}
-<br>
**borderWidth, gapWidth, borderColor 的解释**
@@ -368,6 +361,10 @@ treemap 默认把第一个维度（Array 第一项）映射到『面积』上。
prefix = "#"
) }}
+{{ use: partial-selected-mode(
+ version = '5.0.0'
+) }}
+
## breadcrumb(Object)
面包屑，能够显示当前节点的路径。
@@ -421,7 +418,7 @@ treemap 默认把第一个维度（Array 第一项）映射到『面积』上。
defaultColor = "#fff"
) }}
-### emphasis(*)
+### emphasis(Object)
#### itemStyle(Object)
@@ -686,8 +683,6 @@ treemap 默认把第一个维度（Array 第一项）映射到『面积』上。
name = "label"
) }}
-<br>
-
{{ use: partial-label(
prefix = ${prefix} + "#",
defaultPosition = "'inside'",
@@ -710,8 +705,6 @@ treemap 默认把第一个维度（Array 第一项）映射到『面积』上。
name = "label"
) }}
-<br>
-
{{ use: partial-label(
prefix = ${prefix} + "#",
defaultPosition = "'inside'",
@@ -730,8 +723,6 @@ treemap 默认把第一个维度（Array 第一项）映射到『面积』上。
name = "itemStyle"
) }}
-<br>
-
{{ use: partial-treemap-item-style(
prefix = ${prefix} + "#",
itemStyleType = 'normal'
@@ -739,34 +730,36 @@ treemap 默认把第一个维度（Array 第一项）映射到『面积』上。
#${prefix} emphasis(Object)
-##${prefix} label(Object)
+高亮状态配置。
-{{ use: partial-label(
- prefix = ${prefix} + "##",
- defaultPosition = "'inside'",
- formatter = true
+{{ if: ${prefix} === '#' }}
+{{ use: partial-focus-blur-scope(
+ isTree=true
) }}
+{{ /if }}
-##${prefix} upperLabel(Object)
-
-{{ use: partial-label(
- prefix = ${prefix} + "##",
- defaultPosition = "'inside'",
- formatter = true
+{{ use: treemap-state(
+ prefix="#" + ${prefix}
) }}
-##${prefix} itemStyle(Object)
+#${prefix} blur(Object)
-{{ use: partial-treemap-item-style(
- prefix = ${prefix} + "##",
- itemStyleType = 'emphasis'
+淡出状态配置。
+
+{{ use: treemap-state(
+ prefix="#" + ${prefix}
) }}
+#${prefix} select(Object)
+选中状态配置。
-{{ target: partial-treemap-prop-location-desc }}
+{{ use: treemap-state(
+ prefix="#" + ${prefix}
+) }}
-<br>
+
+{{ target: partial-treemap-prop-location-desc }}
> 注：treemap中 `${name}` 属性可能在多处地方存在：
{{ if: ${name} !== 'color' }}> * 于 [sereis-treemap](~series-treemap) 根下，表示本系列全局的统一设置。{{ /if }}
@@ -833,8 +826,6 @@ treemap 默认把第一个维度（Array 第一项）映射到『面积』上。
如果设置此属性，则 `borderColor` 的设置无效，而是：取当前节点计算出的颜色（比如从父节点遗传而来），在此颜色值上设置 `borderColorSaturation` 得到最终颜色。这种方式，能够做出『不同区块有不同色调的矩形间隔线』的效果，能够便于区分层级。
-<br>
-
{{ use: partial-treemap-borderColor-setting() }}
{{ use: partial-style-shadow-opacity(
@@ -852,3 +843,28 @@ treemap 默认把第一个维度（Array 第一项）映射到『面积』上。
参见 [例子](${galleryEditorPath}doc-example/treemap-borderColor&edit=1&reset=1)，注意其中红色的区块中的子矩形其实是更深层级，和其他用白色缝隙区分的矩形不是在一个层级。所以，红色区块中矩形的分割线的颜色，我们在 `borderColorSaturation` 中设置为『加了饱和度变化的红颜色』，以示区别。
+
+{{ target: treemap-state }}
+
+#${prefix} label(Object)
+
+{{ use: partial-label(
+ prefix = ${prefix} + "#",
+ defaultPosition = "'inside'",
+ formatter = true
+) }}
+
+#${prefix} upperLabel(Object)
+
+{{ use: partial-label(
+ prefix = ${prefix} + "#",
+ defaultPosition = "'inside'",
+ formatter = true
+) }}
+
+#${prefix} itemStyle(Object)
+
+{{ use: partial-treemap-item-style(
+ prefix = ${prefix} + "#",
+ itemStyleType = 'emphasis'
+) }}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org