From 084e290cffa2f4cf76e995da4ed09ad3e0ebd6b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E4=B9=90?= <1179574483@qq.com>
Date: Mon, 9 Jun 2025 18:10:00 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/Home/Index.vue                  | 113 +++++++++++++-----
 .../src/views/Home/components/PieChart.vue    |   4 +-
 2 files changed, 84 insertions(+), 33 deletions(-)

diff --git a/yudao-ui/yudao-ui-admin-vue3/src/views/Home/Index.vue b/yudao-ui/yudao-ui-admin-vue3/src/views/Home/Index.vue
index 3b097e5..9bf97b8 100644
--- a/yudao-ui/yudao-ui-admin-vue3/src/views/Home/Index.vue
+++ b/yudao-ui/yudao-ui-admin-vue3/src/views/Home/Index.vue
@@ -74,12 +74,7 @@
 
       <div class="top top_2">
         <div>
-          <PieChart
-            :data="homeInfoKhxzdjzbqk"
-            :total="200"
-            tooltipTip="客户性质等级占比情况"
-
-          />
+          <PieChart :data="homeInfoKhxzdjzbqk" :total="200" tooltipTip="客户性质等级占比情况" />
         </div>
         <div>
           <BarChart_1
@@ -92,36 +87,22 @@
       </div>
       <div class="top top_3">
         <div>
-          <PieChart
-            :data="homeInfoKhbffszbqk"
-            :total="200"
-            tooltipTip="客户拜访方式占比情况"
-
-          />
+          <PieChart :data="homeInfoKhbffszbqk" :total="200" tooltipTip="客户拜访方式占比情况" />
         </div>
         <div>
-          <PieChart
-            :data="homeInfoKhbmzbqk"
-            :total="200"
-            tooltipTip="客户部门占比情况"
-
-          />
+          <PieChart :data="homeInfoKhbmzbqk" :total="200" tooltipTip="客户部门占比情况" />
         </div>
         <div>
-          <PieChart
-            :data="homeInfoKhbflxzbqk"
-            :total="200"
-            tooltipTip="客户拜访类型占比情况"
-          />
+          <PieChart :data="homeInfoKhbflxzbqk" :total="200" tooltipTip="客户拜访类型占比情况" />
         </div>
       </div>
