本部门变更统计完成

src/views/changeStatistics/modules/pieChart.vue

@@ -6,7 +6,7 @@ defineOptions({
   name: 'PieChart'
 });
 
-const props = defineProps<{ data?: { name: string; value: number }[]; colors?: string[] }>();
+const props = defineProps(['data','typeList'])
 
 const { domRef, updateOptions } = useEcharts(() => ({
   tooltip: {
@@ -47,8 +47,19 @@ const { domRef, updateOptions } = useEcharts(() => ({
 
 function init() {
   updateOptions(opts => {
-    opts.series[0].data = props.data || [];
-    opts.series[0].color = props.colors || [];
+    // 处理数据
+    const result = props.data?.map((item: any) => ({
+      ...item,
+      name: item.label, 
+      value: item.count
+    }));
+    opts.series[0].data = result || [];
+    // 处理颜色
+    // 用 Map 建立 value -> color 映射
+    const colorMap = new Map(props.typeList?.map((item: any) => [item.value, item.color]));
+    // 按 list2 的顺序返回 color 数组
+    const colors = result.map((item: any) => colorMap.get(item.key) || null);
+    opts.series[0].color = colors;
     return opts;
   });
 }

src/views/changeStatistics/modules/pieChart2.vue

@@ -6,7 +6,7 @@ defineOptions({
   name: 'PieChart'
 });
 
-const props = defineProps<{ data?: { name: string; value: number }[]; colors?: string[] }>();
+const props = defineProps(['data'])
 
 const { domRef, updateOptions } = useEcharts(() => ({
   tooltip: {
@@ -47,8 +47,13 @@ const { domRef, updateOptions } = useEcharts(() => ({
 
 function init() {
   updateOptions(opts => {
-    opts.series[0].data = props.data || [];
-    opts.series[0].color = props.colors || [];
+    const result = props.data?.map((item: any) => ({
+      ...item,
+      name: item.label, 
+      value: item.count
+    }));
+    opts.series[0].data = result || [];
+    opts.series[0].color = ["#2080f0", "#faad14"];
     return opts;
   });
 }

src/views/changeStatistics/modules/ringChart.vue

@@ -6,7 +6,7 @@ defineOptions({
   name: 'RingChart'
 });
 
-const props = defineProps<{ data?: { name: string; value: number }[]; colors?: string[] }>();
+const props = defineProps(['data','total'])
 
 const { domRef, updateOptions } = useEcharts(() => ({
   tooltip: {
@@ -24,7 +24,7 @@ const { domRef, updateOptions } = useEcharts(() => ({
     },
   },
   title: {
-    text: `{a|22}\n{b|已评价}`,
+    text: `{a|${props.total}}\n{b|已评价}`,
     textStyle: {
       rich: {
         a: {
@@ -72,8 +72,13 @@ const { domRef, updateOptions } = useEcharts(() => ({
 
 function init() {
   updateOptions(opts => {
-    opts.series[0].data = props.data || [];
-    opts.series[0].color = props.colors || [];
+    const result = props.data?.map((item: any) => ({
+      ...item,
+      name: item.label, 
+      value: item.count
+    }));
+    opts.series[0].data = result || [];
+    opts.series[0].color = ["#52c41a", "#faad14", "#f5222d", "#94A3B8"];
     return opts;
   });
 }
@@ -82,7 +87,7 @@ init();
 </script>
 
 <template>
-  <div ref="domRef" class="w-full h-220px overflow-hidden"></div>
+  <div ref="domRef" class="w-full h-220px"></div>
 </template>
 
 <style scoped></style>