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] feat(gauge): modify some default values, support svg pointer, add axisLine.distance/splitLine.distance/progress/anchor/data[i].title/data[i].detail #13216 #13416

Merged
merged 15 commits into from Oct 17, 2020

Conversation

yufeng04
Copy link
Contributor

@yufeng04 yufeng04 commented Oct 10, 2020

Brief Information

This pull request is in the type of:

  • bug fixing
  • new feature
  • others

What does this PR do?

  1. modify some default values
  2. support svg pointer
  3. add distance to axisLine and splitLine
  4. add anchor to gauge.series
  5. add progress to gauge.series
  6. add title and detail to series.data[i]
  7. fix the color of text in dark mode

Fixed issues

【design】 #13216

Details

modify some default values

  1. changes
configuration before after
axisLine.lineStyle.color [[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']] [[1, '#E6EBF8']]
axisLine.lineStyle.width 30 10
axisLine.roundCap - false
splitLine.length 30 10
splitLine.lineStyle.color '#eee' '#63677A'
splitLine.lineStyle.width 2 3
axisTick.length 8 6
axisTick.lineStyle.color '#eee' '#63677A'
axisLabel.distance 5 15
axisLabel.color 'auto' '#46464'
axisLabel.fontSize - 12
pointer.icon - null/svg/img/rect/...
pointer.offsetCenter - [0,0]
poinet.length '80%' '60%'
pointer.width 8 6
poiner.keepAspect - false
title.color '#333' '#464646'
title.offserCenter [0, '-40%'] [0, '20%']
title.fontSzie 15 16
detail.color 'auto' '#464646'
detail.fontWeight - 'bold'
detail.lineHeight - 30
  1. Example(default values)
    image

NOTE
if some configurations of the chart need to use default(auto) color, we should set xxx.color: 'auto'

support svg pointer

  1. configuration
configuration values default usage
pointer.icon null/svg/img/rect/... null pointer: {icon: 'path://xxxxx'}
  1. Example(svg path)
    image

add distance to axisTick and splitLine

  1. configuration
configuration values default usage
axisTick.distance number 10 axisTick: {distance: 20}
splitLine.distance number 10 splitLine: {distance: 20}
  1. example
    image

add anchor to gauge.series

  1. configuration
configuration values default usage
anchor.show boolean false -
anchor.showAbove boolean false -
anchor.size number 6 -
anchor.icon string 'circle' -
anchor.offsetCenter array [0,0] -
anchor.keepAspect boolean false -
anchor.itemStyle object {color: '#fff', borderWidth: 0, borderColor: '#5470c6'} -
  1. example
    image

add progress to gauge.series

  1. configuration
configuration values default usage
progress.show boolean false -
progress.overlap boolean true -
progress.width number 10 -
progress.roundCap boolean false -
progress.clip boolean true -
  1. example(overlap: false, roundCap: true)
    image

add title and detail to series.data[i]

  1. configuration
configuration values default usage
series[i].data[i].title same as series[i].title same as series[i].title same as series[i].title
series[i].data[i].detail same as series[i].detail same as series[i].detail same as series[i].detail
  1. example
    image

fix the color of text in dark mode

image

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

How to get back to the previous default styles

  1. option
    option = {
                tooltip: {
                    formatter: '{a} <br/>{b} : {c}%'
                },
                toolbox: {
                    feature: {
                        restore: {},
                        saveAsImage: {}
                    }
                },
                series: [
                    {
                        name: '业务指标',
                        type: 'gauge',
                        axisLine: {
                            lineStyle: {
                                width: 30,
                                color: [[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
                            }
                        },
                        pointer: {
                            itemStyle: {
                                color: 'auto'
                            }
                        },
                        axisTick: {
                            distance: -30,
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        splitLine: {
                            length: 30,
                            distance: -30,
                            lineStyle: {
                                color: '#fff',
                                width: 2
                            }
                        },
                        axisLabel: {
                            color: 'auto',
                            distance: 35,
                            fontSize: 20
                        },
                        detail: {
                            formatter: '{value}%',
                            color: 'auto'
                        },
                        data: [{value: 50, name: '完成率'}]
                    }
                ]
            };
  1. result
    image

@echarts-bot
Copy link

echarts-bot bot commented Oct 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.

Copy link
Member

@plainheart plainheart left a comment

Choose a reason for hiding this comment

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

I've left my comments about the shapes(sector & sausage).

@@ -795,6 +795,7 @@ export interface LineStyleOption<Clr = ZRColor> extends ShadowOptionMixin {
join?: CanvasLineJoin
dashOffset?: number
miterLimit?: number
roundCap?: boolean
Copy link
Member

Choose a reason for hiding this comment

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

Perhaps, roundCap is not very necessary. There is an option cap above. Setting cap to round is identical to roundCap.

Copy link
Contributor

Choose a reason for hiding this comment

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

Agree. roundCap should not be added in here. It's not for all lineStyle. Only gauge use it.

Also, there is a conflict here is we use lineStyle in gauge but draw the shape with fill. So either we use a limited subset of lineStyle, or we change the draw method from fill to stroke

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks! I forget to delete it.

const axisLineModel = seriesModel.getModel('axisLine');

const roundCap = axisLineModel.get('roundCap');
const MainPath = roundCap ? Sausage : graphic.Sector;
Copy link
Member

Choose a reason for hiding this comment

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

Currently, the Sector shape has provided supports to draw corner radius. Using Sector should be enough.
Setting shape.cornerRadius and shape.innerCornerRadius to the half of the difference between shape.r and shape.r0 is identical to roundCap(Sausage).

I'm not sure if we should use Sector instead of Sausage.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

There is a little difference between setting shape.cornerRadius/shape.innerCornerRadius and roundCap(Sausage).
image

Copy link
Member

Choose a reason for hiding this comment

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

Looks like the arc angle is not 360 degrees(a circle)? Is there something wrong with the startAngle and endAngle?
If it's a circle, the path should be closed.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes,you are right! I fixed the bug that gauge.axisLine can not be a circle when the arc angle is 360 degrees just now.

        // angleRangeSpan can't be PI2
        // const angleRangeSpan = (endAngle - startAngle) % PI2
        const angleRangeSpan = !((endAngle - startAngle) % PI2) && endAngle !== startAngle
            ? PI2 : (endAngle - startAngle) % PI2;

Now, the path can be closed.

Copy link
Member

Choose a reason for hiding this comment

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

I made a test for this and it indicated that no such case. See the screenshot. If I'm missing something, please let me know.

image

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The difference between setting shape.cornerRadius/shape.innerCornerRadius and roundCap(Sausage):

  1. axisLine:{color: [color: [[0.9, '#0f0'], [1, '#f00']]} (cornerRadius maybe better)
    image

  2. porgress:{itemStyle: {color: '#f00',borderColor: '#0f0',borderWidth: 1}}, and the current value is greater than max value. (roundCap maybe better)
    image

In order to keep axisLine and progress the same style, is roundCap better?

Copy link
Member

Choose a reason for hiding this comment

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

IMO, 110% seems not to be a normal value in gauge. Why and when will the percentage exceed 100%?

If we have to display a percentage that exceeds 100%, as you said, maybe it's better to use sausage instead of sector.

}, seriesModel);
function createProgress(idx: number, endAngle: number) {
const roundCap = progressModel.get('roundCap');
const ProgressPath = roundCap ? Sausage : graphic.Sector;
Copy link
Member

Choose a reason for hiding this comment

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

The same as the above.

@plainheart plainheart linked an issue Oct 12, 2020 that may be closed by this pull request
show?: boolean
showAbove?: boolean
anchorSize?: number
icon?: string
Copy link
Contributor

Choose a reason for hiding this comment

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

It can be size instead of anchorSize here. Since it's already in the anchor option.

const pointerKeepAspect = pointerModel.get('keepAspect');
let pointer;
if (pointerStr.indexOf('path://') === 0) {
pointer = createSymbol(
Copy link
Contributor

Choose a reason for hiding this comment

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

pointerStr can starts with 'image://'. Or being rect, triangle.

I think set icon: null can use the default PointerPath icon. Otherwise use createSymbol.

const r0 = isOverlap ? posInfo.r - progressWidth : posInfo.r - (idx + 1) * progressWidth;
const r = isOverlap ? posInfo.r : posInfo.r - idx * progressWidth;
const progressSilent = progressModel.get('silent');
const progress = new ProgressPath({
Copy link
Contributor

Choose a reason for hiding this comment

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

series already has a silent configuration. There is no need to add silent in the progress option.

if (showPointer) {
const previousPointer = oldData.getItemGraphicEl(oldIdx) as PointerPath;
const previousRotate = previousPointer.rotation;
group.remove(previousPointer);
Copy link
Contributor

Choose a reason for hiding this comment

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

Should check if previousPointer exists. It's possible to have error when switching the show property from false to true.

}
if (showProgress) {
const previousProgress = oldProgressData[oldIdx];
const previousEndAngle = previousProgress.shape.endAngle;
Copy link
Contributor

Choose a reason for hiding this comment

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

Same issues with above.

this._progressData = progressList;
}
else {
if (!showPointer) {
Copy link
Contributor

Choose a reason for hiding this comment

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

I think there is no need to check if (!showPointer) here. Since in this branch, showPointer and showProgress are all false.

Also, there is a removeAll code above. All the elements have been removed already. Also same issue in the above add update, remove callback

@pissang
Copy link
Contributor

pissang commented Oct 16, 2020

Besides these requested changes. I see lots of linting errors. It's better to check and fix all of them.

…. 3.delete progress.slent 4.delete the code of removing in renderPointer 5.fix code style
@pissang pissang merged commit 09d6750 into next Oct 17, 2020
@echarts-bot
Copy link

echarts-bot bot commented Oct 17, 2020

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

@pissang pissang deleted the design-13216 branch October 17, 2020 06:54
@pissang pissang changed the title feat(gauge): modify some default values, support svg pointer, add axisLine.distance/splitLine.distance/progress/anchor/data[i].title/data[i].detail #13216 [5.0] feat(gauge): modify some default values, support svg pointer, add axisLine.distance/splitLine.distance/progress/anchor/data[i].title/data[i].detail #13216 Oct 26, 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.

仪表盘的圆环能否设置圆角?
3 participants