安全与风险统计静态页面完成

2026-08-24 11:47:51 +08:00
parent 5bb87cb87b
commit 1ad34b15a9
9 changed files with 481 additions and 0 deletions
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useEcharts } from '@/hooks/common/echarts';
+
+defineOptions({
+  name: 'RingChart'
+});
+
+const props = defineProps<{ data?: { name: string; value: number }[]; colors?: string[] }>();
+
+const { domRef, updateOptions } = useEcharts(() => ({
+  tooltip: {
+    trigger: 'item',
+    formatter: '{b}: {c} ({d}%)'
+  },
+  legend: {
+    bottom: 0,
+    left: 'center',
+    icon: 'circle',
+    itemWidth: 10,
+    itemHeight: 10,
+    itemStyle: {
+      borderWidth: 0
+    },
+  },
+  title: {
+    text: `{a|19}\n{b|剩余风险项}`,
+    textStyle: {
+      rich: {
+        a: {
+          fontSize: 24,
+          color: '#333',
+          fontWeight: 800,
+          align: 'center',
+          verticalAlign: 'middle',
+        },
+        b: {
+          fontSize: 12,
+          color: '#999',
+          align: 'center',
+          verticalAlign: 'middle',
+          fontWeight: 500,
+          padding: [5, 0, 0, 0]
+        }
+      }
+    },
+    left: 'center',
+    top: '35%',
+  },
+  series: [
+    {
+      type: 'pie',
+      color: ['#5da8ff', '#8e9dff', '#fedc69', '#26deca'],
+      radius: ['45%', '65%'],
+      center: ['50%', '45%'],
+      avoidLabelOverlap: false,
+      label: {
+        show: false,
+        position: 'outside',
+        formatter: '{b}\n{c} ({d}%)',
+        fontSize: 12,
+      },
+      labelLine: {
+        show: true,
+        length: 10,
+        length2: 10
+      },
+      data: [] as { name: string; value: number }[]
+    }
+  ]
+}));
+
+function init() {
+  updateOptions(opts => {
+    opts.series[0].data = props.data || [];
+    opts.series[0].color = props.colors || [];
+    return opts;
+  });
+}
+
+init();
+</script>
+
+<template>
+  <div ref="domRef" class="w-full h-220px overflow-hidden"></div>
+</template>
+
+<style scoped></style>