放大地图，修改标题

components.d.ts

@@ -3,7 +3,7 @@
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 // biome-ignore lint: disable
-export { }
+export {}
 
 /* prettier-ignore */
 declare module 'vue' {

src/views/User/HmOutFlux/irrigationWater/irriWaterSampleData.vue

@@ -3,7 +3,7 @@
     <!-- 页眉设计 -->
     <div class="section-header">
         <div class="section-icon">📊</div>
-        <h1 class="page-title">灌溉水采样点分析系统</h1>
+        <h1 class="page-title">灌溉水采样点分析</h1>
     </div>
 
     <!-- 主内容区 -->

src/views/User/cadmiumPrediction/CropCadmiumPrediction.vue

@@ -47,7 +47,7 @@
     <div class="content-area">
       <!-- 地图区域 - 单独一行 -->
       <div class="map-section">
-        <h3>作物态Cd预测地图</h3>
+        <h3>水稻Cd预测地图</h3>
         <div v-if="loadingMap" class="loading-container">
           <el-icon class="loading-icon"><Loading /></el-icon>
           <span>地图加载中...</span>
@@ -63,6 +63,7 @@
           <span>乡镇地图加载中...</span>
         </div>
         <!-- ECharts地图容器 -->
+         <div class="town-map-title">水稻Cd含量预测镇域统计分布图</div>
         <div 
           v-show="!loadingTownshipMap" 
           ref="townshipMapRef" 
@@ -76,7 +77,7 @@
 
        <!-- 统计图表区域 -->
       <div class="stats-area">
-        <h3>作物态Cd预测统计信息</h3>
+        <h3>水稻Cd预测统计信息</h3>
         <div class="model-info">
           <el-tag type="info">{{ modelInfo.modelType || 'Cd预测模型' }}</el-tag>
           <span class="update-time">
@@ -133,7 +134,7 @@
 
      <!-- 直方图区域 - 单独一行 -->
       <div class="histogram-section">
-        <h3>作物态Cd预测直方图</h3>
+        <h3>水稻Cd预测直方图</h3>
         <div v-if="loadingHistogram" class="loading-container">
           <el-icon class="loading-icon"><Loading /></el-icon>
           <span>直方图加载中...</span>
@@ -474,39 +475,33 @@ export default {
 
       // 4. ECharts 配置项（仅显示边界和乡镇名，无数据关联）
       const option = {
-        // 标题（可选，显示在地图上方）
-        title: {
-          text: '乐昌市乡镇边界',
-          left: 'center',
-          textStyle: { fontSize: 16, fontWeight: 'bold' }
-        },
         // 提示框（鼠标悬浮时显示乡镇名）
         tooltip: {
           trigger: 'item', // 按乡镇区域触发
           formatter: () => {
-    if (this.isTooltipLoading) {
-      return '<div style="padding: 5px;">加载中...</div>';
-    } else if (this.currentTooltipData) {
-      const detail = this.currentTooltipData;
-      let content = `
-        <div class="town-tooltip">
-          <h3 style="margin: 0 0 5px; color: #0066CC; text-align : center;">${this.currentTooltipTown}</h3>
-          <div style="height: 1px; background-color: #0066CC; margin-bottom: 8px;"></div>
-          <p>采样点数量: ${detail.基础统计.采样点数量}</p>
-          <p>平均值: ${detail.基础统计.平均值.toFixed(4)} mg/kg</p>
-          <p>最小值: ${detail.基础统计.最小值.toFixed(4)} mg/kg</p>
-          <p>最大值: ${detail.基础统计.最大值.toFixed(4)} mg/kg</p>
-          <p>数据更新时间: ${new Date(detail.数据更新时间).toLocaleString()}</p>
-          <div style="height: 1px; background-color: #0066CC; margin-bottom: 8px;"></div>
-          <p style="color:black; font-size:16px;">分布统计:</p>
-          <p>安全区间占比: ${detail.分布统计表格.汇总.安全区间占比}</p>
-          <p>预警区间占比: ${detail.分布统计表格.汇总.预警区间占比}</p>
-          <p>超标区间占比: ${detail.分布统计表格.汇总.超标区间占比}</p>
-        </div>
-      `;
-      return content;
-    } 
-  },
+          if (this.isTooltipLoading) {
+            return '<div style="padding: 5px;">加载中...</div>';
+          } else if (this.currentTooltipData) {
+            const detail = this.currentTooltipData;
+            let content = `
+              <div class="town-tooltip">
+                <h3 style="margin: 0 0 5px; color: #0066CC; text-align : center;">${this.currentTooltipTown}</h3>
+                <div style="height: 1px; background-color: #0066CC; margin-bottom: 8px;"></div>
+                <p>样本点数量: ${detail.基础统计.采样点数量}</p>
+                <p>平均值: ${detail.基础统计.平均值.toFixed(4)} mg/kg</p>
+                <p>最小值: ${detail.基础统计.最小值.toFixed(4)} mg/kg</p>
+                <p>最大值: ${detail.基础统计.最大值.toFixed(4)} mg/kg</p>
+                <p>数据更新时间: ${new Date(detail.数据更新时间).toLocaleString()}</p>
+                <div style="height: 1px; background-color: #0066CC; margin-bottom: 8px;"></div>
+                <p style="color:black; font-size:16px;">分布统计:</p>
+                <p>安全区间占比: ${detail.分布统计表格.汇总.安全区间占比}</p>
+                <p>预警区间占比: ${detail.分布统计表格.汇总.预警区间占比}</p>
+                <p>超标区间占比: ${detail.分布统计表格.汇总.超标区间占比}</p>
+              </div>
+            `;
+            return content;
+          } 
+        },
 
         },
         // 地图系列（核心：渲染边界）
@@ -515,6 +510,7 @@ export default {
             type: 'map',
             map: this.countyName, // 对应注册的地图名称（乐昌市）
             roam: true, // 允许鼠标缩放、平移地图（方便查看）
+            zoom:1.2,
             label: {
               show: true, // 显示乡镇名称标签
               fontSize: 10, // 标签字体大小（避免重叠）
@@ -535,28 +531,28 @@ export default {
       };
 
       this.townshipMapInstance.setOption(option);
-  // 监听鼠标悬浮事件
-  this.townshipMapInstance.on('mouseover', async (params) => {
-    if (params.componentType === 'series' && params.seriesType === 'map') {
-      const townName = params.name;
-      this.currentTooltipTown = townName;
-      this.isTooltipLoading = true;
-      this.currentTooltipData = null;
-      // 手动触发 tooltip 更新
-      this.townshipMapInstance.setOption({ tooltip: {} });
-      const detail = await this.fetchTownshipDetailByName(townName);
-      this.isTooltipLoading = false;
-      this.currentTooltipData = detail;
-      // 再次手动触发 tooltip 更新，显示获取到的数据
-      this.townshipMapInstance.setOption({ tooltip: {} });
-    }
-  });
-  // 监听鼠标移出事件，重置状态
-  this.townshipMapInstance.on('mouseout', () => {
-    this.currentTooltipTown = '';
-    this.currentTooltipData = null;
-    this.isTooltipLoading = false;
-  });
+      // 监听鼠标悬浮事件
+      this.townshipMapInstance.on('mouseover', async (params) => {
+        if (params.componentType === 'series' && params.seriesType === 'map') {
+          const townName = params.name;
+          this.currentTooltipTown = townName;
+          this.isTooltipLoading = true;
+          this.currentTooltipData = null;
+          // 手动触发 tooltip 更新
+          this.townshipMapInstance.setOption({ tooltip: {} });
+          const detail = await this.fetchTownshipDetailByName(townName);
+          this.isTooltipLoading = false;
+          this.currentTooltipData = detail;
+          // 再次手动触发 tooltip 更新，显示获取到的数据
+          this.townshipMapInstance.setOption({ tooltip: {} });
+        }
+      });
+      // 监听鼠标移出事件，重置状态
+      this.townshipMapInstance.on('mouseout', () => {
+        this.currentTooltipTown = '';
+        this.currentTooltipData = null;
+        this.isTooltipLoading = false;
+      });
       // 5. 渲染地图
       this.townshipMapInstance.setOption(option);
 
@@ -762,14 +758,21 @@ export default {
   box-sizing: border-box;
 }
 
+.town-map-title {
+  text-align: center;
+  font-size: 20px;
+  font-weight: 'bold';
+  background-color: #fff;
+  margin-top: 15px;
+}
 
 .township-map-container {
-  width: 90%; /* 使用百分比宽度 */
+  width: 100%; /* 使用百分比宽度 */
   max-width: 1000px; /* 最大宽度限制 */
-  height: 500px;
+  height: 800px;
   border-radius: 4px;
   background-color: #fff;
-  margin: 15px auto; /* 上下15px，水平自动居中 */
+  /* margin: 15px auto; 上下15px，水平自动居中 */
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }