echarts Gauge - Anticlockwise

w7t8yxp5  于 2022-12-31  发布在  Echarts
关注(0)|答案(8)|浏览(136)

Version

4.2.1

Steps to reproduce

Create a gauge with the following option

option = {
    series: [
        {
            type: 'gauge',
            detail: {formatter:'{value}%'},
            data: [{value: 50}],
            min:0,
            max:100,
            startAngle:0,
            endAngle:180,
            clockwise:false //anitclockwise
        }
     ]
}

However, setting clockwise to true breaks the axis line.

option = {
    series: [
        {
            type: 'gauge',
            detail: {formatter:'{value}%'},
            data: [{value: 50}],
            min:0,
            max:100,
            startAngle:0,
            endAngle:180,
            clockwise:true
        }
     ]
}

What is expected?

The gauge to be created anticlockwise along with the pointer animation.

What is actually happening?

Both the gauge and pointer animation are clockwise.

The only way I could make it anticlockwise was by swapping min / max and startAngle / endAngle . But unfortunately, the pointer animation remained clockwise.

option = {
    series: [
        {
            type: 'gauge',
            detail: {formatter:'{value}%'},
            data: [{value: 50}],
            min:100,
            max:0,
            startAngle:180,
            endAngle:0,
            clockwise:true
        }
    ]
}

sqyvllje

sqyvllje1#

Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org .

If you are interested in the project, you may also subscribe our mail list .

Have a nice day! 🍵

e0uiprwp

e0uiprwp2#

clockwise represents the growth direction of scale values on the gauge

wljmcqd8

wljmcqd83#

This doesn't seem to be a bug. I think you should use the following code when setting clockwise to be true :

option = {
    series: [
        {
            type: 'gauge',
            detail: {formatter:'{value}%'},
            data: [{value: 50}],
            min:0,
            max:100,
            startAngle:180,
            endAngle:0,
            clockwise:true
        }
     ]
}
vatpfxk5

vatpfxk54#

@Ovilia I need the scale to be anticlockwise.

Your suggested option gives this:

What I need is this:

axkjgtzd

axkjgtzd5#

I think it's a bug with

option = {
    series: [
        {
            type: 'gauge',
            detail: {formatter:'{value}%'},
            data: [{value: 50}],
            min:0,
            max:100,
            startAngle:0,
            endAngle:180,
            clockwise:false
        }
     ]
}
b1zrtrql

b1zrtrql6#

Hi,
I've found a related issue. The pointer points the proper value but it maintains the clockwise color.

I also toggled min/max and startAngle/endAngle values

bmp9r5qi

bmp9r5qi7#

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

wpcxdonn

wpcxdonn8#

This issue is labeled with difficulty: easy .
@MohammadYounes Would you like to debug it by yourself? This is a quicker way to get your problem fixed. Or you may wait for the community to fix.

Please have a look at How to debug ECharts if you'd like to give a try. 🤓

相关问题