Custom series enhancement (outline)
- Dominant language
- TypeScript
- Stars
- 67.3k
- Forks
- 19.8k
- Avg merge
- 11d 14h
- Merged PRs (30d)
- 8
Description
# custom animation
Like the issue #5988 mentioned, support custom animation in custom series.
custom animation should not only be able to applied on `shape` but probably
also on `transform` and `style`(e.g., `opacity`, and `x`, `y` of text).
For example, if we want the init animation to be "the radius increases from 0
and the opacity increase from 0",
the proposed option can be as follows:
```js
renderItem: function () {
return {
type: 'group',
children: [{
type: 'circle',
shape: {
cx: 100,
cy: 100,
// The final radius is 50
r: 50
},
style: {
// The final opacity is 1
opacity: 1,
fill: 'red'
},
// Set all initial props there. Notice only needed props
// will appear here. Then the initial animation will be
// performed on these props. The arguments of the initial
// animation will follow the settings like `animationEasing`,
// `animationDuration` on seriesModel as other series did.
initProps: {
// The intial radius is 0
shape: {
r: 0
},
// The initial opacify is 0
style: {
opacity: 0
}
}
}, {
type: 'rect',
shape: {
x: 50, y: 50, width: 50, height: 50
},
style: {
fill: 'red'
}
}]
};
}
```
But firstly we need to solve this issue:
If start an animation on an element by calling `graphic.updateProp` (`el.animateTo`),
the previous ongoing animation will be terminated firstly. That is probably not expected.
For example, when we dragging the "dataZoom" or some components, we want an element appears
with a "opacity fade-in" effect, and then the subsequent continuous user operations make
it animate to another position. The "fade-in animation" and the "move animation" would have
been independent, that is, the destination of the moving element can be changed at any time
without terminating the "fade-in" animation. But currently we seems unable to to do that.
If we change the destination of moving, the ongoing fade-in animation will be terminated.
Because "fade-in animation" and the "move animation" are both created by `graphic.updateProp/initProp`.
I am attampting to modify the logic of `el.animateTo` to resolve this issue:
Define a new class `LiteAnimator` dedicated for `el.animateTo`. Each time the `el.animateTo`
called, a new instance of `LiteAnimator` (say, `liteAnimator`) is created and the `clips` are
create directly add added to the `liteAnimator`, in which clips are organized by using linked
list. Each `clip` mapped to a unique "attr path" on the el. If a new calling of `el.animateTo`
occurs on the same `el`, `liteAnimator` is responsible to check the unfinished clips on the `el`
by the given "attr path" and terminate them. The unfinished clips that are not relevant to this
new calling of `el.animateTo` will continue to work. The different between `LiteAnimator` and
the original `Animator` is that the latter one create and dispose all of its clips all together
while the former one can dispose part of them on demand.
About the transition animation, the new graphic element should be able to linked to the previous one render at the last round of `renderItem` calling. The link can be based on the `name` on graphic element or something. For example: if the display of graphic elements controlled by legend, when legend deselect some items to check the details clearly, some of them disappeared, and the remaining need to re-layout, where the transition animation probably necessary to avoid uses to loose focus.
[Related issues]: #5988
# Support custom series on bmap
[Related issues]: #7789
# Support a better clip path
The current `clipPointsByPoints` is not corrent.
Now that the clip feature has be enhanced since 4.4.0, we can make this feature support custom series.
[Related test case]: /test/custom-feature.html
# Get category value in `api` of `renderItem`
If a dimension in `data` is type `ordinal` (`category`), how to get the original category value
via `api` (a parameter of `renderItem`). Current we can only get the ordinal number via `api`.
But the original value is probably needed to be printed as labels.
# Enable legend provider
See:
https://github.com/apache/incubator-echarts/issues/11869
# Custom culling
suppport set `culling` on element. That might be good for performance in some cases.
# About "merge"
Should we make `$mergeChildren` public?
# Bugs
+ prepareCustom.js geo `boundingRect` is not correct. "Transform" is needed to be performed.
+ http://gallery.echartsjs.com/editor.html?c=xHJgtZ0d5Z&v=5
When custom series encode.x is set as an array, `renderItem` will not be called.
+ Fix `updateTransform` not sync:
/test/custom-bmap-polygon.html
+ http://echarts.apache.org/en/gallery/editor.html?c=custom-ohlc hover layer not cleared
# Performance optimization (Text)
Try to remove this restriction in `custom.js` to enhance the performance in SVG map.
```js
elOptionType === 'text'
&& hasOwn(elOptionShape, 'text') && elOptionStyle.text !== el.__customText
```
# Performance optimization (Roam)
Whether to try `updateTransform`.
Or setting `invisible` in some opportunities.
Example: test/custom-hexbin.html
The performance of the roam is not good.
# Variable length of entries
See #5987
# Support custom series in parallel coordinate system
Not sure.
# Enable renderItem in treemap and tree
See: #6172
Not sure.
Contributor guide
Assessment
This issue has not been assessed yet.