Merge pull request #17691 from ZeekoZhu/echarts-17633

fix #17633: add gauge sectors in the order of the "clockwise" option

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) {