diff --git a/src/chart/gauge/GaugeView.ts b/src/chart/gauge/GaugeView.ts
index a03243e1aa..a4bb3994c9 100644
--- a/src/chart/gauge/GaugeView.ts
+++ b/src/chart/gauge/GaugeView.ts
@@ -31,7 +31,7 @@ import SeriesData from '../../data/SeriesData';
 import Sausage from '../../util/shape/sausage';
 import {createSymbol} from '../../util/symbol';
 import ZRImage from 'zrender/src/graphic/Image';
-import {extend, isFunction, isString, isNumber} from 'zrender/src/core/util';
+import { extend, isFunction, isString, isNumber, each } from 'zrender/src/core/util';
 import {setCommonECData} from '../../util/innerStore';
 import { normalizeArcAngles } from 'zrender/src/core/PathProxy';
 
@@ -127,6 +127,7 @@ class GaugeView extends ChartView {
 
         let prevEndAngle = startAngle;
 
+        const sectors: (Sausage | graphic.Sector)[] = [];
         for (let i = 0; showAxis && i < colorList.length; i++) {
             // Clamp
             const percent = Math.min(Math.max(colorList[i][0], 0), 1);
@@ -154,11 +155,14 @@ class GaugeView extends ChartView {
                 ['color', 'width']
             ));
 
-            group.add(sector);
+            sectors.push(sector);
 
             prevEndAngle = endAngle;
         }
 
+        sectors.reverse();
+        each(sectors, sector => group.add(sector));
+
         const getColor = function (percent: number) {
             // Less than 0
             if (percent <= 0) {
diff --git a/test/gauge-case.html b/test/gauge-case.html
index cdbf852b32..2605fde022 100644
--- a/test/gauge-case.html
+++ b/test/gauge-case.html
@@ -22,14 +22,14 @@
 <html>
     <head>
         <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="viewport" content="width=device-width, initial-scale=1"/>
         <script src="lib/simpleRequire.js"></script>
         <script src="lib/config.js"></script>
         <script src="lib/jquery.min.js"></script>
         <script src="lib/facePrint.js"></script>
         <script src="lib/testHelper.js"></script>
         <!-- <script src="ut/lib/canteen.js"></script> -->
-        <link rel="stylesheet" href="lib/reset.css" />
+        <link rel="stylesheet" href="lib/reset.css"/>
     </head>
     <body>
         <style>
@@ -39,56 +39,58 @@
         <div id="main0"></div>
         <div id="main1"></div>
         <div id="main2"></div>
+        <div id="main3-1"></div>
+        <div id="main3-2"></div>
 
 
         <script>
-        require(['echarts'/*, 'map/js/china' */], function (echarts) {
-            var option = {
-                tooltip: {
-                    formatter: '{a} <br/>{b} : {c}%'
-                },
-                toolbox: {
-                    feature: {
-                        restore: {},
-                        saveAsImage: {}
-                    }
-                },
-                series:  {
-                    type: 'gauge',
-                    center: ["50%", "50%"],
-                    radius: '70%',
-                    startAngle: 150,
-                    endAngle: -20,
-                    min: 0,
-                    max: 2000,
-                    progress: {
-                        show: true,
-                        width: 18
-                    },
-                    axisLabel: {
-                        distance: 30,
-                        rotate: 50
+            require(['echarts'/*, 'map/js/china' */], function (echarts) {
+                var option = {
+                    tooltip: {
+                        formatter: '{a} <br/>{b} : {c}%'
                     },
-                    data: [
-                        {
-                            value: 0
+                    toolbox: {
+                        feature: {
+                            restore: {},
+                            saveAsImage: {}
                         }
-                    ]
-                }
-            };
-
-            var chart = testHelper.create(echarts, 'main0', {
-                title: [
-                    'Regression Test from #14162',
-                    'Should not display a circle'
-                ],
-                option: option
-                // height: 1200,
-                // buttons: [{text: 'btn-txt', onclick: function () {}}],
-                // recordCanvas: true,
-            });
+                    },
+                    series: {
+                        type: 'gauge',
+                        center: ["50%", "50%"],
+                        radius: '70%',
+                        startAngle: 150,
+                        endAngle: -20,
+                        min: 0,
+                        max: 2000,
+                        progress: {
+                            show: true,
+                            width: 18
+                        },
+                        axisLabel: {
+                            distance: 30,
+                            rotate: 50
+                        },
+                        data: [
+                            {
+                                value: 0
+                            }
+                        ]
+                    }
+                };
+
+                var chart = testHelper.create(echarts, 'main0', {
+                    title: [
+                        'Regression Test from #14162',
+                        'Should not display a circle'
+                    ],
+                    option: option
+                    // height: 1200,
+                    // buttons: [{text: 'btn-txt', onclick: function () {}}],
+                    // recordCanvas: true,
+                });
 
-        });
+            });
         </script>
 
         <script>
@@ -103,7 +105,7 @@
                             {
                                 value: 0,
                                 name: 'SCORE'
-                                }
+                            }
                         ],
                         axisLabel: {
                             distance: 30,
@@ -155,6 +157,61 @@
                 });
             });
         </script>
+        <script>
+            require(['echarts'], function (echarts) {
+                const option = {
+                    tooltip: {
+                        formatter: '{a} <br/>{b} : {c}%'
+                    },
+                    series: [
+                        {
+                            name: 'Pressure',
+                            type: 'gauge',
+                            clockwise: true,
+                            detail: {
+                                valueAnimation: true,
+                                formatter: '{value}'
+                            },
+                            data: [
+                                {
+                                    value: 50,
+                                    name: 'SCORE'
+                                }
+                            ],
+                            axisLine: {
+                                "roundCap": true,
+                                "lineStyle": {
+                                    "width": 16,
+                                    "color": [[0.3, "#C9781B"], [0.7, "#F163EA"], [1, "#6366F1"]]
+                                }
+                            }
+                        }
+                    ]
+                };
+                testHelper.create(echarts, 'main3-1', {
+                    title: [
+                        'Case from #17633',
+                        'Order of Axis lines should respect the clockwise option',
+                        'clockwise: true'
+                    ],
+                    option
+                });
+                testHelper.create(echarts, 'main3-2', {
+                    title: [
+                        'Case from #17633',
+                        'Order of Axis lines should respect the clockwise option',
+                        'clockwise: false'
+                    ],
+                    option: {
+                        ...option,
+                        series: [{
+                            ...option.series[0],
+                            clockwise: false
+                        }]
+                    }
+                });
+            })
+        </script>
 
 
     </body>
