优化了报告管理的图表

src/views/report/analysis/index.vue

@@ -2,7 +2,7 @@
 import { ref, onMounted, onUnmounted, computed } from "vue";
 import * as echarts from "echarts";
 import { ElMessageBox, ElMessage } from "element-plus";
-import { Plus } from '@element-plus/icons-vue';
+import { Plus } from "@element-plus/icons-vue";
 
 interface AnalysisReport {
   id: number;
@@ -118,39 +118,125 @@ const initChart = () => {
 
   myChart = echarts.init(chartDom);
   const option = {
+    backgroundColor: 'transparent',
     title: {
-      text: "监测指标趋势分析",
+      text: '近7天报告提交趋势',
+      textStyle: {
+        fontSize: 16,
+        fontWeight: 500,
+        color: '#303133'
+      },
+      padding: [20, 0]
     },
     tooltip: {
-      trigger: "axis",
+      trigger: 'axis',
+      backgroundColor: 'rgba(255, 255, 255, 0.95)',
+      borderColor: '#eee',
+      padding: [15, 20],
     },
     legend: {
-      data: ["pH值", "溶解氧", "水温"],
+      data: ['巡护报告', '监测报告'],
+      right: 0,
+      top: 0,
+      itemWidth: 10,
+      itemHeight: 10,
+      textStyle: {
+        color: '#666',
+        fontSize: 12
+      }
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      top: '15%',
+      bottom: '3%',
+      containLabel: true
     },
     xAxis: {
-      type: "category",
+      type: 'category',
-      data: ["1月", "2月", "3月", "4月"],
+      boundaryGap: false,
+      data: ['3-14', '3-15', '3-16', '3-17', '3-18', '3-19', '3-20'],
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      splitLine: {
+        show: false
+      },
+      axisLabel: {
+        color: '#999',
+        fontSize: 12
+      }
     },
     yAxis: {
-      type: "value",
+      type: 'value',
+      min: 0,
+      max: 8,
+      interval: 2,
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      splitLine: {
+        show: false
+      },
+      axisLabel: {
+        color: '#999',
+        fontSize: 12
+      }
     },
     series: [
       {
-        name: "pH值",
+        name: '巡护报告',
-        type: "line",
+        type: 'line',
-        data: [7.1, 7.2, 7.0, 7.3],
+        data: [5, 6, 4, 8, 7, 6, 5],
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 6,
+        lineStyle: {
+          width: 2,
+          color: '#36A2EB'
+        },
+        itemStyle: {
+          color: '#36A2EB',
+          borderWidth: 2,
+          borderColor: '#fff'
+        },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(54, 162, 235, 0.15)' },
+            { offset: 1, color: 'rgba(54, 162, 235, 0.02)' }
+          ])
+        }
       },
       {
-        name: "溶解氧",
+        name: '监测报告',
-        type: "line",
+        type: 'line',
-        data: [6.5, 6.3, 6.0, 5.8],
+        data: [3, 4, 3, 5, 4, 5, 4],
-      },
+        smooth: true,
-      {
+        symbol: 'circle',
-        name: "水温",
+        symbolSize: 6,
-        type: "line",
+        lineStyle: {
-        data: [15, 16, 18, 21],
+          width: 2,
-      },
+          color: '#4BC0C0'
-    ],
+        },
+        itemStyle: {
+          color: '#4BC0C0',
+          borderWidth: 2,
+          borderColor: '#fff'
+        },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(75, 192, 192, 0.15)' },
+            { offset: 1, color: 'rgba(75, 192, 192, 0.02)' }
+          ])
+        }
+      }
+    ]
   };
 
   myChart.setOption(option);
