fix:图表Y轴修改

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,

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>