You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by su...@apache.org on 2020/12/04 10:11:31 UTC
[incubator-echarts-doc] 01/03: doc: add custom series transition.
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 98749c9fe119ddde3fde0c4cc9e1354108d6d3da
Author: 100pah <su...@gmail.com>
AuthorDate: Thu Dec 3 14:52:32 2020 +0800
doc: add custom series transition.
---
en/option/partial/zr-graphic.md | 296 +++++++++++++++++++++++++++++++++++++++-
zh/option/partial/zr-graphic.md | 286 +++++++++++++++++++++++++++++++++++++-
2 files changed, 578 insertions(+), 4 deletions(-)
diff --git a/en/option/partial/zr-graphic.md b/en/option/partial/zr-graphic.md
index 6b87722..1cdcda2 100644
--- a/en/option/partial/zr-graphic.md
+++ b/en/option/partial/zr-graphic.md
@@ -1,6 +1,9 @@
{{ target: partial-zr-graphic-elements }}
+
+
+
#${prefix} ${hostName}${symbolDeclare}group(Object)
`group` is the only type that can contain children, so that a group of elements can be positioned and transformed together.
@@ -60,6 +63,11 @@ A list of children, each item is a declaration of an element.
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
+
{{ if: ${usageType} === 'customSeries' }}
#${prefix} ${hostName}${symbolDeclare}path(Object)
@@ -128,6 +136,17 @@ Optional value:
symbolDeclare = ${symbolDeclare}
) }}
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'shape',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
+
##${prefix} style(Object)
{{ use: partial-graphic-cpt-style-prop-common(
@@ -156,8 +175,13 @@ Optional value:
symbolVisit = ${symbolVisit},
symbolDeclare = ${symbolDeclare}
) }}
+
{{ /if }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}image(Object)
{{ use: partial-graphic-cpt-common-props(
@@ -174,7 +198,7 @@ Optional value:
###${prefix} image(string)
-Specify contant of the image, can be a URL, or [dataURI](https://tools.ietf.org/html/rfc2397).
+Specify content of the image, can be a URL, or [dataURI](https://tools.ietf.org/html/rfc2397).
{{ use: partial-graphic-cpt-sub-prop-xy(
prefix = ${prefix},
@@ -221,6 +245,10 @@ Specify contant of the image, can be a URL, or [dataURI](https://tools.ietf.org/
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}text(Object)
Text block.
@@ -303,6 +331,10 @@ Text vertical alignment. Optional values: `'top'`, `'middle'`, `'bottom'`.
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}rect(Object)
Rectangle element.
@@ -347,6 +379,17 @@ Abbreviation is enabled, for example:
+ `r`: `[1, 2]` means `[1, 2, 1, 2]`
+ `r`: `[1, 2, 3]` means `[1, 2, 3, 2]`
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'shape',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
+
##${prefix} style(Object)
{{ use: partial-graphic-cpt-style-prop-common(
@@ -376,6 +419,10 @@ Abbreviation is enabled, for example:
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}circle(Object)
Circle element.
@@ -410,6 +457,16 @@ Circle element.
symbolDeclare = ${symbolDeclare}
) }}
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'shape',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
##${prefix} style(Object)
{{ use: partial-graphic-cpt-style-prop-common(
@@ -439,6 +496,10 @@ Circle element.
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}ring(Object)
Ring element.
@@ -473,6 +534,16 @@ Ring element.
symbolDeclare = ${symbolDeclare}
) }}
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'shape',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
##${prefix} style(Object)
{{ use: partial-graphic-cpt-style-prop-common(
@@ -502,6 +573,10 @@ Ring element.
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}sector(Object)
Sector element.
@@ -545,6 +620,16 @@ Sector element.
symbolDeclare = ${symbolDeclare}
) }}
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'shape',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
##${prefix} style(Object)
{{ use: partial-graphic-cpt-style-prop-common(
@@ -574,6 +659,10 @@ Sector element.
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}arc(Object)
Arc element.
@@ -617,6 +706,16 @@ Arc element.
symbolDeclare = ${symbolDeclare}
) }}
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'shape',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
##${prefix} style(Object)
{{ use: partial-graphic-cpt-style-prop-common(
@@ -649,6 +748,10 @@ Arc element.
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}polygon(Object)
Polygon element.
@@ -674,6 +777,16 @@ Polygon element.
symbolDeclare = ${symbolDeclare}
) }}
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'shape',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
##${prefix} style(Object)
{{ use: partial-graphic-cpt-style-prop-common(
@@ -703,6 +816,10 @@ Polygon element.
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}polyline(Object)
Polyline element.
@@ -728,6 +845,16 @@ Polyline element.
symbolDeclare = ${symbolDeclare}
) }}
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'shape',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
##${prefix} style(Object)
{{ use: partial-graphic-cpt-style-prop-common(
@@ -760,6 +887,10 @@ Polyline element.
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}line(Object)
Line element.
@@ -791,6 +922,16 @@ Specify the percentage of drawing, useful in animation.
Value range: [0, 1].
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'shape',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
##${prefix} style(Object)
{{ use: partial-graphic-cpt-style-prop-common(
@@ -823,6 +964,10 @@ Value range: [0, 1].
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}bezierCurve(Object)
Quadratic bezier curve or cubic bezier curve.
@@ -874,6 +1019,16 @@ Specify the percentage of drawing, useful in animation.
Value range: [0, 1].
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'shape',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
##${prefix} style(Object)
{{ use: partial-graphic-cpt-style-prop-common(
@@ -905,6 +1060,11 @@ Value range: [0, 1].
+
+
+
+
+
{{ target: partial-graphic-cpt-common-props }}
##${prefix} type(string) = ${type}
@@ -949,6 +1109,77 @@ Optional values:
symbolDeclare = ${symbolDeclare}
) }}
+
+{{ if: ${usageType} === 'customSeries' }}
+
+##${prefix} transition(string|Array) = ['x', 'y']
+
+Can be a single property name or an array of property names.
+Enable transition animation when the specified properties changed.
+
+The properties can only be:
++ Transform related properties: [`'x'`](~${optionPath}.${hostName}${symbolVisit}${type}.x), [`'y'`](~${optionPath}.${hostName}${symbolVisit}${type}.y), [`'scaleX'`](~${optionPath}.${hostName}${symbolVisit}${type}.scaleX), [`'scaleY'`](~${optionPath}.${hostName}${symbolVisit}${type}.scaleY), [`'rotation'`](~${optionPath}.${hostName}${symbolVisit}${type}.rotation), [`'originX'`](~${optionPath}.${hostName}${symbolVisit}${type}.originX), [`'originY'`](~${optionPath}.${hostName}${symbolVisit} [...]
+ ```js
+ renderItem: function (params, api) {
+ var coord = api.coord([api.value(0), api.value[1]);
+ return {
+ type: 'rect',
+ x: coord[0],
+ y: coord[1],
+ shape: {
+ x: 0,
+ y: 0,
+ width: api.value(2),
+ height: 100
+ },
+ transition: ['x', 'y', 'width']
+ }
+ }
+ ```
++ Shortcut to transition all of the properties in [`'shape'`](~${optionPath}.${hostName}${symbolVisit}${type}.shape), ['`style'`](~${optionPath}.${hostName}${symbolVisit}${type}.style), [`'extra'`](~${optionPath}.${hostName}${symbolVisit}${type}.extra). For example:
+ ```js
+ renderItem: function (params, api) {
+ return {
+ type: 'rect',
+ shape: {
+ x: api.value(0),
+ y: api.value(1),
+ width: api.value(2),
+ height: api.value(3)
+ },
+ // Indicate that all props in `shape` will
+ // have transition animation.
+ transition: 'shape',
+ };
+ }
+ ```
+ It is equivalent to:
+ ```js
+ renderItem: function (params, api) {
+ return {
+ type: 'rect',
+ shape: {
+ x: api.value(0),
+ y: api.value(1),
+ width: api.value(2),
+ height: api.value(3),
+ // This usage can only enable part of the
+ // properties transition.
+ transition: ['x', 'y', 'width', 'height']
+ }
+ };
+ }
+ ```
+
+By default, [`'x'`](~${optionPath}.${hostName}${symbolVisit}${type}.x) and [`'y'`](~${optionPath}.${hostName}${symbolVisit}${type}.y) are transitioned. If you want to disable the default transition, just set it as:
+```js
+transition: [] // Am empty array.
+```
+
+See this [example](${galleryEditorPath}doc-example/custom-transition-simple&edit=1&reset=1) please.
+
+{{ /if }}
+
{{ if: ${usageType} === 'graphicComponent' }}
##${prefix} left(number|string) = undefined
@@ -1116,6 +1347,17 @@ Y offset of shadow.
color of shadow.
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'style',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
+
{{ target: partial-graphic-cpt-path-common }}
@@ -1164,13 +1406,61 @@ If [top](~${optionPath}.${hostName}${symbolVisit}${type}.top) or [bottom](~${opt
+{{ target: partial-graphic-cpt-sub-prop-transition }}
+
+{{ if: ${usageType} === 'customSeries' }}
+
+###${prefix} transition(string|Array) = undefined
+
+Can be a single property name or an array of property names.
+Enable transition animation when the specified properties changed.
+Can only specify properties that are under this `${hostProp}`.
+
+For example:
+```js
+renderItem: function (params, api) {
+ return {
+ type: 'xxx',
+ ${hostProp}: {
+ mmm: ...,
+ nnn: ...,
+ ppp: ...,
+ qqq: ...,
+ // This two props will perform transition animation.
+ transition: ['mmm', 'ppp']
+ }
+ };
+}
+```
+We can also specify all of the properties like this:
+```js
+renderItem: function (params, api) {
+ return {
+ type: 'xxx',
+ ${hostProp}: {
+ mmm: ...,
+ nnn: ...,
+ ppp: ...,
+ qqq: ...,
+ },
+ // Indicate that all props in `${hostProp}` will
+ // have transition animation.
+ transition: '${hostProp}',
+ };
+}
+```
+
+{{ /if }}
+
+
+
{{ target: partial-graphic-cpt-sub-prop-xy }}
###${prefix} x(number) = 0
The x value of the left-top corner of the element in the coordinate system of its parent.
-###${prefix} y(numbr) = 0
+###${prefix} y(number) = 0
The y value of the left-top corner of the element in the coordinate system of its parent.
@@ -1253,7 +1543,7 @@ start angle, in radian.
###${prefix} endAngle(number) = Math.PI * 2
-end anble, in radian.
+end angle, in radian.
###${prefix} clockwise(boolean) = true
diff --git a/zh/option/partial/zr-graphic.md b/zh/option/partial/zr-graphic.md
index 185ab0e..429a02f 100644
--- a/zh/option/partial/zr-graphic.md
+++ b/zh/option/partial/zr-graphic.md
@@ -60,6 +60,11 @@ group 是唯一的可以有子节点的容器。group 可以用来整体定位
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
+
{{ if: ${usageType} === 'customSeries' }}
#${prefix} ${hostName}${symbolDeclare}path(Object)
@@ -128,6 +133,18 @@ group 是唯一的可以有子节点的容器。group 可以用来整体定位
symbolDeclare = ${symbolDeclare}
) }}
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'shape',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
+
+
##${prefix} style(Object)
{{ use: partial-graphic-cpt-style-prop-common(
@@ -156,8 +173,13 @@ group 是唯一的可以有子节点的容器。group 可以用来整体定位
symbolVisit = ${symbolVisit},
symbolDeclare = ${symbolDeclare}
) }}
+
{{ /if }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}image(Object)
{{ use: partial-graphic-cpt-common-props(
@@ -221,6 +243,10 @@ group 是唯一的可以有子节点的容器。group 可以用来整体定位
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}text(Object)
文本块。
@@ -303,6 +329,10 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}rect(Object)
矩形。
@@ -348,6 +378,17 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
+ `r` 缩写为 `[1, 2]` 相当于 `[1, 2, 1, 2]`
+ `r` 缩写为 `[1, 2, 3]1 相当于 `[1, 2, 3, 2]`
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'shape',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
+
##${prefix} style(Object)
{{ use: partial-graphic-cpt-style-prop-common(
@@ -377,6 +418,10 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}circle(Object)
圆。
@@ -411,6 +456,16 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
symbolDeclare = ${symbolDeclare}
) }}
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'shape',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
##${prefix} style(Object)
{{ use: partial-graphic-cpt-style-prop-common(
@@ -440,6 +495,10 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}ring(Object)
圆环。
@@ -474,6 +533,16 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
symbolDeclare = ${symbolDeclare}
) }}
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'shape',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
##${prefix} style(Object)
{{ use: partial-graphic-cpt-style-prop-common(
@@ -503,6 +572,10 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}sector(Object)
扇形。
@@ -546,6 +619,16 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
symbolDeclare = ${symbolDeclare}
) }}
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'shape',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
##${prefix} style(Object)
{{ use: partial-graphic-cpt-style-prop-common(
@@ -575,6 +658,10 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}arc(Object)
圆弧。
@@ -618,6 +705,16 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
symbolDeclare = ${symbolDeclare}
) }}
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'shape',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
##${prefix} style(Object)
{{ use: partial-graphic-cpt-style-prop-common(
@@ -650,6 +747,10 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}polygon(Object)
多边形。
@@ -675,6 +776,16 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
symbolDeclare = ${symbolDeclare}
) }}
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'shape',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
##${prefix} style(Object)
{{ use: partial-graphic-cpt-style-prop-common(
@@ -704,6 +815,10 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}polyline(Object)
折线。
@@ -729,6 +844,16 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
symbolDeclare = ${symbolDeclare}
) }}
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'shape',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
##${prefix} style(Object)
{{ use: partial-graphic-cpt-style-prop-common(
@@ -761,6 +886,10 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}line(Object)
直线。
@@ -790,6 +919,16 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
线画到百分之多少就不画了。值的范围：[0, 1]。
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'shape',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
##${prefix} style(Object)
{{ use: partial-graphic-cpt-style-prop-common(
@@ -822,6 +961,10 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
symbolDeclare = ${symbolDeclare}
) }}
+
+
+
+
#${prefix} ${hostName}${symbolDeclare}bezierCurve(Object)
二次或三次贝塞尔曲线。
@@ -867,6 +1010,16 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
画到百分之多少就不画了。值的范围：[0, 1]。
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'shape',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
##${prefix} style(Object)
{{ use: partial-graphic-cpt-style-prop-common(
@@ -898,6 +1051,11 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
+
+
+
+
+
{{ target: partial-graphic-cpt-common-props }}
##${prefix} type(string) = ${type}
@@ -917,7 +1075,9 @@ font: 'bolder 2em "Microsoft YaHei", sans-serif'
id 用于在更新或删除图形元素时指定更新哪个图形元素，如果不需要用可以忽略。
+
{{ if: ${usageType} === 'graphicComponent' }}
+
##${prefix} $action(string) = 'merge'
setOption 时指定本次对该图形元素的操作行为。
@@ -938,6 +1098,72 @@ setOption 时指定本次对该图形元素的操作行为。
symbolDeclare = ${symbolDeclare}
) }}
+{{ if: ${usageType} === 'customSeries' }}
+##${prefix} transition(string|Array) = ['x', 'y']
+
+可以指定一个属性名，或者一组属性名。被指定的属性值变化时，会开启过渡动画。
+
+属性只可以是：
++ Transform 相关的属性：[`'x'`](~${optionPath}.${hostName}${symbolVisit}${type}.x), [`'y'`](~${optionPath}.${hostName}${symbolVisit}${type}.y)、[`'scaleX'`](~${optionPath}.${hostName}${symbolVisit}${type}.scaleX)、[`'scaleY'`](~${optionPath}.${hostName}${symbolVisit}${type}.scaleY)、[`'rotation'`](~${optionPath}.${hostName}${symbolVisit}${type}.rotation)、[`'originX'`](~${optionPath}.${hostName}${symbolVisit}${type}.originX)、[`'originY'`](~${optionPath}.${hostName}${symbolVisit}${type}.originY)'。例如：
+ ```js
+ renderItem: function (params, api) {
+ var coord = api.coord([api.value(0), api.value[1]);
+ return {
+ type: 'rect',
+ x: coord[0],
+ y: coord[1],
+ shape: {
+ x: 0,
+ y: 0,
+ width: api.value(2),
+ height: 100
+ },
+ transition: ['x', 'y', 'width']
+ }
+ }
+ ```
++ 还可以是这三个属性 [`'shape'`](~${optionPath}.${hostName}${symbolVisit}${type}.shape)、['`style'`](~${optionPath}.${hostName}${symbolVisit}${type}.style)、[`'extra'`](~${optionPath}.${hostName}${symbolVisit}${type}.extra)。表示这三个属性中所有的子属性都开启过渡动画。例如：
+ ```js
+ renderItem: function (params, api) {
+ return {
+ type: 'rect',
+ shape: {
+ x: api.value(0),
+ y: api.value(1),
+ width: api.value(2),
+ height: api.value(3)
+ },
+ // 表示 shape 中所有属性都开启过渡动画。
+ transition: 'shape',
+ };
+ }
+ ```
+ 这等价于：
+ ```js
+ renderItem: function (params, api) {
+ return {
+ type: 'rect',
+ shape: {
+ x: api.value(0),
+ y: api.value(1),
+ width: api.value(2),
+ height: api.value(3),
+ // transition 放在 shape 中，能只指定部分属性开启过渡动画。
+ transition: ['x', 'y', 'width', 'height']
+ }
+ };
+ }
+ ```
+
+当 transition 没有指定时，[`'x'`](~${optionPath}.${hostName}${symbolVisit}${type}.x) 和 [`'y'`](~${optionPath}.${hostName}${symbolVisit}${type}.y) 会默认开启过渡动画。如果想禁用这种默认，可设定：
+```js
+transition: [] // 一个空数组
+```
+
+看这个 [例子](${galleryEditorPath}doc-example/custom-transition-simple&edit=1&reset=1)。
+
+{{ /if }}
+
{{ if: ${usageType} === 'graphicComponent' }}
##${prefix} left(number|string) = undefined
@@ -1105,6 +1331,17 @@ chart.on('click', function (params) {
阴影颜色。
+{{ use: partial-graphic-cpt-sub-prop-transition(
+ prefix = ${prefix},
+ hostProp = 'style',
+ optionPath = ${optionPath},
+ usageType = ${usageType},
+ hostName = ${hostName},
+ symbolVisit = ${symbolVisit},
+ symbolDeclare = ${symbolDeclare}
+) }}
+
+
{{ target: partial-graphic-cpt-path-common }}
@@ -1150,13 +1387,60 @@ chart.on('click', function (params) {
+{{ target: partial-graphic-cpt-sub-prop-transition }}
+
+{{ if: ${usageType} === 'customSeries' }}
+
+###${prefix} transition(string|Array) = undefined
+
+可以是一个属性名，或者一组属性名。
+被指定的属性，在其指发生变化时，会开启过渡动画。
+只可以指定本 `${hostProp}` 下的属性。
+
+例如：
+```js
+renderItem: function (params, api) {
+ return {
+ type: 'xxx',
+ ${hostProp}: {
+ mmm: ...,
+ nnn: ...,
+ ppp: ...,
+ qqq: ...,
+ // 这两个属性会开启过渡动画。
+ transition: ['mmm', 'ppp']
+ }
+ };
+}
+```
+我们这样可以指定 `${hostProp}` 下所有属性开启过渡动画：
+```js
+renderItem: function (params, api) {
+ return {
+ type: 'xxx',
+ ${hostProp}: {
+ mmm: ...,
+ nnn: ...,
+ ppp: ...,
+ qqq: ...,
+ },
+ // `${hostProp}` 下所有属性开启过渡动画。
+ transition: '${hostProp}',
+ };
+}
+```
+
+{{ /if }}
+
+
+
{{ target: partial-graphic-cpt-sub-prop-xy }}
###${prefix} x(number) = 0
图形元素的左上角在父节点坐标系（以父节点左上角为原点）中的横坐标值。
-###${prefix} y(numbr) = 0
+###${prefix} y(number) = 0
图形元素的左上角在父节点坐标系（以父节点左上角为原点）中的纵坐标值。
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org