From 8fe166dfb71be5b31aef30c7f78f9286c66f5558 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8F=B6=E5=BF=97=E8=B6=85?= <yezhichao@hwasmart.com>
Date: Tue, 16 Nov 2021 14:49:02 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=8C=87=E5=8D=97=E9=92=88?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/render/components/Clock.vue   |  4 ++
 src/render/components/Compass.vue | 82 +++++++++++++++++++++++++++++++
 2 files changed, 86 insertions(+)

diff --git a/src/render/components/Clock.vue b/src/render/components/Clock.vue
index ccf4258..9d56918 100644
--- a/src/render/components/Clock.vue
+++ b/src/render/components/Clock.vue
@@ -127,4 +127,8 @@ const option = ref({
     }
   ]
 });
+
+const update = () => console.log
+
+defineExpose({ update })
 </script>
\ No newline at end of file
diff --git a/src/render/components/Compass.vue b/src/render/components/Compass.vue
index e69de29..0db716a 100644
--- a/src/render/components/Compass.vue
+++ b/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>
\ No newline at end of file