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

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

commit 1eb64748c6d13acff15a8176c65910fa9e7cd707
Author: 100pah <sushuang0...@gmail.com>
AuthorDate: Wed Dec 2 20:00:07 2020 +0800

    doc: setOption param: transition.
---
 en/api/echarts-instance.md | 32 ++++++++++++++++++++++++++++++++
 zh/api/echarts-instance.md | 30 ++++++++++++++++++++++++++++++
 2 files changed, 62 insertions(+)

diff --git a/en/api/echarts-instance.md b/en/api/echarts-instance.md
index ee6ab10..334258a 100644
--- a/en/api/echarts-instance.md
+++ b/en/api/echarts-instance.md
@@ -70,6 +70,38 @@ chart.setOption(option, {
 
         Optional; states whether not to prevent triggering events when calling 
`setOption`; `false` by default, stating trigger events.
 
+    + `transition`: `SetOptionTransitionOptItem | SetOptionTransitionOptItem[]`
+
+        Optional; specify how to perform combining/separating transition 
animation when `setOption` called. Currently only [custom 
series](option.html#series-custom) supports this feature. The content of the 
parameter `transition` is as follows.
+        ```js
+        type SetOptionTransitionOptItem = {
+            from?: SetOptionTransitionOptFinder;
+            to?: SetOptionTransitionOptFinder;
+            dividingMethod?: 'split' | 'duplicate';
+        };
+        type SetOptionTransitionOptFinder = {
+            seriesIndex?: number;
+            seriesId?: string | number;
+            seriesName?: string | number;
+            dimension: string | number; // Dimension name or dimension index.
+        };
+        ```
+        For example:
+        ```js
+        chart.setOption(option, {
+            transition: {
+                // It means that dimension 3 of the old series 0 can be mapped 
to
+                // dimension "Population" of the new series 0. The data diff 
will be
+                // made based on the values in the two dimensions.
+                from: { seriesIndex: 0, dimension: 3 },
+                to: { seriesIndex: 0, dimension: 'Population' },
+                dividingMethod: 'split'
+            }
+        });
+        ```
+        The property `from` and `to` indicate that which dimension of which 
old series will be mapped to which dimension of which new series. Having the 
pair of dimensions provided, the data diff will be performed based on the 
values in that two dimensions. That is, if some values in `from.dimension` is 
the same as some values in `to.dimension` (e.g., all of them are `"France"`), 
their corresponding graphic elements will perform transition animation 
(morphing) if possible. In this case e [...]
+
+
 **Component Merging Modes**
 
 Within a specific type of components (more accurately, "component main type". 
e.g., `xAxis`, `series`):
diff --git a/zh/api/echarts-instance.md b/zh/api/echarts-instance.md
index 7ad6b67..7f6c511 100644
--- a/zh/api/echarts-instance.md
+++ b/zh/api/echarts-instance.md
@@ -70,6 +70,36 @@ chart.setOption(option, {
 
         可选。阻止调用 `setOption` 时抛出事件,默认为 `false`,即抛出事件。
 
+    + `transition`: `SetOptionTransitionOptItem | SetOptionTransitionOptItem[]`
+
+        可选。指定如何进行“合并”/“分裂”过渡动画。当前只有 [自定义系列( custom series 
)](option.html#series-custom) 支持这种过渡动画。`transition` 参数的内容如下:
+        ```js
+        type SetOptionTransitionOptItem = {
+            from?: SetOptionTransitionOptFinder;
+            to?: SetOptionTransitionOptFinder;
+            dividingMethod?: 'split' | 'duplicate';
+        };
+        type SetOptionTransitionOptFinder = {
+            seriesIndex?: number;
+            seriesId?: string | number;
+            seriesName?: string | number;
+            dimension: string | number; // Dimension name or dimension index.
+        };
+        ```
+        例如:
+        ```js
+        chart.setOption(option, {
+            transition: {
+                // 这指定了,我们要从旧的系列 0 的维度 3 映射到新的系列 0 的维度 'Population'。
+                // 接下来,数据项的映射,会在这两个维度上进行。
+                from: { seriesIndex: 0, dimension: 3 },
+                to: { seriesIndex: 0, dimension: 'Population' },
+                dividingMethod: 'split'
+            }
+        });
+        ```
+        `from` 和 `to` 
属性指定了:从旧的哪个系列的哪个维度,映射到新的哪个系列的哪个维度。有了这个指定后,新旧数据的数据项,就可以进行匹配。匹配规则是,假如 
`from.dimension` 上的某几个数值,和 `to.dimension` 上的某几个数值相同(例如,他们的值都是 
`"法国"`),它们对应的图形元素将会进行过渡动画(尤其是形变动画)。在这种场景中,echarts 
支持了三种过渡动画:一对一、一对多(one-to-many,即合并 
combining)、多对一(many-to-one,即分裂,separating)。`dividingMethod` 
属性指定了,“合并”/“分裂”动画的效果是什么样的,是 split (劈开成多份),还是 duplicate 
(复制成多份)。详情可看这些例子:[custom-combine-separate-morph](${galleryEditorPath}custom-combine-separate-morph&edit=1&reset=1),
 [custom-story-transition] [...]
+
 
 **组件合并模式**
 


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

Reply via email to