🦄 refactor(报表统计): 工单完成情况

src/components/WorkOrderCompletionBar/index.vue

@@ -95,6 +95,7 @@ const updateChart = () => {
 
   const option: EChartsOption = {
     tooltip: {
+      // ... 保持原有配置
       trigger: 'item',
       confine: true,
       backgroundColor: 'rgba(50,50,50,0.9)',
@@ -102,11 +103,16 @@ const updateChart = () => {
       textStyle: { color: '#fff', fontSize: 12 }
     },
     grid: {
-      top: '15%', // 留出上方数值显示空间
-      bottom: '5%', // 调整底部文字空间
-      left: '-20%',
-      right: '0%',
-      containLabel: true // 改为 true 自动计算 Label 空间，防止被切
+      // 核心修改 1: 关闭 containLabel，不再让文字自动挤占空间
+      containLabel: false,
+
+      // 核心修改 2: 固定上、下边距 (建议用像素 px 而不是百分比，控制更精准)
+      top: 30, // 留给顶部数值 label 的空间
+      bottom: 35, // 留给底部 X 轴文字的空间 (大约能容纳 2 行文字)
+
+      // 核心修改 3: 调整左右，因为关闭了 containLabel，需要手动留一点缝隙防止柱子边缘被切
+      left: '2%',
+      right: '5%'
     },
     xAxis: {
       type: 'category',
@@ -115,35 +121,36 @@ const updateChart = () => {
       axisTick: { show: false },
       axisLabel: {
         color: '#6b7280',
-        fontSize: 10, // 字体稍大一点
+        fontSize: 10,
         interval: 0, // 强制显示所有标签
-        lineHeight: 14,
-        margin: 8
-        // overflow: 'break' // 文字过长换行
-        // formatter: function (value: string) {
-        //   if (value.length > 3) {
-        //     const mid = Math.ceil(value.length / 2)
-        //     return value.slice(0, mid) + '\n' + value.slice(mid)
-        //   }
-        //   return value
-        // }
+
+        // 核心修改 4: 控制文字换行配置
+        width: 40, // 限制每个标签的最大宽度 (根据你的列宽调整，比如 40px)
+        overflow: 'break', // 超出宽度强制换行 (break: 单词打断, truncate: 省略号)
+        lineHeight: 13, // 设置行高，防止换行后文字重叠
+        margin: 8 // 文字距离 x 轴（柱子底部）的距离
       }
     },
     yAxis: {
-      type: 'log',
-      show: false
-      // max: yAxisMax as number
+      type: 'log', // 注意：log 轴在数值为 0 或 1 时可能会有显示问题，确保数据处理过
+      show: false,
+      min: 1 // log轴通常建议设置 min 避免 0 的报错
     },
     series: [
       {
         type: 'bar',
-        barWidth: '35%', // 稍微变窄一点，适应5个柱子的情况
+        barWidth: '35%',
+        // ... 保持原有配置
         label: {
           show: true,
           position: 'top',
           fontSize: 12,
           fontWeight: 'bold',
-          color: '#374151' // 数值颜色
+          color: '#374151',
+          formatter: (params) => {
+            // 防止 log 轴把 0 显示出来的特殊处理，如果需要的话
+            return params.value ? params.value.toString() : ''
+          }
         },
         data: seriesData,
         animationDuration: 1000,
@@ -152,6 +159,63 @@ const updateChart = () => {
     ]
   }
 
+  // const option: EChartsOption = {
+  //   tooltip: {
+  //     trigger: 'item',
+  //     confine: true,
+  //     backgroundColor: 'rgba(50,50,50,0.9)',
+  //     borderColor: '#333',
+  //     textStyle: { color: '#fff', fontSize: 12 }
+  //   },
+  //   grid: {
+  //     top: '15%', // 留出上方数值显示空间
+  //     bottom: '5%', // 调整底部文字空间
+  //     left: '-20%',
+  //     right: '0%',
+  //     containLabel: true // 改为 true 自动计算 Label 空间，防止被切
+  //   },
+  //   xAxis: {
+  //     type: 'category',
+  //     data: xAxisData,
+  //     axisLine: { show: false },
+  //     axisTick: { show: false },
+  //     axisLabel: {
+  //       color: '#6b7280',
+  //       fontSize: 10, // 字体稍大一点
+  //       interval: 0 // 强制显示所有标签
+  //       // overflow: 'break' // 文字过长换行
+  //       // formatter: function (value: string) {
+  //       //   if (value.length > 3) {
+  //       //     const mid = Math.ceil(value.length / 2)
+  //       //     return value.slice(0, mid) + '\n' + value.slice(mid)
+  //       //   }
+  //       //   return value
+  //       // }
+  //     }
+  //   },
+  //   yAxis: {
+  //     type: 'log',
+  //     show: false
+  //     // max: yAxisMax as number
+  //   },
+  //   series: [
+  //     {
+  //       type: 'bar',
+  //       barWidth: '35%', // 稍微变窄一点，适应5个柱子的情况
+  //       label: {
+  //         show: true,
+  //         position: 'top',
+  //         fontSize: 12,
+  //         fontWeight: 'bold',
+  //         color: '#374151' // 数值颜色
+  //       },
+  //       data: seriesData,
+  //       animationDuration: 1000,
+  //       animationEasing: 'cubicOut'
+  //     }
+  //   ]
+  // }
+
   chartInstance.setOption(option)
 }
 

src/views/report-statistics/work-order-completion.vue

@@ -132,8 +132,8 @@ const labelMap = {
   yx1: '已执行',
   yx2: '执行中',
   yx3: '填写中',
-  by0: '已保养',
-  by1: '未保养'
+  by1: '未保养',
+  by2: '已保养'
 }
 
 // 模拟数据加载