-        <BarChart_1
-          :data="homeInfoBfcplxzbqk"
-          title="拜访产品类型占比情况"
-          width="100%"
-          height="400px"
-        />
-      </div>
+      <BarChart_1
+        :data="homeInfoBfcplxzbqk"
+        title="拜访产品类型占比情况"
+        width="100%"
+        height="400px"
+      />
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -212,7 +193,7 @@ const homeInfoBfrtjVal = ref('拜访日统计')
 // 获取图表数据
 const getEcharts = async () => {
   error.value = ''
-  if (loading.value) return; // ✅ 防止重复调用
+  if (loading.value) return // ✅ 防止重复调用
   loading.value = true
 
   const params: any = {
@@ -238,6 +219,20 @@ const getEcharts = async () => {
       }),
 
       homesApi.getHomeInfoKhxzdjzbqk(params).then((res) => {
+        if (res.list.length) {
+          const allNum = res.list.map((item) => item.value) // [20, 30]
+          const sum = allNum.reduce((acc, cur) => acc + cur, 0) // 50
+
+          res.list.forEach((item: any, index: number) => {
+            // 防御性获取 allNum 值
+            const allNumVal = allNum?.[index] ?? '未知'
+            // 避免除以 0
+            const ratio = sum !== 0 ? ((item.value / sum) * 100).toFixed(1) + '%' : '0%'
+
+            // 拼接名称（清晰分隔符）
+            item.name = `${item.name}   ${allNumVal}   ${ratio}`
+          })
+        }
         homeInfoKhxzdjzbqk.value = res.list
         console.log('客户性质等级占比:', res.list)
       }),
@@ -248,21 +243,77 @@ const getEcharts = async () => {
       }),
 
       homesApi.getHomeInfoKhbffszbqk(params).then((res) => {
+        if (res.list.length) {
+          const allNum = res.list.map((item) => item.value) // [20, 30]
+          const sum = allNum.reduce((acc, cur) => acc + cur, 0) // 50
+
+          res.list.forEach((item: any, index: number) => {
+            // 防御性获取 allNum 值
+            const allNumVal = allNum?.[index] ?? '未知'
+            // 避免除以 0
+            const ratio = sum !== 0 ? ((item.value / sum) * 100).toFixed(1) + '%' : '0%'
+
+            // 拼接名称（清晰分隔符）
+            item.name = `${item.name}   ${allNumVal}   ${ratio}`
+          })
+        }
         homeInfoKhbffszbqk.value = res.list
         console.log('客户拜访方式占比:', res)
       }),
 
       homesApi.getHomeInfoKhbmzbqk(params).then((res) => {
+        if (res.list.length) {
+          const allNum = res.list.map((item) => item.value) // [20, 30]
+          const sum = allNum.reduce((acc, cur) => acc + cur, 0) // 50
+
+          res.list.forEach((item: any, index: number) => {
+            // 防御性获取 allNum 值
+            const allNumVal = allNum?.[index] ?? '未知'
+            // 避免除以 0
+            const ratio = sum !== 0 ? ((item.value / sum) * 100).toFixed(1) + '%' : '0%'
+
+            // 拼接名称（清晰分隔符）
+            item.name = `${item.name}   ${allNumVal}   ${ratio}`
+          })
+        }
         homeInfoKhbmzbqk.value = res.list
         console.log('客户部门占比:', res)
       }),
 
       homesApi.getHomeInfoKhbflxzbqk(params).then((res) => {
+        if (res.list.length) {
+          const allNum = res.list.map((item) => item.value) // [20, 30]
+          const sum = allNum.reduce((acc, cur) => acc + cur, 0) // 50
+
+          res.list.forEach((item: any, index: number) => {
+            // 防御性获取 allNum 值
+            const allNumVal = allNum?.[index] ?? '未知'
+            // 避免除以 0
+            const ratio = sum !== 0 ? ((item.value / sum) * 100).toFixed(1) + '%' : '0%'
+
+            // 拼接名称（清晰分隔符）
+            item.name = `${item.name}   ${allNumVal}   ${ratio}`
+          })
+        }
         homeInfoKhbflxzbqk.value = res.list
         console.log('客户拜访类型占比:', res)
       }),
 
       homesApi.getHomeInfoBfcplxzbqk(params).then((res) => {
+        if (res.list.length) {
+          const allNum = res.list.map((item) => item.value) // [20, 30]
+          const sum = allNum.reduce((acc, cur) => acc + cur, 0) // 50
+
+          res.list.forEach((item: any, index: number) => {
+            // 防御性获取 allNum 值
+            const allNumVal = allNum?.[index] ?? '未知'
+            // 避免除以 0
+            const ratio = sum !== 0 ? ((item.value / sum) * 100).toFixed(1) + '%' : '0%'
+
+            // 拼接名称（清晰分隔符）
+            item.name = `${item.name}   ${allNumVal}   ${ratio}`
+          })
+        }
         homeInfoBfcplxzbqk.value = res.list
         console.log('拜访产品类型占比:', res)
       })
diff --git a/yudao-ui/yudao-ui-admin-vue3/src/views/Home/components/PieChart.vue b/yudao-ui/yudao-ui-admin-vue3/src/views/Home/components/PieChart.vue
index 1d8dabe..d0222bd 100644
--- a/yudao-ui/yudao-ui-admin-vue3/src/views/Home/components/PieChart.vue
+++ b/yudao-ui/yudao-ui-admin-vue3/src/views/Home/components/PieChart.vue
@@ -87,14 +87,14 @@ const chartOption = computed(() => {
         name: props.tooltipTip,
         type: 'pie',
         radius: ['40%', '70%'], // 环形图内外半径
-        center: ['35%', '50%'], // 图表中心位置，留出右侧图例空间
+        center: ['30%', '50%'], // 图表中心位置，留出右侧图例空间
         label: {
           show: false // 隐藏饼图扇区默认标签
         },
         labelLine: {
           show: false // 隐藏标签连线
         },
-        data: props.data.map((item) => ({
+        data: props.data.map((item:any) => ({
           name: item.name,
           value: item.value,
           itemStyle: {
-- 
2.22.0