完善历史天气查询中图表的双y轴配置

src/views/centerairC/temHistoryQuery/index.vue

@@ -2,75 +2,37 @@
   <div class="app-container">
     <div class="btn-condition">
       <div class="condition-left" v-show="showSearch">
-        <el-form
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
-          :model="queryParams"
-          ref="queryForm"
-          size="small"
-          :inline="true"
-        >
           <el-form-item label="日期" prop="msgCode">
-            <el-date-picker
+            <el-date-picker style="width: auto" v-model="monthValue" type="month" placeholder="选择月"
-              style="width: auto"
+              value-format="yyyy-MM">
-              v-model="monthValue"
-              type="month"
-              placeholder="选择月"
-              value-format="yyyy-MM"
-            >
             </el-date-picker>
           </el-form-item>
         </el-form>
         <div class="primary-btn">
-          <el-button
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-            type="primary"
-            icon="el-icon-search"
-            size="mini"
-            @click="handleQuery"
-            >搜索</el-button
-          >
         </div>
         <div class="warning-btn">
-          <el-button
+          <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
-            type="warning"
-            icon="el-icon-download"
-            size="mini"
-            @click="handleExport"
-            >导出</el-button
-          >
         </div>
         <div class="cancel-btn">
-          <el-button
+          <el-button type="cancel" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-            type="cancel"
-            icon="el-icon-refresh"
-            size="mini"
-            @click="resetQuery"
-            >重置</el-button
-          >
         </div>
       </div>
     </div>
     <div class="charts" ref="chart_ref"></div>
-    <el-table
+    <el-table v-loading="loading" :data="postList" stripe :cell-style="tableRowStyle">
-      v-loading="loading"
-      :data="postList"
-      stripe
-      :cell-style="tableRowStyle"
-    >
       <el-table-column label="日期" align="center" prop="dateAndWeek" />
-      <el-table-column label="最高气温" align="center" prop="maxTemp" />
+      <el-table-column label="最高气温(℃)" align="center" prop="maxTemp" />
-      <el-table-column label="最低气温" align="center" prop="minTemp" />
+      <el-table-column label="最低气温(℃)" align="center" prop="minTemp" />
-      <el-table-column label="最高湿度" align="center" prop="maxHumidity" />
+      <el-table-column label="最高湿度(%)" align="center" prop="maxHumidity" />
-      <el-table-column label="最低湿度" align="center" prop="minHumidity" />
+      <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>
 
-    <pagination
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
-      v-show="total > 0"
+      @pagination="getList" />
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
   </div>
 </template>
 
@@ -175,66 +137,50 @@ export default {
             minHumidityValue.push(element.minHumidity);
           });
           let adapterOption = {};
+          // 计算双y轴最大最小值，
+          var Min1 = 0,
+            Min2 = 0,
+            Max1 = Math.ceil(Math.max(...hightValue, ...lowValue)),
+            Max2 = Math.ceil(Math.max(...maxHumidityValue, ...minHumidityValue));
+          console.log("Min1", Min1);
+          console.log("Min2", Min2);
+          console.log("Max1", Max1);
+          console.log("Max2", Max2);
           adapterOption = {
             xAxis: {
               data: timeValue,
             },
             yAxis: [
+              //两个y轴
               {
-                name: "℃",
+                min: Min1,
-                nameTextStyle: {
+                max: Max1,
-                  color: "rgba(255, 255, 255, 1)",
+                splitNumber: 10,
-                  fontSize: 12,
+                interval: (Max1 - Min1) / 10,
-                },
               },
               {
-                name: "%",
+                min: Min2,
-                nameTextStyle: {
+                max: Max2,
-                  color: "rgba(255, 255, 255, 1)",
+                splitNumber: 10,
-                  fontSize: 12,
+                interval: (Max2 - Min2) / 10,
-                },
               },
             ],
             series: [
               {
+                name: "最高气温",
                 data: hightValue,
-                //折线颜色
-                itemStyle: {
-                  color: "rgb(18, 126, 226)", //折线的颜色
-                },
-                lineStyle: {
-                  color: "rgb(18, 126, 226)", //折线点的颜色
-                },
               },
               {
+                name: "最低气温",
                 data: lowValue,
-                //折线颜色
-                itemStyle: {
-                  color: "rgb(250, 169, 19)", //折线的颜色
-                },
-                lineStyle: {
-                  color: "rgb(250, 169, 19)", //折线点的颜色
-                },
               },
               {
+                name: "最高湿度",
                 data: maxHumidityValue,
-                //折线颜色
-                itemStyle: {
-                  color: "rgb(52, 197, 94)", //折线的颜色
-                },
-                lineStyle: {
-                  color: "rgb(52, 197, 94)", //折线点的颜色
-                },
               },
               {
+                name: "最低湿度",
                 data: minHumidityValue,
-                //折线颜色
-                itemStyle: {
-                  color: "rgb(239, 68, 68)", //折线的颜色
-                },
-                lineStyle: {
-                  color: "rgb(239, 68, 68)", //折线点的颜色
-                },
               },
             ],
           };
