Skip to content

Feat funnel new style#17897

Closed
pe-3 wants to merge 5 commits intoapache:next-funnelfrom
pe-3:feat-funnel-newStyle
Closed

Feat funnel new style#17897
pe-3 wants to merge 5 commits intoapache:next-funnelfrom
pe-3:feat-funnel-newStyle

Conversation

@pe-3
Copy link
Copy Markdown

@pe-3 pe-3 commented Nov 10, 2022

Brief Information

This pull request is in the type of:

  • bug fixing
  • new feature
  • others

What does this PR do?

  • Add a property to flatten the funnel exit based on the existing funnel style.
  • Add a dynamic height prop

Fixed issues

#14863
#16445
#17566

Details

Before: What was the problem?

The following is the current style of funnel diagram, and you can see that there is a lot of room to expand the function of funnel diagram such as flatten the top and so on.
image

After: How does it behave after the fixing?

To preserve the original style, the new style needs to be set with new options.

  1. If you want to flatten the top to represent none zero value, please set exitWidth as 100%.
    image
  2. If you want data dynamic mapping on the height, please set dynamicHeight as true.
    image## Document Info
  3. If you want the previous funnel to be a little bit thicker, please set minSize as a percentage string between 0% and 100% such as '33%'.
    image
  4. If you want to show the conversion rate between each of the data in Figure 1, please set showRate as true.
    image
  5. If you want make the previous funnel last piece a trapezoidal, plese set exitWidth as a percentage string between 0% and 100% such as '33%'.
    image

More: New attribute explanation

  1. exitWidth, this property is to set the top width of the top funnel block, taking the bottom width of the piece as the base. Application scenarios: figure 1 and figure 5. Invalid when dynamicArea is valid;
  2. dynamicHeight, this property will let each data take it's funnel piece height.
  3. thickDegree, this property is control then thick degree of then dynamic height funnel, if you set this prop greater than 0% ,the funnel will thicker than default.
  4. showRate, this property will show rate pieces between each data, invalid when dynamicHeight or dynamicArea is true.
  • This PR doesn't relate to document changes
  • The document should be updated later
  • The document changes have been made in apache/echarts-doc#xxx

related doc pr apache/echarts-doc#281

Misc

ZRender Changes

  • This PR depends on ZRender changes (ecomfe/zrender#xxx).

Related test cases or examples to use the new APIs

Please refer to test/funnel.html
N.A.

Others

Merging options

  • Please squash the commits into a single one when merging.

Other information

@echarts-bot
Copy link
Copy Markdown

echarts-bot bot commented Nov 10, 2022

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.

@pe-3 pe-3 changed the base branch from master to next-funnel November 10, 2022 03:11
@pissang
Copy link
Copy Markdown
Contributor

pissang commented Nov 10, 2022

About the exitWidth. Seems neckHeight and neckWidth are more commonly used options to configure the output shape of funnel chart. See

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants