109 lines
2.2 KiB
Vue
109 lines
2.2 KiB
Vue
<template>
|
|
<v-chart id="myCompass" :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, onMounted } from "vue";
|
|
|
|
use([ CanvasRenderer, TitleComponent, GaugeChart ]);
|
|
|
|
const props = defineProps({
|
|
styleMode: String
|
|
});
|
|
|
|
onMounted(() => {
|
|
var mychart = document.getElementById("myCompass");
|
|
mychart.firstChild.style.margin = "auto";
|
|
});
|
|
|
|
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: props.styleMode == "small" ? -35 : -40,
|
|
fontSize: props.styleMode == "small" ? 12 : 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> |