Added Stage clock to gauge chart(not editing).

Author: Imiss-U1025

client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts

@@ -822,11 +822,187 @@ export function getEchartsConfig(
     }
 
     let clockGaugeOpt = {
-      ...basic,
-      "title": {
-        ...basic.title,
-        "text": "clockGaugeOpt",
-      }
+      ...basicStyle,
+        series: [
+          {
+            ...basicSeries,
+            name: 'hour',
+            type: 'gauge',
+            startAngle: 90,
+            endAngle: -270,
+            min: 0,
+            max: 12,
+            center: ['50%', '50%'],
+            splitNumber: 12,
+            clockwise: true,
+            axisLine: {
+              lineStyle: {
+                width: 15,
+                color: [[1, 'rgba(0,0,0,0.7)']],
+                shadowColor: 'rgba(0, 0, 0, 0.5)',
+                shadowBlur: 15
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                shadowColor: 'rgba(0, 0, 0, 0.3)',
+                shadowBlur: 3,
+                shadowOffsetX: 1,
+                shadowOffsetY: 2
+              }
+            },
+            axisLabel: {
+              fontSize: 15,
+              distance: 20,
+              formatter: function (value) {
+                if (value === 0) {
+                  return '';
+                }
+                return value + '';
+              }
+            },
+            pointer: {
+              icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
+              width: 6,
+              length: '55%',
+              offsetCenter: [0, '8%'],
+              itemStyle: {
+                color: '#C0911F',
+                shadowColor: 'rgba(0, 0, 0, 0.3)',
+                shadowBlur: 8,
+                shadowOffsetX: 2,
+                shadowOffsetY: 4
+              }
+            },
+            detail: {
+              show: false
+            },
+            title: {
+              offsetCenter: [0, '30%']
+            },
+            data: [
+              {
+                value: 0
+              }
+            ]
+          },
+          {
+            name: 'minute',
+            type: 'gauge',
+            startAngle: 90,
+            endAngle: -270,
+            min: 0,
+            max: 60,
+            clockwise: true,
+            axisLine: {
+              show: false
+            },
+            splitLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              show: false
+            },
+            pointer: {
+              icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
+              width: 4,
+              length: '70%',
+              offsetCenter: [0, '8%'],
+              itemStyle: {
+                color: '#C0911F',
+                shadowColor: 'rgba(0, 0, 0, 0.3)',
+                shadowBlur: 8,
+                shadowOffsetX: 2,
+                shadowOffsetY: 4
+              }
+            },
+            anchor: {
+              show: true,
+              size: 10,
+              showAbove: false,
+              itemStyle: {
+                borderWidth: 15,
+                borderColor: '#C0911F',
+                shadowColor: 'rgba(0, 0, 0, 0.3)',
+                shadowBlur: 8,
+                shadowOffsetX: 2,
+                shadowOffsetY: 4
+              }
+            },
+            detail: {
+              show: false
+            },
+            title: {
+              offsetCenter: ['0%', '-40%']
+            },
+            data: [
+              {
+                value: 20
+              }
+            ]
+          },
+          {
+            name: 'second',
+            type: 'gauge',
+            startAngle: 90,
+            endAngle: -270,
+            min: 0,
+            max: 60,
+            animationEasingUpdate: 'bounceOut',
+            clockwise: true,
+            axisLine: {
+              show: false
+            },
+            splitLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              show: false
+            },
+            pointer: {
+              icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
+              width: 2,
+              length: '85%',
+              offsetCenter: [0, '8%'],
+              itemStyle: {
+                color: '#C0911F',
+                shadowColor: 'rgba(0, 0, 0, 0.3)',
+                shadowBlur: 8,
+                shadowOffsetX: 2,
+                shadowOffsetY: 4
+              }
+            },
+            anchor: {
+              show: true,
+              size: 15,
+              showAbove: true,
+              itemStyle: {
+                color: '#C0911F',
+                shadowColor: 'rgba(0, 0, 0, 0.3)',
+                shadowBlur: 8,
+                shadowOffsetX: 2,
+                shadowOffsetY: 4
+              }
+            },
+            detail: {
+              show: false
+            },
+            title: {
+              offsetCenter: ['0%', '-40%']
+            },
+            data: [
+              {
+                value: 40
+              }
+            ]
+          }
+        ]
     }
 
     const typeMap = {