添加clock组件

src/render/App.vue

@@ -8,7 +8,7 @@
       <div class="block-left-right-content flex flex-1 mt-5">
         <div class="block-left-content w-1/5 flex flex-col">
           <div class="clock-content mb-2 flex-1">
-            <!-- <Clock /> -->
+            <Clock />
           </div>
           <div class="compass-content mb-2 flex-1">
             <Compass />
@@ -29,7 +29,7 @@
 import FullScreenContainer from './components/Layout/FullScreenContainer.vue'
 import TheHeader from './components/Layout/TheHeader.vue'
 import DigitalFlopContainer from './components/DigitalFlopContainer.vue'
-// import Clock from './components/Clock.vue'
+import Clock from './components/Clock.vue'
 import Compass from './components/Compass.vue'
 import WaterLevel from './components/WaterLevel.vue'
 import Map from './components/Map.vue'

src/render/components/Clock.vue

@@ -0,0 +1,130 @@
+<template>
+  <v-chart :option="option" />
+</template>
+
+<script lang="ts" setup>
+import { use } from "echarts/core";
+import { CanvasRenderer } from "echarts/renderers";
+import { TitleComponent } from "echarts/components";
+import { GaugeChart } from "echarts/charts";
+
+import VChart from "vue-echarts";
+import { ref } from "vue";
+
+use([
+  CanvasRenderer,
+  TitleComponent,
+  GaugeChart
+]);
+
+const option = ref({
+  title: {
+    text: '时间',
+    left: 'center'
+  },
+  series: [
+    {
+      name: 'hour',
+      type: 'gauge',
+      radius: '65%',
+      min : 0,
+      max : 12,
+      splitNumber: 12,
+      startAngle: 90,
+      endAngle:-270,
+      axisTick:{
+        lineStyle: {
+          color: '#eee'
+        },
+      },
+      splitLine: {
+        length :15,
+        lineStyle: {
+          color: '#eee'
+        }
+      },
+      axisLabel:{
+        formatter: function(v: Number){
+          switch(v){
+            case 0:return '';
+            default: return v;
+          }
+        }
+      },
+      pointer:{
+        length :'40%',
+        width  :8,
+        itemStyle: {
+          color: 'rgb(0,0,255)'
+        }
+			},
+      detail: {
+        show:false
+      },
+      data: [{ value: 11.2 }]
+    }, {
+      name: 'minute',
+      type: 'gauge',
+      min : 0,
+      max : 60,
+      splitNumber: 60,
+      startAngle: 90,
+      endAngle:-270,
+      axisLine: {
+        show: false
+      },
+      axisTick:{
+        show: false
+      },
+      splitLine: {
+        show: false
+      },
+      axisLabel:{
+        show: false
+      },
+      pointer:{
+        length :'50%',
+        width  :5,
+        itemStyle: {
+          color: 'rgb(0,255,0)'
+        }
+			},
+      detail: {
+        show:false
+      },
+      data: [{ value: 35.6}]
+    }, {
+      name: 'second',
+      type: 'gauge',
+      min : 0,
+      max : 60,
+      splitNumber: 60,
+      startAngle: 90,
+      endAngle:-270,
+      axisLine: {
+        show: false
+      },
+      axisTick:{
+        show: false
+      },
+      splitLine: {
+        show: false
+      },
+      axisLabel:{
+        show: false
+      },
+      pointer:{
+        length :'75%',
+        width  :3,
+        itemStyle: {
+          color: 'rgb(255,0,0)'
+        }
+			},
+      detail: {
+        show:false
+      },
+      data: [{ value: 30 }]
+    }
+  ]
+});
+</script>