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 <sushuang0...@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-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org