Skip to content

feat(funnel): add funnel new styles #14863#17461

Merged
pissang merged 25 commits into
apache:next-funnelfrom
pe-3:feat-funnel-newStyle
Oct 31, 2022
Merged

feat(funnel): add funnel new styles #14863#17461
pissang merged 25 commits into
apache:next-funnelfrom
pe-3:feat-funnel-newStyle

Conversation

@pe-3
Copy link
Copy Markdown

@pe-3 pe-3 commented Aug 2, 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 echarts-bot Bot added PR: awaiting doc Document changes is required for this PR. PR: awaiting review labels Aug 2, 2022
@echarts-bot
Copy link
Copy Markdown

echarts-bot Bot commented Aug 2, 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.

Document changes are required in this PR. Please also make a PR to apache/echarts-doc for document changes and update the issue id in the PR description. When the doc PR is merged, the maintainers will remove the PR: awaiting doc label.

@echarts-bot echarts-bot Bot added PR: doc ready PR: awaiting doc Document changes is required for this PR. and removed PR: awaiting doc Document changes is required for this PR. PR: doc ready labels Aug 2, 2022
@echarts-bot echarts-bot Bot added PR: doc ready and removed PR: awaiting doc Document changes is required for this PR. labels Aug 4, 2022
@pe-3 pe-3 changed the title feat(funnel): set prop to flatten the funnel exit #14863 feat(funnel): add funnel new styles #14863 Aug 6, 2022
@pe-3 pe-3 marked this pull request as ready for review August 14, 2022 12:32
@pe-3 pe-3 marked this pull request as draft August 14, 2022 12:33
@pe-3 pe-3 marked this pull request as ready for review August 16, 2022 10:49
Comment thread src/chart/funnel/FunnelSeries.ts Outdated
Comment thread test/funnel.html Outdated
Comment thread src/chart/funnel/funnelLayout.ts Outdated
Comment thread src/chart/funnel/funnelLayout.ts Outdated
Comment thread src/chart/funnel/funnelLayout.ts Outdated
Comment thread src/chart/funnel/funnelLayout.ts
Comment thread src/chart/funnel/funnelLayout.ts Outdated
Comment thread src/chart/funnel/funnelLayout.ts Outdated
Comment thread src/chart/funnel/funnelLayout.ts Outdated
Comment thread src/chart/funnel/funnelLayout.ts Outdated
Comment thread src/chart/funnel/funnelLayout.ts Outdated
Comment thread src/chart/funnel/FunnelSeries.ts Outdated
Comment thread src/chart/funnel/FunnelView.ts
@pissang pissang changed the base branch from next to next-funnel October 31, 2022 01:23
@pissang pissang merged commit 3034a94 into apache:next-funnel Oct 31, 2022
@echarts-bot
Copy link
Copy Markdown

echarts-bot Bot commented Oct 31, 2022

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

@vuminhhieu1311
Copy link
Copy Markdown

@pe-3 when the value of the last two items is 0, the label will be displayed like this. How can I solve that problem?
image

Chellhooo pushed a commit to implustech/echarts that referenced this pull request Mar 3, 2023
Chellhooo added a commit to appflow-ai/echarts that referenced this pull request Mar 3, 2023
Chellhooo added a commit to appflow-ai/echarts that referenced this pull request Mar 9, 2023
Chellhooo added a commit to appflow-ai/echarts that referenced this pull request Mar 9, 2023
Chellhooo added a commit to appflow-ai/echarts that referenced this pull request Mar 10, 2023
Chellhooo added a commit to appflow-ai/echarts that referenced this pull request Mar 10, 2023
@Ovilia Ovilia modified the milestones: 5.5.0, 6.0.0 Jan 30, 2024
@Ovilia Ovilia moved this from In Review to Done in ECharts 6.0 Apr 24, 2025
@plainheart plainheart removed this from the 6.0.0 milestone Jun 26, 2025
@plainheart plainheart removed this from ECharts 6.0 Oct 4, 2025
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.

5 participants