饼图bug修复

src/views/screen/components/HiddenDangerPanel.vue

@@ -96,6 +96,12 @@ const props = defineProps<Props>()
 
 // 图表引用
 const progressChartOption = ref<any>({
+  backgroundColor: 'transparent',
+  tooltip: {
+    show: true,
+    trigger: 'item',
+    formatter: '{a} <br/>{b}: {c}% ({d}%)'
+  },
   series: [
     {
       type: 'pie' as const,
@@ -106,6 +112,7 @@ const progressChartOption = ref<any>({
       bottom: 0,
       data: [],
       label: {
+        show: true,
         alignTo: 'edge' as const,
         formatter: '{time|{c} %}\n',
         minMargin: 5,
@@ -119,6 +126,7 @@ const progressChartOption = ref<any>({
         }
       },
       labelLine: {
+        show: true,
         length: 5,
         length2: 0,
         maxSurfaceAngle: 10
@@ -194,8 +202,9 @@ const handleMajorClick = () => {
 }
 
 watch(() => props.hiddenDangerData?.progress, (newVal) => {
+  console.log('HiddenDangerPanel watch 触发，progress 数据:', newVal)
   refreshProcessCharts(newVal)
-}, { deep: true })
+}, { deep: true, immediate: true })
 
 // 辅助函数：安全地将值转换为数字，处理 NaN 和字符串 "NaN" 的情况
 const safeNumber = (val: any): number => {
@@ -212,14 +221,23 @@ const refreshProcessCharts = (process): void => {
     console.warn('process is undefined or null')
     return
   }
+  
+  const overdue = safeNumber(process.overdue)
+  const processed = safeNumber(process.processed)
+  const processing = safeNumber(process.processing)
+  
+  console.log('refreshProcessCharts 数据:', { overdue, processed, processing })
+  
   const option = { ...progressChartOption.value }
   // 确保所有 value 都是有效的数字，将字符串 "NaN" 或真正的 NaN 转换为 0
   option.series[0].data = [
-    { value: safeNumber(process.overdue), name: '已逾期', itemStyle: { color: '#ef4444' } },
-    { value: safeNumber(process.processed), name: '已处理', itemStyle: { color: '#10b981' } },
+    { value: overdue, name: '已逾期', itemStyle: { color: '#ef4444' } },
+    { value: processed, name: '已处理', itemStyle: { color: '#10b981' } },
     // { value: safeNumber(process.pending), name: '待排查', itemStyle: { color: '#eab308' } },
-    { value: safeNumber(process.processing), name: '处理中', itemStyle: { color: '#3b82f6' } }
+    { value: processing, name: '处理中', itemStyle: { color: '#3b82f6' } }
   ]
+  
+  console.log('更新后的图表数据:', option.series[0].data)
   progressChartOption.value = option
 }
 
@@ -250,7 +268,11 @@ const refreshTop3TypesCharts = (top3Types): void => {
 }
 
 onMounted(() => {
-
+  // 组件挂载时，如果已有数据，立即更新图表
+  if (props.hiddenDangerData?.progress) {
+    console.log('onMounted: 初始化图表数据', props.hiddenDangerData.progress)
+    refreshProcessCharts(props.hiddenDangerData.progress)
+  }
 })
 </script>