@@ -272,6 +218,10 @@ export default {
     },
     /** 搜索按钮操作 */
     handleQuery() {
+      if (!this.monthValue) {
+        this.$message.warning("请选择日期");
+        return
+      }
       this.queryParams.pageNum = 1;
       this.getList();
       this.getChartData();
@@ -282,6 +232,10 @@ export default {
     },
     /** 导出按钮操作 */
     handleExport() {
+      if (!this.monthValue) {
+        this.$message.warning("请选择日期");
+        return
+      }
       this.queryParams.pageNum = 1;
       this.queryParams.pageSize = 32;
       this.queryParams.startTime = this.queryParams.endTime = this.monthValue;
@@ -289,7 +243,7 @@ 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",
@@ -304,7 +258,7 @@ export default {
             excel.export_json_to_excel({
               header: tHeader, //表头
               data, //数据
-              filename: "历史天气报表", //名称
+              filename: `${this.monthValue}历史天气报表`, //名称
               autoWidth: true, //宽度自适应
             });
             this.$message({
@@ -352,16 +306,61 @@ export default {
             // 设置提示框内文字的大小
             fontSize: titleFontSize,
           },
+          // 自定义 tooltip 内容
+          formatter: function (params) {
+            var res = params[0].name + "<br/>";
+            for (var i = 0, l = params.length; i < l; i++) {
+              var seriesName = params[i].seriesName;
+              var value = params[i].value;
+              var marker =
+                '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
+                params[i].color +
+                '"></span>';
+              // 根据不同德seriesName 返回不同的单位
+              if (seriesName.includes("气温")) {
+                res +=
+                  marker +
+                  seriesName +
+                  ":" +
+                  '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
+                  value +
+                  " " +
+                  "℃" +
+                  "</span><br>";
+              } else if (seriesName.includes("湿度")) {
+                res +=
+                  marker +
+                  seriesName +
+                  ":" +
+                  '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
+                  value +
+                  " " +
+                  "%" +
+                  "</span><br>";
+              }
+              else {
+                res +=
+                  marker +
+                  seriesName +
+                  ":" +
+                  '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
+                  value +
+                  "</span><br>";
+              }
+            }
+            return res;
+          },
         },
         legend: {
-          show: false,
+          data: ["最高气温", "最低气温", "最高湿度", "最低湿度"],
-          // textStyle: {
+          // selectedMode: false, // 是否允许图例进行点击
-          //   // 设置图例文字的大小
+          show: true, // 不显示图例
-          //   fontSize: 14
+          textStyle: {
-          // }
+            color: "white", // 设置图例文字颜色为蓝色
+          },
         },
         grid: {
-          top: "10%",
+          top: "15%",
           left: "4%",
           right: "6%",
           bottom: "3%",
@@ -398,7 +397,7 @@ export default {
           {
             min: 0,
             // max:20,
-            // name: "kwh", // 第一个 y 轴的单位描述
+            name: "气温(℃)",
             // 设置 name 的样式
             nameTextStyle: {
               color: "rgba(255, 255, 255, 1)",
@@ -430,7 +429,7 @@ export default {
           },
           {
             type: "value",
-            name: "%",
+            name: "湿度(%)",
             position: "right",
             nameTextStyle: {
               color: "rgba(255, 255, 255, 1)",
@@ -463,6 +462,13 @@ export default {
             symbol: "circle",
             name: "最高气温",
             yAxisIndex: 0,
+            //折线颜色
+            itemStyle: {
+              color: "rgb(18, 126, 226)", //折线的颜色
+            },
+            lineStyle: {
+              color: "rgb(18, 126, 226)", //折线点的颜色
+            },
           },
           {
             type: "line",
@@ -475,6 +481,13 @@ export default {
             symbol: "circle",
             name: "最低气温",
             yAxisIndex: 0,
+            //折线颜色
+            itemStyle: {
+              color: "rgb(250, 169, 19)", //折线的颜色
+            },
+            lineStyle: {
+              color: "rgb(250, 169, 19)", //折线点的颜色
+            },
           },
           {
             type: "line",
@@ -487,6 +500,13 @@ export default {
             symbol: "circle",
             name: "最高湿度",
             yAxisIndex: 1,
+            //折线颜色
+            itemStyle: {
+              color: "rgb(52, 197, 94)", //折线的颜色
+            },
+            lineStyle: {
+              color: "rgb(52, 197, 94)", //折线点的颜色
+            },
           },
           {
             type: "line",
@@ -499,6 +519,13 @@ export default {
             symbol: "circle",
             name: "最低湿度",
             yAxisIndex: 1,
+            //折线颜色
+            itemStyle: {
+              color: "rgb(239, 68, 68)", //折线的颜色
+            },
+            lineStyle: {
+              color: "rgb(239, 68, 68)", //折线点的颜色
+            },
           },
         ],
       };
@@ -514,6 +541,7 @@ export default {
   height: 300px;
   margin-bottom: 0.1rem;
 }
+
 // 媒体查询，适配大于2000px分辨率的大屏样式
 @media (min-width: 2000px) {
   .charts {