diff --git a/src/views/centerairC/temHistoryQuery/index.vue b/src/views/centerairC/temHistoryQuery/index.vue
index 4185f52..b2c6b2b 100644
--- a/src/views/centerairC/temHistoryQuery/index.vue
+++ b/src/views/centerairC/temHistoryQuery/index.vue
@@ -58,6 +58,8 @@
+
+
@@ -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: {
- name: "℃",
- nameTextStyle: {
- color: "rgba(255, 255, 255, 1)",
- fontSize: 12,
+ 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,40 +394,88 @@ export default {
},
}, //x轴分割线
},
- yAxis: {
- min: 0,
- // max:20,
- // name: "kwh", // 第一个 y 轴的单位描述
- // 设置 name 的样式
- nameTextStyle: {
- color: "rgba(255, 255, 255, 1)",
- fontSize: 12, //y轴单位文字大小
+ yAxis: [
+ {
+ min: 0,
+ // max:20,
+ // name: "kwh", // 第一个 y 轴的单位描述
+ // 设置 name 的样式
+ nameTextStyle: {
+ color: "rgba(255, 255, 255, 1)",
+ fontSize: 12, //y轴单位文字大小
+ },
+ miniInterval: 5,
+ type: "value",
+ // 修饰刻度标签的颜色即y坐标数据
+ axisLabel: {
+ color: "rgba(255, 255, 255, 1)",
+ fontSize: titleFontSize, //x轴文字大小
+ },
+ // 显示y坐标轴
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: "#365576", // 设置 y 轴线的颜色
+ },
+ },
+ //y轴分割线段数
+ // splitNumber: 10,
+ // 修改y轴分割线的颜色
+ splitLine: {
+ lineStyle: {
+ color: "#1a3d62", // 设置分割线的颜色
+ type: "dashed", // 设置分割线为虚线
+ },
+ },
},
- miniInterval: 5,
- type: "value",
- // 修饰刻度标签的颜色即y坐标数据
- axisLabel: {
- color: "rgba(255, 255, 255, 1)",
- fontSize: titleFontSize, //x轴文字大小
+ {
+ 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,
+ },
},
- // 显示y坐标轴
- axisLine: {
- show: true,
+ ],
+ series: [
+ {
+ type: "line",
+ // 拐点大小
+ symbolSize: titleFontSize * 0.5,
lineStyle: {
- color: "#365576", // 设置 y 轴线的颜色
+ // 设置折线的厚度
+ width: titleFontSize * 0.1,
},
+ symbol: "circle",
+ name: "最高气温",
+ yAxisIndex: 0,
},
- //y轴分割线段数
- // splitNumber: 10,
- // 修改y轴分割线的颜色
- splitLine: {
+ {
+ type: "line",
+ // 拐点大小
+ symbolSize: titleFontSize * 0.5,
lineStyle: {
- color: "#1a3d62", // 设置分割线的颜色
- type: "dashed", // 设置分割线为虚线
+ // 设置折线的厚度
+ width: titleFontSize * 0.1,
},
+ symbol: "circle",
+ name: "最低气温",
+ yAxisIndex: 0,
},
- },
- series: [
{
type: "line",
// 拐点大小
@@ -394,7 +485,8 @@ export default {
width: titleFontSize * 0.1,
},
symbol: "circle",
- name: "最高气温",
+ name: "最高湿度",
+ yAxisIndex: 1,
},
{
type: "line",
@@ -405,7 +497,8 @@ export default {
width: titleFontSize * 0.1,
},
symbol: "circle",
- name: "最低气温",
+ name: "最低湿度",
+ yAxisIndex: 1,
},
],
};