lijianfu
/
eemcs_ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

增加最高最低湿度 

Co-authored-by: Copilot <copilot@github.com>
meizhou
3067418132@qq.com 2 weeks ago
parent
ae74554deb
commit
93f4320f0a
1 changed files with 128 additions and 35 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 163
      src/views/centerairC/temHistoryQuery/index.vue

163
src/views/centerairC/temHistoryQuery/index.vue
Unescape View File

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

Write Preview
Loading…
Cancel
Save