From d6afa631358e98e425f6f0a116f61abe6074dccf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8F=B6=E5=BF=97=E8=B6=85?= <yezhichao@hwasmart.com>
Date: Wed, 24 Nov 2021 14:33:37 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=97=B6=E9=92=9F=E7=9A=84?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/render/components/Clock.vue | 196 ++++++++++++++++++++++----------
 1 file changed, 135 insertions(+), 61 deletions(-)

diff --git a/src/render/components/Clock.vue b/src/render/components/Clock.vue
index 6d9724d..3e35485 100644
--- a/src/render/components/Clock.vue
+++ b/src/render/components/Clock.vue
@@ -27,104 +27,178 @@ const option = reactive({
     {
       name: 'hour',
       type: 'gauge',
-      radius: '65%',
-      min : 0,
-      max : 12,
-      splitNumber: 12,
       startAngle: 90,
-      endAngle:-270,
-      axisTick:{
+      endAngle: -270,
+      min: 0,
+      max: 12,
+      splitNumber: 12,
+      clockwise: true,
+      axisLine: {
         lineStyle: {
-          color: '#eee'
-        },
+          // width: 15,
+          // color: [[1, 'rgba(0,0,0,0.7)']],
+          shadowColor: 'rgba(0, 0, 0, 0.5)',
+          shadowBlur: 15
+        }
       },
       splitLine: {
-        length :15,
         lineStyle: {
-          color: '#eee'
+          shadowColor: 'rgba(0, 0, 0, 0.3)',
+          shadowBlur: 3,
+          shadowOffsetX: 1,
+          shadowOffsetY: 2
         }
       },
-      axisLabel:{
-        formatter: function(v: Number){
-          switch(v){
-            case 0:return '';
-            default: return v;
+      axisLabel: {
+        fontSize: 12,
+        distance: 15,
+        formatter: function (value) {
+          if (value === 0) {
+            return '';
           }
+          return value + '';
         }
       },
-      pointer:{
-        length :'40%',
-        width  :8,
+      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: 12,
+        length: '55%',
+        offsetCenter: [0, '8%'],
         itemStyle: {
-          color: 'rgb(0,0,255)'
+          color: '#C0911F',
+          shadowColor: 'rgba(0, 0, 0, 0.3)',
+          shadowBlur: 8,
+          shadowOffsetX: 2,
+          shadowOffsetY: 4
         }
-			},
-      detail: {
-        show:false
       },
-      data: [{ value: 0 }]
-    }, {
+      detail: {
+        show: false
+      },
+      title: {
+        offsetCenter: [0, '30%']
+      },
+      data: [
+        {
+          value: 0
+        }
+      ]
+    },
+    {
       name: 'minute',
       type: 'gauge',
-      min : 0,
-      max : 60,
-      splitNumber: 60,
       startAngle: 90,
-      endAngle:-270,
+      endAngle: -270,
+      min: 0,
+      max: 60,
+      clockwise: true,
       axisLine: {
         show: false
       },
-      axisTick:{
-        show: false
-      },
       splitLine: {
         show: false
       },
-      axisLabel:{
+      axisTick: {
         show: false
       },
-      pointer:{
-        length :'50%',
-        width  :5,
-        itemStyle: {
-          color: 'rgb(0,255,0)'
-        }
-			},
-      detail: {
-        show:false
+      axisLabel: {
+        show: false
       },
-      data: [{ value: 0}]
-    }, {
+      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: 8,
+        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: 20,
+        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: 0
+        }
+      ]
+    },
+    {
       name: 'second',
       type: 'gauge',
-      min : 0,
-      max : 60,
-      splitNumber: 60,
       startAngle: 90,
-      endAngle  :-270,
+      endAngle: -270,
+      min: 0,
+      max: 60,
+      animationEasingUpdate: 'bounceOut',
+      clockwise: true,
       axisLine: {
         show: false
       },
-      axisTick:{
-        show: false
-      },
       splitLine: {
         show: false
       },
-      axisLabel:{
+      axisTick: {
         show: false
       },
-      pointer:{
-        length :'75%',
-        width  :3,
-        itemStyle: {
-          color: 'rgb(255,0,0)'
-        }
-			},
-      detail: {
-        show:false
+      axisLabel: {
+        show: false
       },
-      data: [{ value: 0 }]
+      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: '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: 0
+        }
+      ]
     }
   ]
 });