question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Rotate is not working

See original GitHub issue

Hi, I’m trying to use the Gauge chart. I put a rotate property to axisLabel object, but it seems to not work.

版本及环境 (Version & Environment)

  • ECharts 版本 (ECharts version): 2.2.7
  • 浏览器类型和版本 (Browser version): Chrome 51.0.2704.103 m
  • 操作系统类型和版本 (OS Version): Win 8.1

期望结果 (Expected behaviour)

rotate the label

可能哪里有问题 (What went wrong)

the text is not rotated

ECharts配置项 (ECharts option)

option = {

                        // Add tooltip
                        tooltip: {
                            formatter: "{a} <br/>{b} : {c}%"
                        },
                        // Add series
                        series: [
                            {
                                splitNumber: 20,
                                name: 'Your Score',
                                type: 'gauge',
                                center: ['50%', '55%'],
                                startAngle: 150,
                                endAngle: -150,

                                // Axis line
                                axisLine: {
                                    lineStyle: {
                                        color: seriesColor,
                                        width: 30
                                    }
                                },

                                // Axis tick
                                axisTick: {
                                    splitNumber: 5,
                                    length: 5,
                                    lineStyle: {
                                        color: '#fff'
                                    }
                                },

                                // Axis text label
                                axisLabel: {
                                    textStyle : {
                                        fontSize : 18
                                    },
                                    rotate : 45,
                                    formatter: function (v) {

                                        if (axis[v])
                                            return axis[v] == 'borederline' ? 'borderline\r\nx' : axis[v];
                                        else
                                            return '';
                                    }
                                },

                                // Split line
                                splitLine: {
                                    length: 35,
                                    lineStyle: {
                                        color: '#fff'
                                    }
                                },

                                // Display title
                                title: {
                                    offsetCenter: ['-81%', -15],
                                    textStyle: {
                                        fontSize: 13
                                    }
                                },

                                // Display details info
                                detail: {
                                    offsetCenter: ['-80%', -5],
                                    formatter: '{value}%',
                                    textStyle: {
                                        fontSize: 25
                                    }
                                },

                                // Add data
                                data: [{ value: scoreValue, name: 'Your score' }]
                            }
                        ]
                    };

其他信息 (Other comments)

I tried on https://ecomfe.github.io/echarts/doc/example/gauge.html#green-en as well, but no luck

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
pissangcommented, Jul 22, 2016

Gauge label doesn’t support rotate yet

0reactions
ale-storcommented, Mar 4, 2022

+1 Rotating axis labels in gauges would be a nice feature

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to Fix Auto Rotate Not Working on Android
Fix Auto-Rotate Issues by Restarting Your Android Phone · Turn On Screen Rotation From Android Settings · Use the In-App Screen Rotation Option....
Read more >
My Android Won't Auto-Rotate - What to Do - Technipages
Let's get the apparent solutions out of the way. Sometimes a simple reboot will do the job. If that doesn't work, try checking...
Read more >
How to Fix It When Android Screen Won't Rotate - Lifewire
Cause of Android Screen Not Rotating · Auto rotate option is turned off or not working. · The screen you're using isn't set...
Read more >
7 ways to fix Android screen rotation not working - Carlcare
7 ways to fix Android screen rotation not working · Restart your phone · Check Auto-rotation settings · Calibrate phone's sensors · Check...
Read more >
Auto Rotate Not Working On Android? Here's How To Fix It
Enable Auto-Rotate Feature · Clear App Cache · Restart Your Smartphone · Calibrate Your Android Device's Sensors · Reboot Your Device in Safe...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found