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, }, ], };