修改样式

src/render/components/Compass.vue

@@ -20,52 +20,58 @@ use([
 const option = reactive({
   title: {
     text: '航向',
-    left: 'center'
+    left: 'center',
+    textStyle: {
+      color: '#fff'
+    }
   },
   series: [
     {
       type: 'gauge',
-      radius: '65%',
+      radius: '60%',
       min : 0,
       max : 360,
-      splitNumber: 12,
+      splitNumber: 8,
       startAngle: 90,
-      endAngle:450,
-      axisLine: {
+      endAngle: 450,
+      // axisLine: {
+      //   lineStyle: {
+      //     color: '#fff',
+      //     width: 5
+      //   }
+      // },
+      axisTick:{
+        distance: 0,
         lineStyle: {
-          // color: '#ff0000'
-          width: 30
+          color: 'white',
+          width: 2
         }
       },
-      axisTick:{
-        lineStyle: {
-          color: '#eee'
-        },
-      },
       axisLabel:{
-        distance: -20,
+        color: 'white',
+        distance: -40,
+        fontSize: 18,
         formatter: function(v: Number){
           switch(v){
             case 0  : return '北';
             case 90 : return '东';
             case 180: return '南';
             case 270: return '西';
-            case 360: return '';
-            default : return v;
+            default : return '';
           }
         }
       },
       splitLine: {
         length :15,
+        distance: 0,
         lineStyle: {
-          color: '#eee'
+          color: 'white'
         }
       },
       pointer:{
-        length :'40%',
-        width  :8,
+        width: 5,
         itemStyle: {
-          color: 'rgb(0,0,255)'
+          color: '#2AB8FF'
         }
       },
       detail: {