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

showLoading align center #12414

Merged
merged 5 commits into from Apr 15, 2020
Merged

showLoading align center #12414

merged 5 commits into from Apr 15, 2020

Conversation

yufeng04
Copy link
Contributor

@yufeng04 yufeng04 commented Apr 10, 2020

Brief Information

  • showLoading align center
  1. Choose the center position of text and animation
  • Add configuration items
  1. fontSize:font size of text,the default value is 12px
  2. showSpinner:show animation or not,the default value is true
  3. spinnerRadius:radius of circle in animation,the default value is 10
  4. lineWidth:lineWidth of circle in animation, the default value is 5

This pull request is in the type of:

  • bug fixing
  • new feature
  • others

What does this PR do?

Enhance the showLoading(#11790)

Fixed issues

Details

Before: What was the problem?

showLoading align center by the center of circle in animation

After: How is it fixed in this PR?

showLoading align center by the center of animation and text

Usage

Are there any API changes?

  • The API has been changed.

Related test cases or examples to use the new APIs

NA.

Others

Merging options

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

Other information

@echarts-bot
Copy link

echarts-bot bot commented Apr 10, 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.

maskColor: 'rgba(255, 255, 255, 0.8)',
showAnimation: true,
color: '#c23531',
Copy link
Contributor

@pissang pissang Apr 10, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps the name is better to be showSpinner?

showAnimation: true,
color: '#c23531',
arcRadius: 10,
lineWidth: 5,
Copy link
Contributor

@pissang pissang Apr 10, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

spinnerRadius?

@@ -0,0 +1 @@
[{"name":"Action 1","ops":[],"scrollY":0,"scrollX":0,"timestamp":1586513969778},{"name":"Action 2","ops":[],"scrollY":502,"scrollX":0,"timestamp":1586514012325}]
Copy link
Contributor

@pissang pissang Apr 10, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems there is nothing in the action. Please remove it.

var cx = api.getWidth() / 2;
var textWidth = textContain.getWidth(opts.text, font);
var r = opts.showSpinner ? arc.shape.r : 0;
// cx = (containerWidth - (arcDiameter + labelRectWidth) - textDistance - textWidth) / 2
Copy link
Contributor

@pissang pissang Apr 11, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

arc is in the scope of if (opts.showSpinner) above. It should not been accessed here. Consider it's a let instead of var

var r = opts.showSpinner ? arc.shape.r : 0;
// cx = (containerWidth - (arcDiameter + labelRectWidth) - textDistance - textWidth) / 2
// textDistance needs to be calculated when both animation and text exist
var cx = (api.getWidth() - r * 4 - (opts.showSpinner && textWidth ? 10 : 0) - textWidth) / 2
Copy link
Contributor

@pissang pissang Apr 11, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why it's r * 4 instead of r * 2?

Copy link
Contributor Author

@yufeng04 yufeng04 Apr 13, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

4 * r === arcDiameter + labelRectWidth

  1. the diameter of spinner is 2*r
  2. labelRect.setShape({..., width: r * 2, ...})

@pissang pissang merged commit 8925f40 into master Apr 15, 2020
@echarts-bot
Copy link

echarts-bot bot commented Apr 15, 2020

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

@Ovilia Ovilia deleted the fix-11790 branch May 25, 2020
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.

None yet

2 participants