From cf89c9bdaa9362062e092314d91f2f5ab3a8478e Mon Sep 17 00:00:00 2001
From: git_rabbit <zhaozhengyi1b@126.com>
Date: Fri, 24 Oct 2025 20:27:34 +0800
Subject: [PATCH] =?UTF-8?q?refactor(QualityStatisticsCard):=20=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E6=A8=AA=E5=90=91=E6=9F=B1=E7=8A=B6=E5=9B=BE=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 优先使用产品描述作为y轴标签，提高可读性
- 增加标签自动换行功能，避免文字重叠
- 增大图表最小宽度以适应多行标签
---
 .../components/QualityStatisticsCard.vue      | 42 +++++++++++++------
 1 file changed, 29 insertions(+), 13 deletions(-)

diff --git a/src/views/kanbanManagement/CarouselBoard/components/QualityStatisticsCard.vue b/src/views/kanbanManagement/CarouselBoard/components/QualityStatisticsCard.vue
index 1abd7d1..65fbe2b 100644
--- a/src/views/kanbanManagement/CarouselBoard/components/QualityStatisticsCard.vue
+++ b/src/views/kanbanManagement/CarouselBoard/components/QualityStatisticsCard.vue
@@ -338,11 +338,10 @@ export default {
       // 获取合格率最高的前5个
       const top5 = validData.slice(0, 5)
       
-      // 准备横向柱状图数据
+      // 准备横向柱状图数据，y轴显示产品描述
       const topLabels = top5.map(item => {
-        const partNumber = item.finishedPartNumber || '未知'
-        const desc = item.productDescription || ''
-        return (partNumber + '-' + desc).substring(0, 15) // 截取前15个字符
+        const desc = item.productDescription || item.finishedPartNumber || '未知'
+        return desc.substring(0, 20) // 截取前20个字符，优先显示描述
       })
       const topRates = top5.map(item => parseFloat(item.qualifiedRate) || 0)
       
@@ -385,8 +384,17 @@ export default {
           type: 'category',
           data: topLabels,
           axisLabel: {
-            fontSize: 9,
-            interval: 0
+            fontSize: 10,
+            interval: 0,
+            formatter: function(value) {
+              // 自动换行，每行最多显示8个字符
+              const maxLength = 8;
+              let result = '';
+              for (let i = 0; i < value.length; i += maxLength) {
+                result += value.substring(i, i + maxLength) + '\n';
+              }
+              return result.trim();
+            }
           }
         },
         series: [
@@ -427,11 +435,10 @@ export default {
       // 获取合格率最低的前5个
       const bottom5 = validData.slice(0, 5)
       
-      // 准备横向柱状图数据
+      // 准备横向柱状图数据，y轴显示产品描述
       const bottomLabels = bottom5.map(item => {
-        const partNumber = item.finishedPartNumber || '未知'
-        const desc = item.productDescription || ''
-        return (partNumber + '-' + desc).substring(0, 15) // 截取前15个字符
+        const desc = item.productDescription || item.finishedPartNumber || '未知'
+        return desc.substring(0, 20) // 截取前20个字符，优先显示描述
       })
       const bottomRates = bottom5.map(item => parseFloat(item.qualifiedRate) || 0)
       
@@ -474,8 +481,17 @@ export default {
           type: 'category',
           data: bottomLabels,
           axisLabel: {
-            fontSize: 9,
-            interval: 0
+            fontSize: 10,
+            interval: 0,
+            formatter: function(value) {
+              // 自动换行，每行最多显示8个字符
+              const maxLength = 8;
+              let result = '';
+              for (let i = 0; i < value.length; i += maxLength) {
+                result += value.substring(i, i + maxLength) + '\n';
+              }
+              return result.trim();
+            }
           }
         },
         series: [
@@ -595,7 +611,7 @@ export default {
 
 .bar-chart {
   flex: 1;
-  min-width: 200px;
+  min-width: 250px; /* 增加最小宽度以适应多行标签 */
 }
 
 .top-chart {