添加指南针组件

src/render/components/Clock.vue

@@ -127,4 +127,8 @@ const option = ref({
     }
   ]
 });
+
+const update = () => console.log
+
+defineExpose({ update })
 </script>

src/render/components/Compass.vue

@@ -0,0 +1,82 @@
+<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: [
+    {
+      type: 'gauge',
+      radius: '65%',
+      min : 0,
+      max : 360,
+      splitNumber: 12,
+      startAngle: 90,
+      endAngle:450,
+      axisLine: {
+        lineStyle: {
+          // color: '#ff0000'
+          width: 30
+        }
+      },
+      axisTick:{
+        lineStyle: {
+          color: '#eee'
+        },
+      },
+      axisLabel:{
+        distance: -20,
+        formatter: function(v: Number){
+          switch(v){
+            case 0  : return '北';
+            case 90 : return '东';
+            case 180: return '南';
+            case 270: return '西';
+            case 360: return '';
+            default : return v;
+          }
+        }
+      },
+      splitLine: {
+        length :15,
+        lineStyle: {
+          color: '#eee'
+        }
+      },
+      pointer:{
+        length :'40%',
+        width  :8,
+        itemStyle: {
+          color: 'rgb(0,0,255)'
+        }
+      },
+      detail: {
+        show:false
+      },
+      data: [{ value: 330 }]
+    }
+  ]
+});
+
+const update = () => console.log
+
+defineExpose({ update })
+</script>