安全与风险统计页面完成

src/views/riskStatistics/modules/ringChart.vue

@@ -6,7 +6,8 @@ defineOptions({
   name: 'RingChart'
 });
 
-const props = defineProps<{ data?: { name: string; value: number }[]; colors?: string[] }>();
+const props = defineProps<{ data: any; }>();
+const chartData = ref<any[]>([]);
 
 const { domRef, updateOptions } = useEcharts(() => ({
   tooltip: {
@@ -14,7 +15,7 @@ const { domRef, updateOptions } = useEcharts(() => ({
     formatter: '{b}: {c} ({d}%)'
   },
   legend: {
-    bottom: 0,
+    bottom: 10,
     left: 'center',
     icon: 'circle',
     itemWidth: 10,
@@ -22,9 +23,27 @@ const { domRef, updateOptions } = useEcharts(() => ({
     itemStyle: {
       borderWidth: 0
     },
+    textStyle: {
+      rich: {
+        name: {
+          padding: [0, 0, 0, 0],
+        },
+        count: {
+          padding: [0, 0, 0, 0],
+        },
+      }
+    },
+    formatter: function (name: string) {
+      var info = chartData.value?.find((item: { name: string }) => item.name === name);
+      if(info){
+        return '{name|'+name+'} {count|'+(info.value)+'}';
+      }else{
+        return name;
+      }
+    }
   },
   title: {
-    text: `{a|19}\n{b|剩余风险项}`,
+    text: '',
     textStyle: {
       rich: {
         a: {
@@ -50,7 +69,7 @@ const { domRef, updateOptions } = useEcharts(() => ({
   series: [
     {
       type: 'pie',
-      color: ['#5da8ff', '#8e9dff', '#fedc69', '#26deca'],
+      color: ["#f5222d", "#faad14", "#b2bcca"],
       radius: ['45%', '65%'],
       center: ['50%', '45%'],
       avoidLabelOverlap: false,
@@ -71,9 +90,19 @@ const { domRef, updateOptions } = useEcharts(() => ({
 }));
 
 function init() {
+  if (!props.data) {
+    return;
+  }
   updateOptions(opts => {
-    opts.series[0].data = props.data || [];
-    opts.series[0].color = props.colors || [];
+    const total = props.data.high + props.data.mid + props.data.low;
+    const data = [
+      {name:'高风险项',value:props.data.high},
+      {name:'中风险项',value:props.data.mid},
+      {name:'低风险项',value:props.data.low},
+    ]
+    chartData.value = data;
+    opts.series[0].data = data;
+    opts.title.text = `{a|${total}}\n{b|剩余风险项}`;
     return opts;
   });
 }
@@ -82,7 +111,7 @@ init();
 </script>
 
 <template>
-  <div ref="domRef" class="w-full h-220px overflow-hidden"></div>
+  <div ref="domRef" class="w-full h-200px overflow-hidden"></div>
 </template>
 
 <style scoped></style>