gxwebsoft/jczxw-java
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

酸雨环境空气相关代码提交

Browse Source
This commit is contained in:
hey7845
2022-01-20 21:58:58 +08:00
parent 8c153d1e2e
commit 7558886125
2 changed files with 69 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/views/atmosphere/acid-rain/trend/index.vue
View File

@@ -23,7 +23,7 @@
</a-col>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="项目类别:">
<a-select mode="multiple" v-model:value="queryParams.categoryList" :options="categoryOptions" placeholder="请选择项目类别"></a-select>
<a-select mode="multiple" @change="handleCategoryChange" v-model:value="queryParams.categoryList" :options="categoryOptions" placeholder="请选择项目类别"></a-select>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
@@ -135,9 +135,29 @@ export default {
},
// 纵坐标变化
handleYcoChange(value) {
if (value.length > 2) {
this.$message.warning('纵坐标最多只能选择两个')
this.queryParams.ycoList.splice(this.queryParams.ycoList.length - 1)
if (value.includes('rate') && !this.queryParams.categoryList.includes('酸雨频率')) {
this.queryParams.categoryList.push('酸雨频率')
}
if (!value.includes('rate') && this.queryParams.categoryList.includes('酸雨频率')) {
let index = this.queryParams.categoryList.indexOf('酸雨频率')
this.queryParams.categoryList.splice(index, 1)
}
},
// 项目类别变化
handleCategoryChange(value) {
if (value.includes('酸雨频率') && !this.queryParams.ycoList.includes('rate')) {
this.queryParams.ycoList.push('rate')
}
if (!value.includes('酸雨频率') && this.queryParams.ycoList.includes('rate')) {
let index = this.queryParams.ycoList.indexOf('rate')
this.queryParams.ycoList.splice(index, 1)
}
if ((value.includes('酸雨PH') || value.includes('降水PH')) && !this.queryParams.ycoList.includes('ph')) {
this.queryParams.ycoList.push('ph')
}
if (!value.includes('酸雨PH') && !value.includes('降水PH') && this.queryParams.ycoList.includes('ph')) {
let index = this.queryParams.ycoList.indexOf('ph')
this.queryParams.ycoList.splice(index, 1)
}
},
validParams() {
@@ -166,6 +186,18 @@ export default {
this.$message.warning('纵坐标不能为空')
return false
}
if (this.queryParams.xco === '年月' && this.queryParams.monthList.length === 0) {
this.$message.warning('横坐标为年月时，月份选择不能为空')
return false
}
if (this.queryParams.ycoList.includes('rate') && !this.queryParams.categoryList.includes('酸雨频率')) {
this.$message.warning('纵坐标选择酸雨频率时，项目类别也应选择酸雨频率')
return false
}
if (this.queryParams.categoryList.includes('酸雨频率') && !this.queryParams.ycoList.includes('rate')) {
this.$message.warning('项目类别选择酸雨频率时，纵坐标也应选择酸雨频率')
return false
}
return true
},
// 趋势图
@@ -184,11 +216,11 @@ export default {
});
},
initChart() {
this.trendData.yAxis[0].axisLabel = {
formatter: function(value) {
return value.toFixed(1);
}
};
// this.trendData.yAxis[0].axisLabel = {
// formatter: function(value) {
// return value.toFixed(1);
// }
// };
if (trendChart != null && trendChart != '' && trendChart != undefined) {
trendChart.dispose(); // 销毁
}
@@ -216,19 +248,22 @@ export default {
series: this.trendData.series
};
//添加一个新的刻度线 实现折线在柱状图的中间显示
option.xAxis[1] = {
type: 'value',
max: option.xAxis[0].data.length,
show: false
};
// option.xAxis[1] = {
// type: 'value',
// max: option.xAxis[0].data.length,
// show: false
// };
let lineArray = option.series.filter(item => item.type === 'line');
lineArray.forEach((item, index) => {
item.xAxisIndex = 1;
// item.xAxisIndex = 1;
item.lineStyle = {
type: 'dashed'
};
item.data = item.data.map((x, i) => [i + (1 / (option.legend.data.length + 1)) * (index + 1), x]);
if (index === 0) {
item.label.offset = [20,30]
}
// item.data = item.data.map((x, i) => [i + (1 / (option.legend.data.length + 1)) * (index + 1), x]);
});
console.log('option', option);
trendChart.setOption(option);