需求优化

src/views/archivesManage/RFIDArchives/returnArchives/index.vue

@@ -127,9 +127,9 @@ export default {
       isReturn: true,
       selections: [],
       queryOption: [
+        { value: 'caseName', label: '档案盒' },
         { value: 'orderNo', label: '单据号' },
-        { value: 'borrowerName', label: '借阅人' },
-        { value: 'caseName', label: '档案盒' }
+        { value: 'borrowerName', label: '借阅人' }
         // { value: 'barcode', label: '条形码' }
       ],
       isRfidReading: false, // 控制RFID读取状态：true=正在读取，false=未读取

src/views/environmentalScreen/module/catePie.vue

@@ -25,12 +25,13 @@ export default {
     },
     refreshtime: {
       type: Number,
-      default: null // 接收父组件的刷新间隔值
+      default: null
     }
   },
   data() {
     return {
-      chart: null
+      chart: null,
+      timer: null // 新增：定时器统一管理
     }
   },
   watch: {
@@ -45,10 +46,10 @@ export default {
     }
   },
   mounted() {
-    // this.initChart()
     this.refreshEchart()
   },
   beforeDestroy() {
+    clearInterval(this.timer) // 新增：清除定时器
     if (this.chart) {
       this.chart.dispose()
       this.chart = null
@@ -58,7 +59,7 @@ export default {
     refreshEchart() {
       if (this.refreshtime) {
         this.timer = setInterval(() => {
-          this.initChart()
+          this.drawChart() // 优化：直接重绘而非重新初始化
         }, this.refreshtime)
       } else {
         this.initChart()
@@ -81,19 +82,25 @@ export default {
         ? this.cateData
         : [{ name: '无告警数据', value: 1, itemStyle: { color: '#666666' }}]
 
-      // 处理0值显示问题：将0替换为极小值，确保标签能显示（视觉上无占比）
-      const processedData = chartData.map(item => ({
-        ...item,
-        value: item.value === 0 ? 0 : item.value
-      }))
+      // ========== 核心修改：0值项分配极小占比，实现视觉分离 ==========
+      const processedData = chartData.map(item => {
+        // 0值替换为极小值（0.01），非0值保持原样
+        const displayValue = item.value === 0 ? 0.01 : item.value
+        return {
+          ...item,
+          value: displayValue,
+          // 新增：存储原始值，用于tooltip/label显示
+          rawValue: item.value
+        }
+      })
 
       const option = {
         backgroundColor: 'transparent',
         tooltip: {
           trigger: 'item',
           textStyle: { fontSize: 12 },
-          // Tooltip 仍显示 名称+数量+百分比（完整信息）
-          formatter: '{b}: {c} 次 ({d}%)'
+          // 优化：显示原始0值，而非极小值
+          formatter: (params) => `${params.name}: ${params.data.rawValue} 次 (0%)`
         },
         legend: {
           bottom: 10,
@@ -118,27 +125,30 @@ export default {
             name: '当日告警统计',
             type: 'pie',
             radius: ['30%', '60%'],
-            center: ['50%', '40%'],
-            avoidLabelOverlap: false,
+            center: ['50%', '44%'],
+            avoidLabelOverlap: true, // 优化：开启标签防重叠
+            // 优化：调整标签线样式，强制分开0值项标签
             labelLine: {
               show: true,
-              length: 10,
-              length2: 20,
-              // 0值项的引导线设为半透明
+              length: 10, // 增加基础长度
+              length2: 15, // 增加二级长度
+              smooth: 0.2, // 轻微平滑，避免线条重叠
               lineStyle: (params) => ({
-                color: params.data.value < 0.1 ? 'rgba(255,255,255,0.3)' : '#ffffff'
+                color: params.data.rawValue === 0
+                  ? 'rgba(255,255,255,0.3)'
+                  : '#ffffff',
+                width: 1
               })
             },
             label: {
               show: true,
               fontSize: 11,
               color: '#ffffff',
-              // 核心修改：标签显示 实际数量（替换原来的{d}%）
-              formatter: function(params) {
-                // 还原极小值为0显示
-                const value = params.value < 0.1 ? 0 : params.value
-                return `${value} 次`
-              }
+              // 优化：显示原始0值
+              formatter: (params) => `${params.data.rawValue} 次`,
+              // 新增：调整标签位置，强制分开
+              position: 'outer',
+              distance: 20 // 标签离饼图的距离
             },
             emphasis: {
               label: {
@@ -152,9 +162,14 @@ export default {
                 shadowColor: 'rgba(0, 0, 0, 0.5)'
               }
             },
-            data: processedData, // 使用处理后的数据（兼容0值）
+            data: processedData,
             animationDuration: 1000,
-            animationEasing: 'cubicOut'
+            animationEasing: 'cubicOut',
+            // 新增：饼图扇区之间增加间隙，进一步分开
+            itemStyle: {
+              borderColor: 'transparent',
+              borderWidth: 1
+            }
           }
         ]
       }
@@ -180,10 +195,18 @@ export default {
   border-radius: 4px !important;
 }
 
-// 可选：0值项的标签文字设为半透明，视觉区分
+// 0值项标签半透明区分
 :deep(.ec-label) {
   &[style*="0 次"] {
     fill: rgba(255,255,255,0.5) !important;
   }
 }
+
+// 新增：给饼图扇区加间隙，视觉上更易区分
+:deep(.ec-pie) {
+  g > path {
+    stroke: transparent !important;
+    stroke-width: 1px !important;
+  }
+}
 </style>