增加最高最低湿度

Co-authored-by: Copilot <copilot@github.com>

src/views/centerairC/temHistoryQuery/index.vue

@@ -58,6 +58,8 @@
       <el-table-column label="日期" align="center" prop="dateAndWeek" />
       <el-table-column label="最高气温" align="center" prop="maxTemp" />
       <el-table-column label="最低气温" align="center" prop="minTemp" />
+      <el-table-column label="最高湿度" align="center" prop="maxHumidity" />
+      <el-table-column label="最低湿度" align="center" prop="minHumidity" />
       <el-table-column label="天气" align="center" prop="weatherConditions" />
       <el-table-column label="风向" align="center" prop="windDirection" />
     </el-table>
@@ -163,23 +165,36 @@ export default {
           let timeValue = [];
           let hightValue = [];
           let lowValue = [];
+          let maxHumidityValue = [];
+          let minHumidityValue = [];
           data.forEach((element) => {
             timeValue.push(element.weatherDate);
             hightValue.push(element.maxTemp);
             lowValue.push(element.minTemp);
+            maxHumidityValue.push(element.maxHumidity);
+            minHumidityValue.push(element.minHumidity);
           });
           let adapterOption = {};
           adapterOption = {
             xAxis: {
               data: timeValue,
             },
-            yAxis: {
+            yAxis: [
+              {
                 name: "℃",
                 nameTextStyle: {
                   color: "rgba(255, 255, 255, 1)",
                   fontSize: 12,
                 },
               },
+              {
+                name: "%",
+                nameTextStyle: {
+                  color: "rgba(255, 255, 255, 1)",
+                  fontSize: 12,
+                },
+              },
+            ],
             series: [
               {
                 data: hightValue,
@@ -201,6 +216,26 @@ export default {
                   color: "rgb(250, 169, 19)", //折线点的颜色
                 },
               },
+              {
+                data: maxHumidityValue,
+                //折线颜色
+                itemStyle: {
+                  color: "rgb(52, 197, 94)", //折线的颜色
+                },
+                lineStyle: {
+                  color: "rgb(52, 197, 94)", //折线点的颜色
+                },
+              },
+              {
+                data: minHumidityValue,
+                //折线颜色
+                itemStyle: {
+                  color: "rgb(239, 68, 68)", //折线的颜色
+                },
+                lineStyle: {
+                  color: "rgb(239, 68, 68)", //折线点的颜色
+                },
+              },
             ],
           };
           //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
@@ -220,6 +255,12 @@ export default {
               {
                 data: [],
               },
+              {
+                data: [],
+              },
+              {
+                data: [],
+              },
             ],
           };
           //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
@@ -248,11 +289,13 @@ export default {
       weatherTempData(this.queryParams).then((response) => {
         if (response.code == 200) {
           import("@/assets/excel/Export2Excel").then((excel) => {
-            var tHeader = ["日期", "最高气温", "最低气温", "天气", "风向"]; // 导出的excel表头名信息 改参数
+            var tHeader = ["日期", "最高气温", "最低气温", "最高湿度", "最低湿度", "天气", "风向"]; // 导出的excel表头名信息 改参数
             var filterVal = [
               "dateAndWeek",
               "maxTemp",
               "minTemp",
+              "maxHumidity",
+              "minHumidity",
               "weatherConditions",
               "windDirection",
             ];
@@ -351,7 +394,8 @@ export default {
             },
           }, //x轴分割线
         },
-        yAxis: {
+        yAxis: [
+          {
             min: 0,
             // max:20,
             // name: "kwh", // 第一个 y 轴的单位描述
@@ -384,6 +428,29 @@ export default {
               },
             },
           },
+          {
+            type: "value",
+            name: "%",
+            position: "right",
+            nameTextStyle: {
+              color: "rgba(255, 255, 255, 1)",
+              fontSize: 12,
+            },
+            axisLabel: {
+              color: "rgba(255, 255, 255, 1)",
+              fontSize: titleFontSize,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#365576",
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+        ],
         series: [
           {
             type: "line",
@@ -395,6 +462,7 @@ export default {
             },
             symbol: "circle",
             name: "最高气温",
+            yAxisIndex: 0,
           },
           {
             type: "line",
@@ -406,6 +474,31 @@ export default {
             },
             symbol: "circle",
             name: "最低气温",
+            yAxisIndex: 0,
+          },
+          {
+            type: "line",
+            // 拐点大小
+            symbolSize: titleFontSize * 0.5,
+            lineStyle: {
+              // 设置折线的厚度
+              width: titleFontSize * 0.1,
+            },
+            symbol: "circle",
+            name: "最高湿度",
+            yAxisIndex: 1,
+          },
+          {
+            type: "line",
+            // 拐点大小
+            symbolSize: titleFontSize * 0.5,
+            lineStyle: {
+              // 设置折线的厚度
+              width: titleFontSize * 0.1,
+            },
+            symbol: "circle",
+            name: "最低湿度",
+            yAxisIndex: 1,
           },
         ],
       };