gnss-tool-kit/src/render/components/Compass.vue

<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 { reactive } from "vue";

use([
  CanvasRenderer,
  TitleComponent,
  GaugeChart
]);

const option = reactive({
  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: 0 }]
    }
  ]
});

const update = (variation: number, variationPole: string) => {
  switch (variationPole) {
    case 'N':
      break;
    case 'E':
      variation += 90
      break;
    case 'S':
      variation += 180
      break;
    case 'W':
      variation += 270
      break;
  }

  option.series[0].data[0].value = variation
}

defineExpose({ update })
</script>