82 lines
1.5 KiB
Vue
82 lines
1.5 KiB
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 { 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> |