变更数据中心页面完成

src/views/my/dataChangeCenter/modules/columnChart.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import { useEcharts } from '@/hooks/common/echarts';
 
 defineOptions({
@@ -8,6 +8,10 @@ defineOptions({
 
 const props = defineProps<{ data: { name: string; value: number; }[]; }>();
 
+watch(() => props.data, (newVal:any) => {
+    init();
+});
+
 const { domRef, updateOptions } = useEcharts(() => ({
     tooltip: {
         trigger: "axis",
@@ -30,7 +34,7 @@ const { domRef, updateOptions } = useEcharts(() => ({
         },
     },
     grid: {
-        top: "5%",
+        top: "10%",
         left: "5%",
         right: "5%",
         bottom: "5%",
@@ -72,9 +76,13 @@ const { domRef, updateOptions } = useEcharts(() => ({
 
 function init() {
   updateOptions(opts => {
-    let allMonth = props.data.map((item:any) => item.name);
-    let values = props.data.map((item:any) => item.value);
-    opts.xAxis[0].data = allMonth;
+    const result:any = props.data?.map((item:any) => ({
+        name: item.org_name,
+        value: item.count,
+    }));
+    let allOrg = result.map((item:any) => item.name);
+    let values = result.map((item:any) => item.value);
+    opts.xAxis[0].data = allOrg;
     opts.series[0].data = values;
     return opts;
   });

src/views/my/dataChangeCenter/modules/ringChart.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import { useEcharts } from '@/hooks/common/echarts';
 
 defineOptions({
   name: 'RingChart'
 });
 
-const props = defineProps<{ data?: { name: string; value: number }[]; colors?: string[]; range?: string }>();
-const range = ref("近一年");
+const props = defineProps<{ data?: { name: string; value: number }[]; range?: string }>();
+watch(() => props.data, (newVal:any) => {
+  init();
+});
+const chartData = ref<{ name: string; value: number; fee: number; rate: number }[]>([]);
 
 const { domRef, updateOptions } = useEcharts(() => ({
   tooltip: {
@@ -23,9 +26,28 @@ const { domRef, updateOptions } = useEcharts(() => ({
     itemStyle: {
       borderWidth: 0
     },
+    textStyle: {
+      rich: {
+        name: {
+          padding: [0, 0, 0, 0],
+        },
+        count: {
+          padding: [0, 0, 0, 5],
+          fontWeight: 600,
+        },
+      }
+    },
+    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|126}\n{b|${range.value}}`,
+    text: '',
     textStyle: {
       rich: {
         a: {
@@ -73,9 +95,24 @@ const { domRef, updateOptions } = useEcharts(() => ({
 
 function init() {
   updateOptions(opts => {
-    range.value = props.range || "近一年";
-    opts.series[0].data = props.data || [];
-    opts.series[0].color = props.colors || [];
+    const total = props.data?.reduce((sum:number, item:any) => sum + item.count, 0);
+    const result:any = props.data?.map((item:any) => {
+      // 1. 避免除以 0 的情况
+      const safeTotal = total || 0;
+      // 2. 计算 rate，最多保留两位小数 (乘10000四舍五入再除以100)
+      // 如果 total 为 0，则 rate 直接为 0
+      const rate = safeTotal === 0 ? 0 : Math.round((item.count / safeTotal) * 10000) / 100;
+      return {
+        name: item.label,
+        value: item.count,
+        rate: rate
+      }
+    });
+    chartData.value = result;
+    
+    opts.title.text = `{a|${total}}\n{b|${props.range}}`;
+    opts.series[0].data = result;
+    opts.series[0].color = ["#2080f0", "#faad14", "#52c41a"];
     return opts;
   });
 }
@@ -84,7 +121,7 @@ init();
 </script>
 
 <template>
-  <div ref="domRef" class="w-full h-220px overflow-hidden"></div>
+  <div ref="domRef" class="w-full h-210px overflow-hidden"></div>
 </template>
 
 <style scoped></style>

src/views/my/dataChangeCenter/modules/ringChart2.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import { useEcharts } from '@/hooks/common/echarts';
 
 defineOptions({
   name: 'RingChart'
 });
 
-const props = defineProps<{ data?: { name: string; value: number; money: number; rate: number }[]; colors?: string[]; range?: string }>();
+const props = defineProps<{ data?: { name: string; value: number; }[]; range?: string }>();
+watch(() => props.data, (newVal:any) => {
+  init();
+});
+const chartData = ref<{ name: string; value: number; fee: number; rate: number }[]>([]);
 
 const { domRef, updateOptions } = useEcharts(() => ({
   tooltip: {
@@ -33,9 +37,6 @@ const { domRef, updateOptions } = useEcharts(() => ({
           align: 'right',
           fontWeight: 600,
         },
-        rate: {
-          align: 'left',
-        },
         money: {
           width: 80,
           align: 'right',
@@ -44,16 +45,16 @@ const { domRef, updateOptions } = useEcharts(() => ({
       }
     },
     formatter: function (name: string) {
-      var info = props.data?.find((item: { name: string }) => item.name === name);
+      var info = chartData.value?.find((item: { name: string }) => item.name === name);
       if(info){
-        return '{name|'+name+'} {count|'+(info.value)+' 起}{rate|'+(info.rate)+' %} {money|'+(info.money)+' 万元}';
+        return '{name|'+name+'} {count|'+(info.value)+' 起} {money|'+(info.fee)+' 万元}';
       }else{
         return name;
       }
     }
   },
   title: {
-    text: `{a|19}\n{b|已验收}`,
+    text: '',
     textStyle: {
       rich: {
         a: {
@@ -101,8 +102,24 @@ const { domRef, updateOptions } = useEcharts(() => ({
 
 function init() {
   updateOptions(opts => {
-    opts.series[0].data = props.data || [];
-    opts.series[0].color = props.colors || [];
+    const total = props.data?.reduce((sum:number, item:any) => sum + item.count, 0);
+    const result:any = props.data?.map((item:any) => {
+      // 1. 避免除以 0 的情况
+      const safeTotal = total || 0;
+      // 2. 计算 rate，最多保留两位小数 (乘10000四舍五入再除以100)
+      // 如果 total 为 0，则 rate 直接为 0
+      const rate = safeTotal === 0 ? 0 : Math.round((item.count / safeTotal) * 10000) / 100;
+      return {
+        name: item.label,
+        value: item.count,
+        fee: item.fee,
+        rate: rate
+      }
+    });
+    chartData.value = result;
+    opts.title.text = `{a|${total}}\n{b|已验收}`;
+    opts.series[0].data = result;
+    opts.series[0].color = ["#52c41a", "#faad14", "#ff4d4f"];
     return opts;
   });
 }
@@ -111,7 +128,7 @@ init();
 </script>
 
 <template>
-  <div ref="domRef" class="w-full h-220px overflow-hidden"></div>
+  <div ref="domRef" class="w-full h-210px overflow-hidden"></div>
 </template>
 
 <style scoped></style>