修改了可视化大屏的显示问题

src/views/dashboard/screen/components/LeftPanel/MiddleCard.vue

@@ -92,37 +92,25 @@ const initChart = async () => {
   const option = {
     backgroundColor: 'transparent',
     tooltip: {
-      trigger: 'item'
+      trigger: 'item',
-    },
+      formatter: '{b}: {c}'
-    legend: {
-      orient: 'vertical',
-      left: '0%',
-      top: 'middle',
-      textStyle: {
-        color: '#fff',
-        fontSize: 14
-      },
-      itemGap: 20,
-      icon: 'circle',
-      itemWidth: 10,
-      itemHeight: 10,
-      formatter: function(name) {
-        return name
-      }
     },
     radar: {
-      center: ['65%', '50%'],
+      center: ['50%', '50%'],
-      radius: '60%',
+      radius: '65%',
       indicator: [],
       shape: 'circle',
-      splitNumber: 5,
+      splitNumber: 8,
       axisName: {
         color: 'rgba(255, 255, 255, 0.7)',
         fontSize: 12
       },
       splitLine: {
         lineStyle: {
-          color: 'rgba(255, 255, 255, 0.1)'
+          color: 'rgba(255, 255, 255, 0.2)',
+          width: 2,
+          type: 'dashed',
+          dashOffset: 0
         }
       },
       splitArea: {
@@ -132,8 +120,9 @@ const initChart = async () => {
         }
       },
       axisLine: {
+        show: true,
         lineStyle: {
-          color: 'rgba(255, 255, 255, 0.1)'
+          color: 'rgba(255, 255, 255, 0.3)'
         }
       }
     },
@@ -142,6 +131,27 @@ const initChart = async () => {
 
   chart.setOption(option)
 
+  // 添加动画效果
+  let angle = 0
+  let dashOffset = 0
+  const animate = () => {
+    angle = (angle + 0.5) % 360
+    dashOffset = (dashOffset + 1) % 20
+
+    chart.setOption({
+      radar: {
+        startAngle: angle,
+        splitLine: {
+          lineStyle: {
+            dashOffset: -dashOffset
+          }
+        }
+      }
+    })
+    requestAnimationFrame(animate)
+  }
+  animate()
+
   // 确保图表正确渲染
   setTimeout(() => {
     if (chart) {
@@ -183,14 +193,18 @@ const updateChart = () => {
   // 生成系列数据
   const series = [{
     type: 'radar',
+    animation: true,
+    animationDuration: 2000,
+    animationEasing: 'quadraticInOut',
     data: points.map(point => {
       const pointType = point.type
       const colors = {
-        water: ['#409EFF', '#36CE9E'],
+        water: ['rgba(64, 158, 255, 1)', 'rgba(54, 206, 158, 0.1)'],
-        air: ['#E6A23C', '#F56C6C'],
+        air: ['rgba(230, 162, 60, 1)', 'rgba(245, 108, 108, 0.1)'],
-        soil: ['#67C23A', '#95D475']
+        soil: ['rgba(103, 194, 58, 1)', 'rgba(149, 212, 117, 0.1)'],
+        default: ['rgba(64, 158, 255, 1)', 'rgba(54, 206, 158, 0.1)']
       }
-      const colorSet = colors[pointType] || colors.water
+      const colorSet = colors[pointType] || colors.default
 
       return {
         name: point.point,
@@ -198,27 +212,36 @@ const updateChart = () => {
           const ind = point.indicators.find(i => i.name === indicator.name)
           return ind ? ind.value : 0
         }),
+        symbol: 'circle',
+        symbolSize: 6,
         itemStyle: {
-          color: colorSet[0]
+          color: colorSet[0],
+          borderColor: '#fff',
+          borderWidth: 2,
+          shadowColor: colorSet[0],
+          shadowBlur: 10
+        },
+        lineStyle: {
+          color: colorSet[0],
+          width: 2,
+          type: [5, 10],
+          shadowColor: colorSet[0],
+          shadowBlur: 5
         },
         areaStyle: {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             { offset: 0, color: colorSet[0] },
             { offset: 1, color: colorSet[1] }
           ]),
-          opacity: 0.3
+          opacity: 0.5
         },
-        lineStyle: {
-          width: 2
-        },
-        symbol: 'circle',
-        symbolSize: 6,
         emphasis: {
-          lineStyle: {
+          scale: true,
-            width: 4
+          itemStyle: {
+            shadowBlur: 20
           },
           areaStyle: {
-            opacity: 0.5
+            opacity: 0.8
           }
         }
       }
@@ -226,14 +249,34 @@ const updateChart = () => {
   }]
 
   chart.setOption({
-    legend: {
-      data: points.map(item => item.point)
-    },
     radar: {
       indicator: radarIndicators
     },
     series: series
   })
+
+  // 添加呼吸动画
+  let breatheEffect = 0
+  const animate = () => {
+    breatheEffect = (breatheEffect + 1) % 100
+    const opacity = 0.3 + Math.sin(breatheEffect * Math.PI / 50) * 0.2
+
+    series[0].data.forEach((item, index) => {
+      chart.setOption({
+        series: [{
+          data: series[0].data.map((dataItem, i) => ({
+            ...dataItem,
+            areaStyle: {
+              ...dataItem.areaStyle,
+              opacity: i === index ? opacity : 0.3
+            }
+          }))
+        }]
+      })
+    })
+    requestAnimationFrame(animate)
+  }
+  animate()
 }
 
 // 定时更新数据
@@ -369,6 +412,7 @@ onUnmounted(() => {
       background: rgba(0, 0, 0, 0.2);
       border-radius: 4px;
       padding: 12px;
+      position: relative;
 
       .chart {
         height: 100%;

src/views/dashboard/screen/components/RightPanel/MiddleCard.vue

@@ -35,9 +35,9 @@ const initChart = async () => {
     },
     grid: {
       top: '3%',
-      right: '5%',
+      right: '15%',
       bottom: '3%',
-      left: '15%',
+      left: '5%',
       containLabel: true
     },
     xAxis: {
@@ -115,7 +115,7 @@ const fetchIndicatorData = async () => {
   try {
     const res = await getAlertStatisticsByIndicator()
     if (res.success && res.data) {
-      // 将数据转换为图表所需格式
+      // 将数据转换为图表所需格式，并限制显示数量为6个
       const chartData = res.data
         .filter(item => item.indicator_name)
         .map(item => ({
@@ -128,20 +128,45 @@ const fetchIndicatorData = async () => {
           }
         }))
         .sort((a, b) => b.value - a.value)
+        .slice(0, 6)  // 只显示前6个数据
 
       // 更新图表配置
       chart.setOption({
+        grid: {
+          top: '8%',
+          right: '20%',
+          bottom: '8%',
+          left: '0%',
+          containLabel: true
+        },
         yAxis: {
-          data: chartData.map(item => item.name)
+          data: chartData.map(item => item.name),
+          axisLabel: {
+            margin: 20,
+            fontSize: 14
+          }
         },
         series: [
           {
             data: chartData,
+            barWidth: 12,
+            itemStyle: {
+              borderRadius: [0, 4, 4, 0]
+            },
+            label: {
+              show: true,
+              position: 'right',
+              distance: 15,
+              color: '#fff',
+              fontSize: 14,
+              formatter: '{c}次'
+            },
             markLine: {
               silent: true,
               symbol: ['none', 'none'],
               lineStyle: {
-                color: 'rgba(255, 255, 255, 0.3)'
+                color: 'rgba(255, 255, 255, 0.2)',
+                type: [5, 10]
               },
               data: [
                 {
@@ -153,55 +178,77 @@ const fetchIndicatorData = async () => {
                   }
                 }
               ]
-            },
-            animationDelay: function(idx) {
-              return idx * 100
             }
           }
         ]
       })
+
+      // 添加渐变动画效果
+      let currentIndex = 0
+      const animate = () => {
+        if (currentIndex >= chartData.length) {
+          currentIndex = 0
+        }
+
+        chart.dispatchAction({
+          type: 'highlight',
+          seriesIndex: 0,
+          dataIndex: currentIndex
+        })
+
+        // 取消上一个高亮
+        const lastIndex = (currentIndex - 1 + chartData.length) % chartData.length
+        chart.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 0,
+          dataIndex: lastIndex
+        })
+
+        currentIndex++
+        setTimeout(animate, 2000)
+      }
+      animate()
     }
   } catch (error) {
     console.error('获取指标预警统计数据失败:', error)
   }
-
 }
 
 // 获取指标颜色
 const getIndicatorColor = (indicatorName) => {
   const colors = {
     '水体pH值': new echarts.graphic.LinearGradient(1, 0, 0, 0, [
-      { offset: 0, color: '#36CFFF' },
+      { offset: 0, color: 'rgba(54, 207, 255, 1)' },
-      { offset: 1, color: '#2861F5' }
+      { offset: 1, color: 'rgba(40, 97, 245, 0.8)' }
     ]),
     '溶解氧': new echarts.graphic.LinearGradient(1, 0, 0, 0, [
-      { offset: 0, color: '#4EF568' },
+      { offset: 0, color: 'rgba(78, 245, 104, 1)' },
-      { offset: 1, color: '#2AB256' }
+      { offset: 1, color: 'rgba(42, 178, 86, 0.8)' }
     ]),
     '盐度': new echarts.graphic.LinearGradient(1, 0, 0, 0, [
-      { offset: 0, color: '#FFB72C' },
+      { offset: 0, color: 'rgba(255, 183, 44, 1)' },
-      { offset: 1, color: '#F5612A' }
+      { offset: 1, color: 'rgba(245, 97, 42, 0.8)' }
     ]),
     '水温': new echarts.graphic.LinearGradient(1, 0, 0, 0, [
-      { offset: 0, color: '#FF36D9' },
+      { offset: 0, color: 'rgba(255, 54, 217, 1)' },
-      { offset: 1, color: '#C92AF5' }
+      { offset: 1, color: 'rgba(201, 42, 245, 0.8)' }
     ]),
     '浊度': new echarts.graphic.LinearGradient(1, 0, 0, 0, [
-      { offset: 0, color: '#36FFB0' },
+      { offset: 0, color: 'rgba(54, 255, 176, 1)' },
-      { offset: 1, color: '#2AF5A1' }
+      { offset: 1, color: 'rgba(42, 245, 161, 0.8)' }
     ]),
     'PM2.5': new echarts.graphic.LinearGradient(1, 0, 0, 0, [
-      { offset: 0, color: '#7636FF' },
+      { offset: 0, color: 'rgba(118, 54, 255, 1)' },
-      { offset: 1, color: '#2A3CF5' }
+      { offset: 1, color: 'rgba(42, 60, 245, 0.8)' }
     ]),
     '氮氧化物': new echarts.graphic.LinearGradient(1, 0, 0, 0, [
-      { offset: 0, color: '#FF7636' },
+      { offset: 0, color: 'rgba(255, 118, 54, 1)' },
-      { offset: 1, color: '#F52A2A' }
+      { offset: 1, color: 'rgba(245, 42, 42, 0.8)' }
     ])
   }
   return colors[indicatorName] || new echarts.graphic.LinearGradient(1, 0, 0, 0, [
-    { offset: 0, color: '#36CFFF' },
+    { offset: 0, color: 'rgba(54, 207, 255, 1)' },
-    { offset: 1, color: '#2861F5' }
+    { offset: 1, color: 'rgba(40, 97, 245, 0.8)' }
   ])
 }
 

src/views/dashboard/screen/components/RightPanel/TopCard.vue

@@ -40,7 +40,7 @@ const initChart = async () => {
         fontSize: 12
       },
       top: 0,
-      right: '5%',
+      right: '0%',
       itemWidth: 12,
       itemHeight: 12
     },