zh: add universal transition and group id
diff --git a/en/option/partial/encode-dimensions.md b/en/option/partial/encode-dimensions.md
index 85b3f99..04a08a8 100644
--- a/en/option/partial/encode-dimensions.md
+++ b/en/option/partial/encode-dimensions.md
@@ -59,7 +59,10 @@
itemId: 2,
// Using dimensions[3] as the name of each data item. This is useful in charts like
// 'pie', 'funnel', where data item name can be displayed in legend.
- itemName: 3
+ itemName: 3,
+ // Using dimensions[4] as the groupId of each data item. groupId will be used to categorize the data. And to determine
+ // How the merge and split animation are performed in the universal transition. See universalTransition option for detail.
+ itemGroupId: 4
}
// These properties only work in cartesian(grid) coordinate system:
diff --git a/en/option/partial/group-id.md b/en/option/partial/group-id.md
new file mode 100644
index 0000000..79d6363
--- /dev/null
+++ b/en/option/partial/group-id.md
@@ -0,0 +1,10 @@
+{{ target: partial-series-group-id }}
+
+## dataGroupId(string)
+
+
+
+{{ target: partial-data-group-id }}
+
+
+#${prefix} groupId(string)
diff --git a/en/option/partial/universal-transition.md b/en/option/partial/universal-transition.md
new file mode 100644
index 0000000..0cb1f46
--- /dev/null
+++ b/en/option/partial/universal-transition.md
@@ -0,0 +1,2 @@
+{{ target: partial-universal-transition }}
+
diff --git a/src/components/DocContent.vue b/src/components/DocContent.vue
index 241b6f8..efe5d0a 100644
--- a/src/components/DocContent.vue
+++ b/src/components/DocContent.vue
@@ -42,7 +42,6 @@
import {
getPageTotalDescAsync,
getPageOutlineAsync,
- getOutlineAsync,
convertPathToId,
getOutlineNode,
getDefaultPage
diff --git a/zh/option/partial/encode-dimensions.md b/zh/option/partial/encode-dimensions.md
index b3a278c..b8c4a76 100644
--- a/zh/option/partial/encode-dimensions.md
+++ b/zh/option/partial/encode-dimensions.md
@@ -54,7 +54,9 @@
// 表示使用第二个维度中的值作为 id。这在使用 setOption 动态更新数据时有用处，可以使新老数据用 id 对应起来，从而能够产生合适的数据更新动画。
itemId: 2,
// 指定数据项的名称使用第三个维度在饼图等图表中有用，可以使这个名字显示在图例（legend）中。
- itemName: 3
+ itemName: 3,
+ // 指定数据项的组 ID (groupID)，组 ID 会被用于分类数据，并在全局过渡动画中决定如何进行合并和分裂动画，具体见 universalTransition
+ itemGroupId: 4
}
// 直角坐标系（grid/cartesian）特有的属性：
diff --git a/zh/option/partial/group-id.md b/zh/option/partial/group-id.md
new file mode 100644
index 0000000..5c58c0b
--- /dev/null
+++ b/zh/option/partial/group-id.md
@@ -0,0 +1,13 @@
+{{ target: partial-series-group-id }}
+
+## dataGroupId(string)
+
+该系列所有数据共有的组 ID。组 ID 会被用于分类数据，并在全局过渡动画中决定如何进行合并和分裂动画。
+
+如果你使用了[dataset](~dataset)组件来表达数据，推荐使用`encode.itemGroupID`来指定哪个维度被编码为组 ID。
+
+{{ target: partial-data-group-id }}
+
+#${prefix} groupId(string)
+
+该数据项的组 ID。组 ID 会被用于分类数据，并在全局过渡动画中决定如何进行合并和分裂动画。
\ No newline at end of file
diff --git a/zh/option/partial/universal-transition.md b/zh/option/partial/universal-transition.md
new file mode 100644
index 0000000..90b9588
--- /dev/null
+++ b/zh/option/partial/universal-transition.md
@@ -0,0 +1,52 @@
+{{ target: partial-universal-transition }}
+
+#${prefix} universalTransition(object)
+
+全局过渡动画相关的配置。
+
+全局过渡动画（Universal Transition）提供了任意系列之间进行变形动画的功能。开启该功能后，每次`setOption`，相同`id`的系列之间会自动关联进行动画的过渡，更细粒度的关联配置见`universalTransition.seriesKey`配置。
+
+通过配置`encode.itemGroupId`或者`dataGroupId`等指定数据的分组，还可以实现诸如下钻，聚合等一对多或者多对一的动画。
+
+可以直接在系列中配置 `universalTransition: true` 开启该功能。也可以提供一个对象进行更多属性的配置。
+
+##${prefix} enabled(boolean) = false
+
+是否开启全局过渡动画。
+
+
+##${prefix} seriesKey(string | Array)
+
+`seriesKey`决定了如何关联需要动画的系列，未配置时会默认取系列的`id`。
+
+通常该配置为一个字符串，配置为相同`seriesKey`的系列之间会进行动画的过渡。也可以像下面配置为一个数组：
+
+```js
+seriesKey: ['male', 'female']
+```
+
+配置为数组意味着在动画的时候所有数组项指定的系列会合并为当前系列。比如该配置是指`id`或者`seriesKey`为`'male'`和`'female'`的系列会合并成当前系列。
+
+##${prefix} divideShape(string)
+
+`divideShape`决定在一对多或者多对一的动画中，当前系列的图形如何分裂成多个图形。目前支持
+
++ `'split'` 通过一定的算法将分割图形成为多个。
++ `'clone'` 从当前图形克隆得到多个。
+
+为了较好的效果，不同的系列会默认有不同的配置，比如散点图这种图形比较小且复杂的默认采用了`'clone'`，而柱状图这种更加规则的则默认是`'split'`。你可以根据你自己的场景需求设置为需要的分裂策略。
+
+##${prefix} delay(Function)
+
+```ts
+(index: number, count: number) => number
+```
+
+配置一对多或者多对一的动画中每个图形的动画延时，设置不同的动画延时可以给动画带来一定的趣味性。比如下面代码每个图形通过一个随机的延时造成一种错落的效果：
+
+```js
+delay: function (index, count) {
+ return Math.random() * 1000;
+}
+```
+
diff --git a/zh/option/series/bar.md b/zh/option/series/bar.md
index ff4270a..28a6381 100644
--- a/zh/option/series/bar.md
+++ b/zh/option/series/bar.md
@@ -240,6 +240,8 @@
{{ use: partial-datasetIndex() }}
+{{ use: partial-series-group-id() }}
+
## data(Array)
{{ use: partial-2d-data-desc() }}
@@ -252,6 +254,10 @@
单个数据项的数值。
+{{ use: partial-data-group-id(
+ prefix = '##'
+) }}
+
{{ use: partial-bar-state(
prefix = "##",
topLevel = false,
@@ -313,6 +319,10 @@
prefix = "#"
) }}
+{{ use: partial-universal-transition(
+ prefix = "#"
+) }}
+
{{ use: partial-tooltip-in-series() }}
diff --git a/zh/option/series/boxplot.md b/zh/option/series/boxplot.md
index 211e806..9127fc4 100644
--- a/zh/option/series/boxplot.md
+++ b/zh/option/series/boxplot.md
@@ -168,6 +168,8 @@
prefix = "#"
) }}
+{{ use: partial-series-group-id() }}
+
## data(Array)
数据格式是如下的二维数组。
@@ -210,6 +212,10 @@
[min, Q1, median (or Q2), Q3, max]
```
+{{ use: partial-data-group-id(
+ prefix = '##'
+) }}
+
### itemStyle(Object)
盒须图单个数据样式。
@@ -286,5 +292,11 @@
defaultAnimationDuration = 800
) }}
+
+{{ use: partial-universal-transition(
+ prefix = "#"
+) }}
+
+
{{ use: partial-tooltip-in-series() }}
diff --git a/zh/option/series/candlestick.md b/zh/option/series/candlestick.md
index f2cde03..4c18e5f 100644
--- a/zh/option/series/candlestick.md
+++ b/zh/option/series/candlestick.md
@@ -345,6 +345,7 @@
prefix = "#"
) }}
+{{ use: partial-series-group-id() }}
## data(Array)
数据格式是如下的二维数组。
@@ -380,6 +381,10 @@
[open, close, lowest, highest] （即：[开盘值, 收盘值, 最低值, 最高值]）
```
+{{ use: partial-data-group-id(
+ prefix = '##'
+) }}
+
### itemStyle(Object)
单个 K 线图数据的图形样式。
@@ -455,6 +460,10 @@
defaultAnimationDuration = 300
) }}
+{{ use: partial-universal-transition(
+ prefix = "#"
+) }}
+
{{ use: partial-tooltip-in-series() }}
diff --git a/zh/option/series/custom.md b/zh/option/series/custom.md
index 6d6f912..e7502d9 100644
--- a/zh/option/series/custom.md
+++ b/zh/option/series/custom.md
@@ -416,6 +416,8 @@
{{ use: partial-datasetIndex() }}
+{{ use: partial-series-group-id() }}
+
## data(Array)
{{ use: partial-2d-data-desc() }}
@@ -428,6 +430,10 @@
单个数据项的数值。
+{{ use: partial-data-group-id(
+ prefix = '##'
+) }}
+
### itemStyle(Object)
{{ use: partial-item-style(
@@ -463,6 +469,10 @@
prefix = "#"
) }}
+{{ use: partial-universal-transition(
+ prefix = "#"
+) }}
+
{{ use: partial-tooltip-in-series() }}
diff --git a/zh/option/series/funnel.md b/zh/option/series/funnel.md
index c145bd3..7383810 100644
--- a/zh/option/series/funnel.md
+++ b/zh/option/series/funnel.md
@@ -192,6 +192,9 @@
prefix = "#"
) }}
+
+{{ use: partial-series-group-id() }}
+
## data(Array)
{{ use: partial-1d-data-desc() }}
@@ -275,6 +278,10 @@
prefix = "#"
) }}
+{{ use: partial-universal-transition(
+ prefix = "#"
+) }}
+
{{ use: partial-tooltip-in-series() }}
diff --git a/zh/option/series/heatmap.md b/zh/option/series/heatmap.md
index a4dc1c7..14ef509 100644
--- a/zh/option/series/heatmap.md
+++ b/zh/option/series/heatmap.md
@@ -163,6 +163,17 @@
version = '5.0.0'
) }}
+{{ use: partial-series-encode(
+ prefix = "#"
+) }}
+
+{{ use: partial-seriesLayoutBy() }}
+
+{{ use: partial-datasetIndex() }}
+
+
+{{ use: partial-series-group-id() }}
+
## data(Array)
{{ use: partial-2d-data-desc() }}
@@ -175,6 +186,10 @@
数据项值。
+{{ use: partial-data-group-id(
+ prefix = '##'
+) }}
+
### label(Object)
在直角坐标系([coordinateSystem](~series-heatmap.coordinateSystem): 'cartesian2d')上有效。
@@ -224,7 +239,6 @@
{{ use: partial-tooltip-in-series() }}
-
{{ target: heatmap-state }}
#${prefix} itemStyle(Object)
@@ -240,3 +254,7 @@
defaultPosition = "inside"
) }}
+
+{{ use: partial-universal-transition(
+ prefix = "#"
+) }}
diff --git a/zh/option/series/line.md b/zh/option/series/line.md
index 9cee6e9..df76029 100644
--- a/zh/option/series/line.md
+++ b/zh/option/series/line.md
@@ -305,6 +305,8 @@
{{ use: partial-datasetIndex() }}
+{{ use: partial-series-group-id() }}
+
## data(Array)
{{ use: partial-2d-data-desc() }}
@@ -317,6 +319,10 @@
单个数据项的数值。
+{{ use: partial-data-group-id(
+ prefix = '##'
+) }}
+
{{ use: partial-symbol(
defaultSymbol = "'circle'",
defaultSymbolSize = 4,
@@ -394,6 +400,11 @@
defaultAnimationEasing = 'linear'
) }}
+
+{{ use: partial-universal-transition(
+ prefix = "#"
+) }}
+
{{ use: partial-tooltip-in-series() }}
diff --git a/zh/option/series/lines.md b/zh/option/series/lines.md
index a19b486..00d01f0 100644
--- a/zh/option/series/lines.md
+++ b/zh/option/series/lines.md
@@ -172,6 +172,8 @@
prefix = '#'
) }}
+{{ use: partial-series-group-id() }}
+
## data(Array)
线数据集。
@@ -205,6 +207,10 @@
数据名称
+{{ use: partial-data-group-id(
+ prefix = '##'
+) }}
+
### coords(Array)
一个包含两个到多个二维坐标的数组。在 [polyline](~series-lines.polyline) 设置为 `true` 时支持多于两个的坐标。
@@ -274,6 +280,9 @@
prefix = "#"
) }}
+{{ use: partial-universal-transition(
+ prefix = "#"
+) }}
{{ target: lines-label }}
diff --git a/zh/option/series/map.md b/zh/option/series/map.md
index 2f7bd33..d4afa24 100644
--- a/zh/option/series/map.md
+++ b/zh/option/series/map.md
@@ -51,6 +51,8 @@
{{ use: partial-datasetIndex() }}
+{{ use: partial-series-group-id() }}
+
## labelLayout(Object|Function)
{{ use: partial-label-layout(
@@ -83,6 +85,10 @@
该区域的数据值。
+{{ use: partial-data-group-id(
+ prefix = '##'
+) }}
+
### selected(boolean) = false
该区域是否选中。
@@ -149,6 +155,11 @@
prefix = "#"
) }}
+
+{{ use: partial-universal-transition(
+ prefix = "#"
+) }}
+
{{ use: partial-tooltip-in-series() }}
diff --git a/zh/option/series/pictorialBar.md b/zh/option/series/pictorialBar.md
index 96c430a..cceec92 100644
--- a/zh/option/series/pictorialBar.md
+++ b/zh/option/series/pictorialBar.md
@@ -213,6 +213,8 @@
prefix = "#"
) }}
+{{ use: partial-series-group-id() }}
+
## data(Array)
{{ use: partial-2d-data-desc() }}
@@ -225,6 +227,10 @@
单个数据项的数值。
+{{ use: partial-data-group-id(
+ prefix = '##'
+) }}
+
{{ use: pictorialBar-symbol-attrs(
prefix = "##",
useZ2 = true
@@ -313,6 +319,10 @@
noAnimationDelay = true
) }}
+{{ use: partial-universal-transition(
+ prefix = "#"
+) }}
+
{{ use: pictorialBar-animation-delay(
prefix = "##"
) }}
diff --git a/zh/option/series/pie.md b/zh/option/series/pie.md
index 5696f39..a0a27f5 100644
--- a/zh/option/series/pie.md
+++ b/zh/option/series/pie.md
@@ -274,6 +274,8 @@
prefix = "#"
) }}
+{{ use: partial-series-group-id() }}
+
## data(Array)
{{ use: partial-1d-data-desc() }}
@@ -286,6 +288,10 @@
数据值。
+{{ use: partial-data-group-id(
+ prefix = '##'
+) }}
+
### selected(boolean) = false
该数据项是否被选中。
@@ -383,6 +389,11 @@
prefix = "#"
) }}
+
+{{ use: partial-universal-transition(
+ prefix = "#"
+) }}
+
{{ use: partial-tooltip-in-series() }}
diff --git a/zh/option/series/radar.md b/zh/option/series/radar.md
index fd0c2f8..6d89cab 100644
--- a/zh/option/series/radar.md
+++ b/zh/option/series/radar.md
@@ -149,6 +149,8 @@
version = '5.0.0'
) }}
+{{ use: partial-series-group-id() }}
+
## data(Array)
雷达图的数据是多变量（维度）的，如下示例：
@@ -176,6 +178,10 @@
单个数据项的数值。
+{{ use: partial-data-group-id(
+ prefix = '##'
+) }}
+
{{ use: partial-symbol(
defaultSymbol = "'circle'",
defaultSymbolSize = 4,
@@ -263,6 +269,10 @@
prefix = "#"
) }}
+{{ use: partial-universal-transition(
+ prefix = "#"
+) }}
+
{{ use: partial-tooltip-in-series() }}
diff --git a/zh/option/series/scatter.md b/zh/option/series/scatter.md
index 8592464..362c007 100644
--- a/zh/option/series/scatter.md
+++ b/zh/option/series/scatter.md
@@ -210,6 +210,8 @@
{{ use: partial-datasetIndex() }}
+{{ use: partial-series-group-id() }}
+
## data(Array)
{{ use: partial-2d-data-desc() }}
@@ -222,6 +224,10 @@
数据项值。
+{{ use: partial-data-group-id(
+ prefix = '##'
+) }}
+
{{ use: partial-symbol(
prefix = "##",
name = "单个数据"
@@ -312,6 +318,10 @@
prefix = "#"
) }}
+{{ use: partial-universal-transition(
+ prefix = "#"
+) }}
+
{{ use: partial-tooltip-in-series() }}
