修改时钟的样式

src/render/components/Clock.vue

@@ -27,104 +27,178 @@ const option = reactive({
     {
       name: 'hour',
       type: 'gauge',
-      radius: '65%',
+      startAngle: 90,
+      endAngle: -270,
       min: 0,
       max: 12,
       splitNumber: 12,
-      startAngle: 90,
+      clockwise: true,
-      endAngle:-270,
+      axisLine: {
-      axisTick:{
         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){
+        fontSize: 12,
-          switch(v){
+        distance: 15,
-            case 0:return '';
+        formatter: function (value) {
-            default: return v;
+          if (value === 0) {
+            return '';
           }
+          return value + '';
         }
       },
       pointer: {
-        length :'40%',
+        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,
+        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 }]
+      title: {
-    }, {
+        offsetCenter: [0, '30%']
+      },
+      data: [
+        {
+          value: 0
+        }
+      ]
+    },
+    {
       name: 'minute',
       type: 'gauge',
-      min : 0,
-      max : 60,
-      splitNumber: 60,
       startAngle: 90,
       endAngle: -270,
+      min: 0,
+      max: 60,
+      clockwise: true,
       axisLine: {
         show: false
       },
-      axisTick:{
+      splitLine: {
         show: false
       },
-      splitLine: {
+      axisTick: {
         show: false
       },
       axisLabel: {
         show: false
       },
       pointer: {
-        length :'50%',
+        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  :5,
+        width: 8,
+        length: '70%',
+        offsetCenter: [0, '8%'],
         itemStyle: {
-          color: 'rgb(0,255,0)'
+          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
       },
-      data: [{ value: 0}]
+      title: {
-    }, {
+        offsetCenter: ['0%', '-40%']
+      },
+      data: [
+        {
+          value: 0
+        }
+      ]
+    },
+    {
       name: 'second',
       type: 'gauge',
-      min : 0,
-      max : 60,
-      splitNumber: 60,
       startAngle: 90,
       endAngle: -270,
+      min: 0,
+      max: 60,
+      animationEasingUpdate: 'bounceOut',
+      clockwise: true,
       axisLine: {
         show: false
       },
-      axisTick:{
+      splitLine: {
         show: false
       },
-      splitLine: {
+      axisTick: {
         show: false
       },
       axisLabel: {
         show: false
       },
       pointer: {
-        length :'75%',
+        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  :3,
+        width: 4,
+        length: '85%',
+        offsetCenter: [0, '8%'],
         itemStyle: {
-          color: 'rgb(255,0,0)'
+          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
       },
-      data: [{ value: 0 }]
+      title: {
+        offsetCenter: ['0%', '-40%']
+      },
+      data: [
+        {
+          value: 0
+        }
+      ]
     }
   ]
 });