Custom series enhancement (outline)

[100pah]

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:

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.

Support custom series on bmap

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.

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.

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.

[benlongo]

I'm interested in custom series for the parallel coordinate system and would be willing to take a shot at implementing it - would it make sense to break it off into a separate issue first?