Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

merged 3 commits into from Sep 15, 2020


Copy link

@pissang pissang commented Sep 13, 2020

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

An example of the transition between map, bar, bubble and pie(These are all implemented by custom series.)
Screen Recording 2020-09-13 at 10 27 04 PM

The transition between hexagon and circle in hexbin example.

Screen Recording 2020-09-13 at 10 44 10 PM

The transition between different SVG paths.

Screen Recording 2020-09-12 at 10 42 27 PM


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

Copy link

echarts-bot bot commented Sep 13, 2020

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.

@100pah 100pah merged commit 9be4a39 into next Sep 15, 2020
Copy link

echarts-bot bot commented Sep 15, 2020

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

@pissang pissang deleted the custom-shape-morphing branch September 22, 2020 03:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet

Successfully merging this pull request may close these issues.

None yet

2 participants