新增无数据时的统计图显示；新增提示

src/components/olmap/HealthRiskAnalysis/HealthRiskPieChart.tsx

@@ -147,14 +147,31 @@ const HealthRiskPieChart: React.FC = () => {
     setHoveredYearIndex(null);
   };
 
-  if (!predictionResults || predictionResults.length === 0) {
+  const renderEmpty = () => (
-    return null;
+    <Box
-  }
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "100%",
+        color: "text.secondary",
+      }}
+    >
+      <PieChart sx={{ fontSize: 64, mb: 2, opacity: 0.3 }} />
+      <Typography variant="h6" gutterBottom sx={{ fontWeight: 500 }}>
+        暂无预测数据
+      </Typography>
+      <Typography variant="body2" color="text.secondary">
+        请先进行健康风险分析预测，以生成风险分布数据
+      </Typography>
+    </Box>
+  );
 
   return (
     <>
       {/* 收起时的触发按钮 */}
-      <Fade in={!isExpanded && predictionResults.length > 0}>
+      <Fade in={!isExpanded}>
         <Box
           className="absolute top-4 right-4 bg-white shadow-2xl rounded-lg cursor-pointer hover:shadow-xl transition-all duration-300 opacity-95 hover:opacity-100"
           onClick={() => setIsExpanded(true)}
@@ -167,7 +184,7 @@ const HealthRiskPieChart: React.FC = () => {
               className="text-gray-700 font-semibold my-1 text-xs"
               style={{ writingMode: "vertical-rl" }}
             >
-              风险分布
+              风险统计
             </Typography>
             <ChevronLeft className="text-gray-600 w-4 h-4" />
           </Box>
@@ -198,10 +215,10 @@ const HealthRiskPieChart: React.FC = () => {
                   d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"
                 />
               </svg>
-              <h3 className="text-lg font-semibold">管道健康风险分布</h3>
+              <h3 className="text-lg font-semibold">管道健康风险统计</h3>
               <Chip
                 size="small"
-                label={`${predictionResults.length}`}
+                label={`${predictionResults?.length || 0}`}
                 sx={{
                   backgroundColor: "rgba(255,255,255,0.2)",
                   color: "white",
@@ -225,15 +242,19 @@ const HealthRiskPieChart: React.FC = () => {
 
           {/* 内容区域 */}
           <div className="p-2 h-[550px]" onMouseLeave={handleMouseLeave}>
-            <ReactECharts
+            {predictionResults && predictionResults.length > 0 ? (
-              ref={(e) => {
+              <ReactECharts
-                chartRef.current = e;
+                ref={(e) => {
-              }}
+                  chartRef.current = e;
-              option={option}
+                }}
-              onEvents={onEvents}
+                option={option}
-              style={{ height: "100%", width: "100%" }}
+                onEvents={onEvents}
-              opts={{ renderer: "canvas" }}
+                style={{ height: "100%", width: "100%" }}
-            />
+                opts={{ renderer: "canvas" }}
+              />
+            ) : (
+              renderEmpty()
+            )}
           </div>
         </div>
       </Slide>