From e04c28bc16a27ea396e42013458b4490a7c6ee12 Mon Sep 17 00:00:00 2001
From: guoapeng <GuoAnPeng@163.com>
Date: Tue, 15 Jul 2025 16:44:55 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E5=9B=BE=E8=A1=A8Y=E8=BD=B4=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/home/LineChart.vue | 16 +++++++++++++---
 src/views/home/chart.vue          |  4 ++--
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/home/LineChart.vue b/src/components/home/LineChart.vue
index bb7dc03..b612e44 100644
--- a/src/components/home/LineChart.vue
+++ b/src/components/home/LineChart.vue
@@ -31,6 +31,8 @@ watch(
       },
       grid: {
         top: 100,
+        left: 100,
+        right: 100,
       },
       tooltip: {
         trigger: 'axis',
@@ -80,11 +82,17 @@ watch(
       yAxis: [
         {
           type: 'value',
-          name: '温/湿度',
+          name: 'H₂O₂浓度',
+          // nameRotate: 90, // y轴name旋转90度 使其垂直
+          // nameGap: 50, // y轴name与横纵坐标轴线的间距
+          nameLocation: 'end', // y轴name处于y轴的什么位置
         },
         {
           type: 'value',
-          name: 'H₂O₂浓度/相对饱和度',
+          name: '温度/相对湿度/H₂O₂相对饱和度',
+          // nameRotate: 90, // y轴name旋转90度 使其垂直
+          // nameGap: 50, // y轴name与横纵坐标轴线的间距
+          // nameLocation: 'start', // y轴name处于y轴的什么位置
         },
       ],
       series: [
@@ -94,6 +102,7 @@ watch(
           data: newValue.data?.map(item => item.temp.toFixed(2)),
           symbol: 'circle',
           symbolSize: 2,
+          yAxisIndex: 1,
           lineStyle: {
             color: '#1e90ff',
             width: 1,
@@ -105,6 +114,7 @@ watch(
           data: newValue.data?.map(item => item.rh.toFixed(2)),
           symbol: 'circle',
           symbolSize: 2,
+          yAxisIndex: 1,
           lineStyle: {
             color: '#32cd32',
             width: 1,
@@ -116,7 +126,7 @@ watch(
           data: newValue.data?.map(item => item.h2o2.toFixed(2)),
           symbol: 'circle',
           symbolSize: 2,
-          yAxisIndex: 1,
+
           lineStyle: {
             color: '#ffd700',
             width: 1,
diff --git a/src/views/home/chart.vue b/src/views/home/chart.vue
index d43aa53..e59f71f 100644
--- a/src/views/home/chart.vue
+++ b/src/views/home/chart.vue
@@ -213,14 +213,14 @@ const formatSeconds = (seconds: number) => {
       v-loading="chartLoading"
       element-loading-background="rgba(255, 255, 255, 0.1)"
       class="line-chart-content"
-      :style="{ 'grid-template-columns': `repeat(${chartList.length},1fr)` }"
+      :style="{ 'grid-template-columns': `repeat(${Math.max(chartList.length, 2)},1fr)` }"
     >
       <LineChart
         v-for="(item, index) in chartList"
         ref="chartRefs"
         :key="index"
         class="chart-box"
-        :style="{ width: `calc(100% / ${chartList.length} - 10px)` }"
+        :style="{ width: `calc(100% / ${Math.max(chartList.length, 2)} - 10px)` }"
         :env-data="item"
       />
     </div>