@@ -210,7 +296,7 @@ const handleSubmit = () => {
 
 // 刷新数据
 const handleRefresh = () => {
-  ElMessage.success('数据已更新');
+  ElMessage.success("数据已更新");
   // TODO: 实际刷新数据的逻辑
 };
 </script>
@@ -218,8 +304,8 @@ const handleRefresh = () => {
 <template>
   <div class="analysis-report">
     <!-- 趋势图表 -->
-    <el-card>
+    <el-card class="chart-card">
-      <div id="trendChart" style="height: 400px"></div>
+      <div id="trendChart"></div>
     </el-card>
 
     <!-- 报告列表 -->
@@ -259,7 +345,7 @@ const handleRefresh = () => {
         <el-table-column prop="type" label="类型" width="120">
           <template #default="{ row }">
             <el-tag :type="row.type === 'species' ? 'success' : 'primary'">
-              {{ row.type === 'species' ? '物种分析' : '环境分析' }}
+              {{ row.type === "species" ? "物种分析" : "环境分析" }}
             </el-tag>
           </template>
         </el-table-column>
@@ -458,22 +544,34 @@ const handleRefresh = () => {
     padding: 20px;
     text-align: center;
     transition: all 0.3s;
-    
+
     &:hover {
       transform: translateY(-2px);
     }
-    
+
     .stat-value {
       font-size: 28px;
       font-weight: 600;
       color: $primary-color;
       margin-bottom: 8px;
     }
-    
+
     .stat-label {
       font-size: 14px;
       color: $text-secondary;
     }
   }
+
+  .chart-card {
+    margin-bottom: 24px;
+    border-radius: 8px;
+    background: #fff;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+
+    #trendChart {
+      height: 400px;
+      padding: 20px;
+    }
+  }
 }
 </style>

src/views/report/daily/index.vue

@@ -85,28 +85,143 @@ const initTrendChart = () => {
   const chartDom = document.getElementById('trendChart');
   if (!chartDom) return;
   
-  trendChart = echarts.init(chartDom);
+  const myChart = echarts.init(chartDom);
   const option = {
-    title: { text: '近7天报告提交趋势' },
+    backgroundColor: 'transparent',
-    tooltip: { trigger: 'axis' },
+    title: {
-    xAxis: { type: 'category', data: ['3-14', '3-15', '3-16', '3-17', '3-18', '3-19', '3-20'] },
+      text: '近7天报告提交趋势',
-    yAxis: { type: 'value' },
+      textStyle: {
+        fontSize: 16,
+        fontWeight: 500,
+        color: '#303133'
+      },
+      padding: [20, 0]
+    },
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(255, 255, 255, 0.95)',
+      borderColor: '#eee',
+      padding: [10, 15],
+      textStyle: {
+        color: '#666'
+      },
+      axisPointer: {
+        type: 'line',
+        lineStyle: {
+          color: '#409EFF',
+          opacity: 0.2
+        }
+      }
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: ['3-14', '3-15', '3-16', '3-17', '3-18', '3-19', '3-20'],
+      boundaryGap: false,
+      axisLine: {
+        lineStyle: {
+          color: '#E5E7EB'
+        }
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        color: '#666',
+        padding: [8, 0]
+      }
+    },
+    yAxis: {
+      type: 'value',
+      splitLine: {
+        lineStyle: {
+          color: '#E5E7EB',
+          type: 'dashed'
+        }
+      },
+      axisLabel: {
+        color: '#666'
+      }
+    },
     series: [
       {
         name: '巡护报告',
         type: 'line',
         data: [5, 6, 4, 8, 7, 6, 5],
-        smooth: true
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 8,
+        lineStyle: {
+          width: 3,
+          color: '#409EFF'
+        },
+        itemStyle: {
+          color: '#409EFF',
+          borderWidth: 2,
+          borderColor: '#fff'
+        },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: 'rgba(64, 158, 255, 0.2)'
+            },
+            {
+              offset: 1,
+              color: 'rgba(64, 158, 255, 0.02)'
+            }
+          ])
+        }
       },
       {
         name: '监测报告',
         type: 'line',
         data: [3, 4, 3, 5, 4, 5, 4],
-        smooth: true
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 8,
+        lineStyle: {
+          width: 3,
+          color: '#67C23A'
+        },
+        itemStyle: {
+          color: '#67C23A',
+          borderWidth: 2,
+          borderColor: '#fff'
+        },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: 'rgba(103, 194, 58, 0.2)'
+            },
+            {
+              offset: 1,
+              color: 'rgba(103, 194, 58, 0.02)'
+            }
+          ])
+        }
       }
-    ]
+    ],
+    legend: {
+      data: ['巡护报告', '监测报告'],
+      right: 20,
+      top: 20,
+      itemWidth: 12,
+      itemHeight: 12,
+      textStyle: {
+        color: '#666'
+      }
+    }
   };
-  trendChart.setOption(option);
+
+  myChart.setOption(option);
+  window.addEventListener('resize', () => myChart.resize());
 };
 
 onMounted(() => {
@@ -479,4 +594,17 @@ const showTrendAnalysis = ref(false);
     }
   }
 }
+
+.chart-card {
+  height: 400px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+  margin-bottom: 24px;
+  transition: all 0.3s;
+
+  &:hover {
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  }
+}
 </style>