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

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

meizhou
selia-zx 1 week ago
parent
c5a7d314ef
commit
0b96d3a864
1 changed files with 127 additions and 99 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. 226
      src/views/centerairC/temHistoryQuery/index.vue

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

@ -2,75 +2,37 @@
<div class="app-container">
<div class="btn-condition">
<div class="condition-left" v-show="showSearch">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
>
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
<el-form-item label="日期" prop="msgCode">
<el-date-picker
style="width: auto"
v-model="monthValue"
type="month"
placeholder="选择月"
value-format="yyyy-MM"
>
<el-date-picker style="width: auto" v-model="monthValue" type="month" placeholder="选择月"
value-format="yyyy-MM">
</el-date-picker>
</el-form-item>
</el-form>
<div class="primary-btn">
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
</div>
<div class="warning-btn">
<el-button
type="warning"
icon="el-icon-download"
size="mini"
@click="handleExport"
>导出</el-button
>
<el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
</div>
<div class="cancel-btn">
<el-button
type="cancel"
icon="el-icon-refresh"
size="mini"
@click="resetQuery"
>重置</el-button
>
<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
v-loading="loading"
:data="postList"
stripe
:cell-style="tableRowStyle"
>
<el-table 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="minTemp" />
<el-table-column label="最高湿度" align="center" prop="maxHumidity" />
<el-table-column label="最低湿度" align="center" prop="minHumidity" />
<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>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<pagination v-show="total > 0" :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: "℃",
nameTextStyle: {
color: "rgba(255, 255, 255, 1)",
fontSize: 12,
},
min: Min1,
max: Max1,
splitNumber: 10,
interval: (Max1 - Min1) / 10,
},
{
name: "%",
nameTextStyle: {
color: "rgba(255, 255, 255, 1)",
fontSize: 12,
},
min: Min2,
max: Max2,
splitNumber: 10,
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,
// textStyle: {
// // 设置图例文字的大小
// fontSize: 14
// }
data: ["最高气温", "最低气温", "最高湿度", "最低湿度"],
// selectedMode: false, // 是否允许图例进行点击
show: true, // 不显示图例
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 {

Write Preview
Loading…
Cancel
Save