96 lines
2.0 KiB
Vue
96 lines
2.0 KiB
Vue
<template>
|
|
<v-chart ref="ring" :option="option" />
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { use } from "echarts/core";
|
|
import { CanvasRenderer } from "echarts/renderers";
|
|
import { LegendComponent } from "echarts/components";
|
|
import { PieChart } from "echarts/charts";
|
|
|
|
import VChart from "vue-echarts";
|
|
import { ref, reactive, onMounted } from "vue";
|
|
|
|
use([
|
|
CanvasRenderer,
|
|
LegendComponent,
|
|
PieChart
|
|
]);
|
|
|
|
const option = reactive({
|
|
legend: {
|
|
bottom: '5%',
|
|
left: 'center',
|
|
selectedMode: false,
|
|
itemGap: 15,
|
|
itemWidth: 35,
|
|
itemHeight: 20,
|
|
textStyle: {
|
|
color: 'white',
|
|
fontSize: 16
|
|
}
|
|
},
|
|
color: ['#FF801C', '#F5FF46', '#00FE65', '#00FEFF', '#ffa800', '#ff5b00', '#ff3000'],
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: ['40%', '70%'],
|
|
startAngle: 180,
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
emphasis: {
|
|
scaleSize: 25,
|
|
label: {
|
|
show: true,
|
|
color: 'white',
|
|
fontSize: '28',
|
|
fontWeight: 'bold',
|
|
formatter: '{c}\n\n{b}'
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: [
|
|
{ value: 0, name: '北 斗', },
|
|
{ value: 0, name: 'G P S' },
|
|
{ value: 0, name: '格洛纳斯' },
|
|
{ value: 0, name: '伽 利 略' }
|
|
]
|
|
}
|
|
]
|
|
});
|
|
|
|
const ring = ref(null)
|
|
const COUNT = option.series[0].data.length
|
|
let highlightIndex = -1
|
|
const highlight = () => {
|
|
ring.value.dispatchAction({
|
|
type: 'downplay',
|
|
dataIndex: highlightIndex
|
|
})
|
|
|
|
highlightIndex++
|
|
if (highlightIndex >= COUNT) highlightIndex = 0
|
|
|
|
ring.value.dispatchAction({
|
|
type: 'highlight',
|
|
dataIndex: highlightIndex
|
|
})
|
|
}
|
|
onMounted(() => {
|
|
setInterval(highlight, 3000)
|
|
})
|
|
|
|
const update = (bd_val: number, gp_val: number, gl_val: number, ga_val: number) => {
|
|
option.series[0].data[0].value = bd_val
|
|
option.series[0].data[1].value = gp_val
|
|
option.series[0].data[2].value = gl_val
|
|
option.series[0].data[3].value = ga_val
|
|
}
|
|
|
|
|
|
defineExpose({ update })
|
|
</script> |