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',
    textStyle: {
      color: '#fff'
    }
  },
  series: [
    {
      type: 'gauge',
      radius: '60%',
      min : 0,
      max : 360,
      splitNumber: 8,
      startAngle: 90,
      endAngle: 450,
      // axisLine: {
      //   lineStyle: {
      //     color: '#fff',
      //     width: 5
      //   }
      // },
      axisTick:{
        distance: 0,
        lineStyle: {
          color: 'white',
          width: 2
        }
      },
      axisLabel:{
        color: 'white',
        distance: -40,
        fontSize: 18,
        formatter: function(v: Number){
          switch(v){
            case 0  : return '北';
            case 90 : return '东';
            case 180: return '南';
            case 270: return '西';
            default : return '';
          }
        }
      },
      splitLine: {
        length :15,
        distance: 0,
        lineStyle: {
          color: 'white'
        }
      },
      pointer:{
        width: 5,
        itemStyle: {
          color: '#2AB8FF'
        }
      },
      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>