左侧降雨量警戒线颜色

src/components/MineMonitor/LeftRainfallTrend.vue

@@ -16,7 +16,7 @@ import * as echarts from "echarts";
 import { debounce } from "lodash-es"; // 防抖函数，避免频繁触发resize
 
 import { getRainCurve } from '@/api/index-dp';
-import {
+  import {
   useMessage
 } from 'naive-ui';
 const message = useMessage();
@@ -25,18 +25,18 @@ const message = useMessage();
 let pollingTimer: number | null = null;
 // 轮询间隔时间（毫秒）
 const POLLING_INTERVAL = 10000; // 10秒
-
 // 设备状态数据列表
 var warningLines = ref([]);
 var xAxisData = ref([]);
 var yAxisData = ref([]);
+
 // 控制是否显示"暂无数据"提示
 const showNoData = ref(false);
 
-// 默认坐标轴配置
-const DEFAULT_X_AXIS_DATA = Array.from({ length: 24 }, (_, i) => `${i}:00`);
-const DEFAULT_Y_AXIS_MAX = 250; // Y轴最大值
-const DEFAULT_Y_AXIS_MIN = 0;   // Y轴最小值
+// // 默认坐标轴配置
+// const DEFAULT_X_AXIS_DATA = Array.from({ length: 24 }, (_, i) => `${i}:00`);
+// const DEFAULT_Y_AXIS_MAX = 250; // Y轴最大值
+// const DEFAULT_Y_AXIS_MIN = 0;   // Y轴最小值
 
 // 模拟接口请求函数
 const fetchRainCurve = async () => {
@@ -44,23 +44,21 @@ const fetchRainCurve = async () => {
     console.log('降雨量',response.data)
     const result = response.data
     if (result.code == 200) {
-      // 处理空数据情况
+
+         // 处理空数据情况
       if (!result.data || !result.data.ydata || result.data.ydata.length === 0) {
-        // 如果没有数据，设置默认空数组
-        yAxisData.value = new Array(24).fill(null);
-        xAxisData.value = DEFAULT_X_AXIS_DATA;
-        warningLines.value = result.data?.alarm || [];
         // 显示"暂无数据"提示
         showNoData.value = true;
       } else {
+        // 隐藏"暂无数据"提示
+        showNoData.value = false;
         yAxisData.value = result.data.ydata
         xAxisData.value = result.data.xdata
         warningLines.value = result.data.alarm
-        // 隐藏"暂无数据"提示
-        showNoData.value = false;
       }
-      
-      // 更新图表数据
+
+
+       // 更新图表数据
       updateChartData();
     } else {
       message.error(result.msg)
@@ -95,10 +93,10 @@ const updateChartData = () => {
       xAxis: {
         data: xAxisData.value
       },
-      yAxis: {
-        min: DEFAULT_Y_AXIS_MIN,
-        max: DEFAULT_Y_AXIS_MAX
-      },
+      // yAxis: {
+      //   min: DEFAULT_Y_AXIS_MIN,
+      //   max: DEFAULT_Y_AXIS_MAX
+      // },
       series: [{
         data: yAxisData.value,
         markLine: {
@@ -110,8 +108,8 @@ const updateChartData = () => {
             name: line.name,
             yAxis: line.value,
             lineStyle: {
-              color: line.color,
-              width: 1,
+              color: `#${line.color}`, 
+              width: 3,
               type: 'dashed',
             }
           }))
@@ -128,7 +126,7 @@ let chartInstance: echarts.ECharts | null = null;
 const initChart = () => {
   if (!chartRef.value) return;
   chartInstance = echarts.init(chartRef.value);
-  
+
   chartInstance.setOption({
     grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
      tooltip: {
@@ -136,7 +134,8 @@ const initChart = () => {
   },
     xAxis: {
       type: "category",
-      data: DEFAULT_X_AXIS_DATA, // 使用默认X轴数据
+      //  data: DEFAULT_X_AXIS_DATA, // 使用默认X轴数据
+      data: xAxisData.value,
       axisLine: { lineStyle: { color: "#4f6b95" } },
       axisLabel: { color: "#fff", interval: 2 },
     },
@@ -147,8 +146,9 @@ const initChart = () => {
         padding: [0, 38, 0, 0],
       },
       type: "value",
-      min: DEFAULT_Y_AXIS_MIN,   // 设置Y轴最小值
-      max: DEFAULT_Y_AXIS_MAX,   // 设置Y轴最大值
+      // max: 300,
+      // min: DEFAULT_Y_AXIS_MIN,   // 设置Y轴最小值
+      // max: DEFAULT_Y_AXIS_MAX,   // 设置Y轴最大值
       axisLine: { lineStyle: { color: "#4f6b95" } },
       axisLabel: { color: "white"},
       splitLine: { lineStyle: { color: "rgba(79, 107, 149, 0.2)" } },
@@ -156,7 +156,7 @@ const initChart = () => {
     
     series: [
       {
-        data: new Array(24).fill(null), // 初始为空数据
+        data: yAxisData.value,
         type: "line",
         smooth: true,
         showSymbol: false,
@@ -169,7 +169,18 @@ const initChart = () => {
         lineStyle: { color: "rgba(54, 162, 235, 1)", width: 2 },
         markLine: {
           symbol: 'none',
-          data: [] // 初始无警戒线
+          data: warningLines.value.map(line => ({
+            label: {
+              show: false
+            },
+            name: line.name,
+            yAxis: line.value,
+            lineStyle: {
+             color: `#${line.color}`, 
+              width: 3,
+              type: 'dashed',
+            }
+          }))
         }
       },
     ],
@@ -212,9 +223,9 @@ onMounted(() => {
       window.addEventListener("resize", resizeChart);
       // 添加容器尺寸观察器
       cleanupObserver = observeContainerResize();
-      
+  
       // 启动轮询
-      startPolling();
+      startPolling();    
     });
   });
 });
@@ -222,7 +233,6 @@ onMounted(() => {
 onUnmounted(() => {
   // 清理轮询定时器
   stopPolling();
-  
   window.removeEventListener("resize", resizeChart);
   if (cleanupObserver) {
     cleanupObserver();
@@ -265,8 +275,7 @@ onUnmounted(() => {
   .chart-container {
     width: 100%;
     height: 100%;
-  }
-  
+  }  
   .no-data-overlay {
     position: absolute;
     top: 0;