{{ 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.
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 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)
(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.
delay: function (index, count) { return Math.random() * 1000; }