添加clock组件

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>

src/render/components/WaterLevel.vue

@@ -13,7 +13,7 @@ import VChart from "vue-echarts";
 
 use([
   CanvasRenderer,
-	TitleComponent
+  TitleComponent
 ]);
 
 
@@ -22,18 +22,18 @@ const option = reactive({
     text: '海拔',
     left: 'center'
   },
-	series: [{
-		type: 'liquidFill',
-		backgroundStyle: {
-			color: 'transparency'
-		},
-		label: {
-			formatter: function({ value }) {
-				return value
-			}
-		},
-		data: [60, 0.5, 0.4, 0.3]
-	}]
+  series: [{
+    type: 'liquidFill',
+    backgroundStyle: {
+      color: 'transparency'
+    },
+    label: {
+      formatter: function({ value }) {
+        return value
+      }
+    },
+    data: [60, 0.5, 0.4, 0.3]
+  }]
 })
 
 const update = console.log