[5.0] [Feature] Bring shape morphing ability in custom series

[pissang]

Brief Information

This pull request is in the type of:

• bug fixing
• new feature
• others

What does this PR do?

In the previous custom series. We can't do transition across different types of shapes. For example, we can't animate from a sector to a rectangle.

In this PR, we bring the ability to do smooth shape morphing across different shapes. It's heavily based on the new add function in zrender https://github.com/ecomfe/zrender/blob/next/src/tool/morphPath.ts

An example of the transition between map, bar, bubble and pie(These are all implemented by custom series.)

The transition between hexagon and circle in hexbin example.

The transition between different SVG paths.

Usage

Are there any API changes?

We add a boolean property called morph in the returned element option in renderItem. With it enabled, the shape will be morphed from the previous shape smoothly when the type is changed.

For example:

// Render as rectangle at first time.
renderItem(params, api) {
  return {
     type: 'rect'
     ....
   }
}
// Change to a circle.
renderItem(params, api) {
  return {
     type: 'circle',
     // Enable morphing from the previous rectangle.
     morph: true
     ....
   }
}

[echarts-bot]

Thanks for your contribution!
The community will review it ASAP. In the meanwhile, please checkout the coding standard and Wiki about How to make a pull request.

The pull request is marked to be PR: author is committer because you are a committer of this project.

[echarts-bot]

Congratulations! Your PR has been merged. Thanks for your contribution! 👍