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 2021/07/06 11:27:27 UTC

[echarts-doc] branch master updated: add en for group id and universal transition description

This is an automated email from the ASF dual-hosted git repository.

shenyi pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/echarts-doc.git


The following commit(s) were added to refs/heads/master by this push:
     new a0d9a52  add en for group id and universal transition description
a0d9a52 is described below

commit a0d9a52471ccd951d10a1e14b2bbdb58aa3c3c1c
Author: pissang <bm...@gmail.com>
AuthorDate: Tue Jul 6 19:27:11 2021 +0800

    add en for group id and universal transition description
---
 en/option/partial/group-id.md             |  4 +++
 en/option/partial/universal-transition.md | 49 +++++++++++++++++++++++++++++++
 2 files changed, 53 insertions(+)

diff --git a/en/option/partial/group-id.md b/en/option/partial/group-id.md
index 79d6363..3d482e3 100644
--- a/en/option/partial/group-id.md
+++ b/en/option/partial/group-id.md
@@ -2,9 +2,13 @@
 
 ## dataGroupId(string)
 
+A groupID common to all data in the series. the groupID will be used to classify the data and determine how merge and split animations are performed in the universal transition animation.
 
+If you are using the [dataset](~dataset) component to represent the data, it is recommended to use `encode.itemGroupID` to specify which dimension is encoded as the groupID.
 
 {{ target: partial-data-group-id }}
 
 
 #${prefix} groupId(string)
+
+The groupID of this data item. groupID will be used to classify the data.
\ No newline at end of file
diff --git a/en/option/partial/universal-transition.md b/en/option/partial/universal-transition.md
index 0cb1f46..d6ed1d2 100644
--- a/en/option/partial/universal-transition.md
+++ b/en/option/partial/universal-transition.md
@@ -1,2 +1,51 @@
 {{ target: partial-universal-transition }}
 
+#${prefix} universalTransition(object)
+
+Configuration related to universal transition animation.
+
+Universal Transition provides the ability to morph between any series. With this feature enabled, each time `setOption`, transitions between series with the same `id` will be automatically associated with each other.
+
+One-to-many or many-to-one animations such as drill-down, aggregation, etc. can also be achieved by specifying groups of data such as `encode.itemGroupId` or `dataGroupId`.
+
+This can be enabled directly by configuring `universalTransition: true` in the series. It is also possible to provide an object for more detailed configuration.
+
+##${prefix} enabled(boolean) = false
+
+Wheather to enable the universal transition animation.
+
+
+##${prefix} seriesKey(string | Array)
+
+The `seriesKey` determines how the series to be animated is associated, it defaults to the `id` of the series when not configured.
+
+Usually this is configured as a string, and transitions between series with the same `seriesKey` will be applied. It can also be configured as an array like the following.
+
+```js
+seriesKey: ['male', 'female']
+```
+
+Configuring to an array means that all series specified by the array item will be merged into the current series when animating. For example, this configuration means that series with `id` or `seriesKey` of `'male'` and `'female'` will be merged into the current series.
+
+##${prefix} divideShape(string)
+
+`divideShape` determines how the elements in the current series will split into multiple elements in a one-to-many or many-to-one animation. Currently supports
+
++ `'split'` Split the shape into multiple shapes.
++ `'clone'` Get multiple clones from the current element.
+
+For better results, different series will have different configurations by default, for example, [scatter](~series-scatter) with smaller and more complex element uses `'clone'` by default, while more regular ones like bar charts default to `'split'`. You can set this to the desired splitting strategy according to the needs of your own scenario.
+
+##${prefix} delay(Function)
+
+```ts
+(index: number, count: number) => number
+```
+
+Configure the animation delay for each shape in a one-to-many or many-to-one animation. Setting different animation delays can bring a more instereting animation. For example, the following code creates a staggered effect with a random delay for each shape.
+
+```js
+delay: function (index, count) {
+    return Math.random() * 1000;
+}
+```
\ No newline at end of file

---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org