实现卫星信息监控页面的显示

src/render/components/Ring.vue

@@ -0,0 +1,90 @@
+<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
+    }
+  },
+  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: 15, name: '北  斗' },
+        { value: 10, name: 'G P S' },
+        { value: 15, name: '格洛纳斯' },
+        { value: 17, name: '伽 利 略' }
+      ]
+    }
+  ]
+});
+
+let highlightIndex = -1
+const ring = ref(null)
+const COUNT = option.series[0].data.length
+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 = console.log
+
+
+defineExpose({ update })
+</script>