江河趋势图
This commit is contained in:
庞东林
27
src/api/ecology/river-trend.js
Normal file
27
src/api/ecology/river-trend.js
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
|
// 江河水点位
|
||||||
|
|
||||||
|
export const getRiverPoint = function () {
|
||||||
|
return axios.get('/waterFunctionArea/surfaceWaterPoint')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 自治区
|
||||||
|
export const getRiverProvicePoint = function () {
|
||||||
|
return axios.get('/waterFunctionArea/autonomousWaterFunctionAreaPoint')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 国家级
|
||||||
|
export const getRiverNationalPoint = function () {
|
||||||
|
return axios.get('/waterFunctionArea/nationalLevelWaterFunctionAreaPoint')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 水站
|
||||||
|
export const getRiverStationPoint = function () {
|
||||||
|
return axios.get('/waterFunctionArea/WaterStationPoint')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 统计图表
|
||||||
|
export const riverWaterTrend = function () {
|
||||||
|
return axios.get('/api/waterFunctionArea/trendChart/data')
|
||||||
|
}
|
||||||
972
src/views/water/river/trend/index.vue
Normal file
972
src/views/water/river/trend/index.vue
Normal file
@@ -0,0 +1,972 @@
|
|||||||
|
<template>
|
||||||
|
<div class="ele-body">
|
||||||
|
<!-- 搜索表单 -->
|
||||||
|
<a-form
|
||||||
|
:model="queryParams"
|
||||||
|
:label-col="{ md: { span: 6 }, sm: { span: 24 } }"
|
||||||
|
:wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
|
||||||
|
>
|
||||||
|
<a-row>
|
||||||
|
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||||
|
<a-form-item label="年度:">
|
||||||
|
<a-select
|
||||||
|
mode="multiple"
|
||||||
|
v-model:value="queryParams.yearList"
|
||||||
|
:options="yearOptions"
|
||||||
|
placeholder="请选择年度"
|
||||||
|
@change="handleYearChange"
|
||||||
|
allowClear
|
||||||
|
>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||||
|
<a-form-item label="月份:">
|
||||||
|
<a-select
|
||||||
|
mode="multiple"
|
||||||
|
v-model:value="queryParams.monthList"
|
||||||
|
:options="monthOptions"
|
||||||
|
placeholder="请选择月份"
|
||||||
|
@change="handleMonthChange"
|
||||||
|
allowClear
|
||||||
|
>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||||
|
<a-form-item label="江河类别:">
|
||||||
|
<a-select
|
||||||
|
v-model:value="queryParams.regionLevel"
|
||||||
|
@change="handleRiverChange"
|
||||||
|
allowClear
|
||||||
|
placeholder="请选择区域等级"
|
||||||
|
>
|
||||||
|
<a-select-option
|
||||||
|
v-for="item in regionLevelOptions"
|
||||||
|
:key="item.value"
|
||||||
|
>{{ item.label }}</a-select-option
|
||||||
|
>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||||
|
<a-form-item label="断面名称:">
|
||||||
|
<a-select
|
||||||
|
mode="multiple"
|
||||||
|
v-model:value="queryParams.placeList"
|
||||||
|
:options="sectionOptions"
|
||||||
|
placeholder="请选择断面名称"
|
||||||
|
@change="handleSectionChange"
|
||||||
|
allowClear
|
||||||
|
>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||||
|
<a-form-item label="监测指标:">
|
||||||
|
<a-select
|
||||||
|
mode="multiple"
|
||||||
|
v-model:value="queryParams.monitorIndexList"
|
||||||
|
:options="indicatorOptions"
|
||||||
|
placeholder="请选择监测指标"
|
||||||
|
@change="handleIndexChange"
|
||||||
|
allowClear
|
||||||
|
>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||||
|
<a-form-item label="横坐标:">
|
||||||
|
<a-select
|
||||||
|
v-model:value="queryParams.xco"
|
||||||
|
:options="xOptions"
|
||||||
|
allowClear
|
||||||
|
placeholder="请选择横坐标"
|
||||||
|
>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||||
|
<a-form-item label="纵坐标:">
|
||||||
|
<a-select
|
||||||
|
v-model:value="queryParams.yco"
|
||||||
|
:options="yOptions"
|
||||||
|
allowClear
|
||||||
|
placeholder="请选择纵坐标"
|
||||||
|
>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :lg="6" :md="12" :sm="24" :xs="24" style="text-align: center">
|
||||||
|
<a-space>
|
||||||
|
<a-button type="primary" class="mb-20" @click="drawTrend"
|
||||||
|
>开始统计</a-button
|
||||||
|
>
|
||||||
|
</a-space>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
<a-card :bordered="false">
|
||||||
|
<div id="chartColumn" style="width: 100%; height: 700px;"><div class="empty">暂无数据</div></div>
|
||||||
|
</a-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
let trendChart;
|
||||||
|
|
||||||
|
import { getRiverPoint, getRiverProvicePoint, getRiverNationalPoint, getRiverStationPoint, riverWaterTrend } from "@/api/ecology/river-trend.js";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
queryParams: {
|
||||||
|
yearList: [],
|
||||||
|
monthList: [],
|
||||||
|
lakeType:'',
|
||||||
|
placeList: [],
|
||||||
|
xco: "Xco_1", // 横坐标
|
||||||
|
yco:"",
|
||||||
|
monitorIndexList: [], // 监测指标
|
||||||
|
},
|
||||||
|
trendData: [],
|
||||||
|
regionLevelOptions: [
|
||||||
|
{ label: "江河", value: "river" },
|
||||||
|
{ label: "自治区级水功能区", value: "autonomous_region" },
|
||||||
|
{ label: "国家级水功能区", value: "country" },
|
||||||
|
{ label: "水站", value: "water" },
|
||||||
|
],
|
||||||
|
sectionOptions: [],
|
||||||
|
yearOptions: [],
|
||||||
|
indicatorOptions: [
|
||||||
|
],
|
||||||
|
allIndexOptions:[
|
||||||
|
{ label: "全选", value: "全选", limit:"0",color:"#209f53" },
|
||||||
|
{ label: "五日生化需氧量", value: "五日生化需氧量", limit:"3",color:"#209f53" },
|
||||||
|
{ label: "化学需氧量", value: "化学需氧量", limit:"15",color:"#209f53" },
|
||||||
|
{ label: "总磷", value: "总磷", limit:"0.025",color:"#20749f" },
|
||||||
|
{ label: "挥发酚", value: "挥发酚", limit:"0.002",color:"#7bbe3a" },
|
||||||
|
{ label: "氟化物", value: "氟化物", limit:"1",color:"#ad3abe" },
|
||||||
|
{ label: "氰化物 ", value: "氰化物", limit:"0.05",color:"#a4a3f1" },
|
||||||
|
{ label: "汞", value: "汞", limit:"0.00005",color:"#f1eca3" },
|
||||||
|
{ label: "溶解氧", value: "溶解氧", limit:"6",color:"#bbb443" },
|
||||||
|
{ label: "石油类", value: "石油类", limit:"0.05",color:"#62bb43" },
|
||||||
|
{ label: "砷", value: "砷", limit:"0.05",color:"#3cd560" },
|
||||||
|
{ label: "硒", value: "硒", limit:"0.01",color:"#91b516" },
|
||||||
|
{ label: "硫化物", value: "硫化物", limit:"1",color:"#4ab516" },
|
||||||
|
{ label: "铅", value: "铅", limit:"0.01",color:"#62255a" },
|
||||||
|
{ label: "铜", value: "铜", limit:"1",color:"#8a4c82" },
|
||||||
|
{ label: "铬", value: "铬", limit:"0.06",color:"#63258b" },
|
||||||
|
{ label: "锌", value: "锌", limit:"1",color:"#25388b" },
|
||||||
|
{ label: "镉", value: "镉", limit:"0.005",color:"#258b80" },
|
||||||
|
{ label: "阴离子表面活性剂 ", value: "阴离子表面活性剂", limit:"0.2",color:"#27aa49" },
|
||||||
|
{ label: "高锰酸盐指数", value: "高锰酸盐指数", limit:"4",color:"#209f53" },
|
||||||
|
{ label: "ph", value: "ph", limit:"9",color:"#209f53" },
|
||||||
|
],
|
||||||
|
otherIndexOption:[
|
||||||
|
{ label: "全因子", value: "全因子", limit:"1",color:"#209f53" },
|
||||||
|
{ label: "纳污红线", value: "纳污红线", limit:"1",color:"#209f53" },
|
||||||
|
],
|
||||||
|
|
||||||
|
innerSection: [], // 内湖断面
|
||||||
|
specialSection: [], // 专湖断面
|
||||||
|
|
||||||
|
monthOptions: [
|
||||||
|
// {
|
||||||
|
// label: "全部",
|
||||||
|
// value: "全部",
|
||||||
|
// },
|
||||||
|
],
|
||||||
|
xOptions: [
|
||||||
|
{
|
||||||
|
label: "年度",
|
||||||
|
value: "Xco_1",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "年月",
|
||||||
|
value: "Xco_2",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "区域/测点名称",
|
||||||
|
value: "Xco_3",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yOptions: [
|
||||||
|
{
|
||||||
|
label: "浓度",
|
||||||
|
value: "Yco_1",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "综合营养指数（无量纲）",
|
||||||
|
value: "Yco_2",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "水质类别",
|
||||||
|
value: "Yco_3",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
// 图表生成数据
|
||||||
|
xAxis: {},
|
||||||
|
series: {},
|
||||||
|
yAxisMax:1, //Y轴最大值
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.loadOptionData();
|
||||||
|
|
||||||
|
Array.prototype.remove = function(val) {
|
||||||
|
var index = this.indexOf(val);
|
||||||
|
if (index > -1) {
|
||||||
|
this.splice(index, 1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 全选
|
||||||
|
//年份
|
||||||
|
handleYearChange(e){
|
||||||
|
if(e.indexOf('全选')>-1){
|
||||||
|
this.queryParams.yearList = [...this.yearOptions.map(item=>(
|
||||||
|
item.value
|
||||||
|
))]
|
||||||
|
this.queryParams.yearList.remove('全选');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 月份
|
||||||
|
handleMonthChange(e){
|
||||||
|
if(e.indexOf('全选')>-1){
|
||||||
|
this.queryParams.monthList = [...this.monthOptions.map(item=>(
|
||||||
|
item.value
|
||||||
|
))]
|
||||||
|
this.queryParams.monthList.remove('全选');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 断面
|
||||||
|
handleSectionChange(e){
|
||||||
|
if(e.indexOf('全选')>-1){
|
||||||
|
this.queryParams.placeList = [...this.sectionOptions.map(item=>(
|
||||||
|
item.value
|
||||||
|
))]
|
||||||
|
this.queryParams.placeList.remove('全选');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 指标
|
||||||
|
handleIndexChange(e){
|
||||||
|
if(e.indexOf('全选')>-1){
|
||||||
|
this.queryParams.monitorIndexList = [...this.indicatorOptions.map(item=>(
|
||||||
|
item.value
|
||||||
|
))]
|
||||||
|
this.queryParams.monitorIndexList.remove('全选');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 下拉列表
|
||||||
|
loadOptionData() {
|
||||||
|
let yy = new Date().getFullYear();
|
||||||
|
this.yearOptions.push({
|
||||||
|
label: '全选',
|
||||||
|
value: '全选',
|
||||||
|
})
|
||||||
|
this.monthOptions.push({
|
||||||
|
label: '全选',
|
||||||
|
value: '全选',
|
||||||
|
})
|
||||||
|
for (let i = 1; i <= 12; i++) {
|
||||||
|
this.yearOptions.push({
|
||||||
|
label: yy - i,
|
||||||
|
value: yy - i,
|
||||||
|
});
|
||||||
|
this.monthOptions.push({ label: i + "月", value: i<10?('0'+i):i });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 江河类别
|
||||||
|
|
||||||
|
handleRiverChange(type){
|
||||||
|
this.queryParams.placeList = [];
|
||||||
|
if(type){
|
||||||
|
this.sectionOptions = []
|
||||||
|
this.indicatorOptions = []
|
||||||
|
if(type==this.regionLevelOptions[0].value){
|
||||||
|
this.indicatorOptions = [...this.allIndexOptions];
|
||||||
|
getRiverPoint().then((res) => {
|
||||||
|
if (res.data.code == 0) {
|
||||||
|
this.sectionOptions = this.buildSectionSelect(res.data.data)
|
||||||
|
} else {
|
||||||
|
this.$message.error(res.data.msg);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if(type==this.regionLevelOptions[1].value){
|
||||||
|
this.indicatorOptions = [...this.otherIndexOption];
|
||||||
|
getRiverProvicePoint().then((res) => {
|
||||||
|
if (res.data.code == 0) {
|
||||||
|
this.sectionOptions = this.buildSectionSelect(res.data.data)
|
||||||
|
} else {
|
||||||
|
this.$message.error(res.data.msg);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if(type==this.regionLevelOptions[2].value){
|
||||||
|
this.indicatorOptions = [...this.otherIndexOption];
|
||||||
|
getRiverNationalPoint().then((res) => {
|
||||||
|
if (res.data.code == 0) {
|
||||||
|
this.sectionOptions = this.buildSectionSelect(res.data.data)
|
||||||
|
} else {
|
||||||
|
this.$message.error(res.data.msg);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if(type==this.regionLevelOptions[3].value){
|
||||||
|
this.indicatorOptions = [...this.allIndexOptions];
|
||||||
|
getRiverStationPoint().then((res) => {
|
||||||
|
if (res.data.code == 0) {
|
||||||
|
this.sectionOptions = this.buildSectionSelect(res.data.data)
|
||||||
|
} else {
|
||||||
|
this.$message.error(res.data.msg);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.log('this.sectionOptions',this.sectionOptions)
|
||||||
|
},
|
||||||
|
// 趋势图
|
||||||
|
drawTrend() {
|
||||||
|
|
||||||
|
if(this.queryParams.yco == 'Yco_3' && this.queryParams.monitorIndexList.length>0){
|
||||||
|
this.$message.error('纵坐标为水质类别时，请勿选择监测指标！');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(this.queryParams.yco == 'Yco_1' && this.queryParams.monitorIndexList.length>1 && this.queryParams.placeList.length>1){
|
||||||
|
this.$message.error('纵坐标为浓度时，请勿选择监测指标和断面名称不能同时为多选！');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
riverWaterTrend(this.queryParams).then((res) => {
|
||||||
|
console.log("res", res);
|
||||||
|
if (res.data.code == 0) {
|
||||||
|
this.trendData = res.data.data || [];
|
||||||
|
this.initChart();
|
||||||
|
} else {
|
||||||
|
console.log("res.data.msg", res.data.msg);
|
||||||
|
this.$message.error(res.data.msg);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 生成断面数据
|
||||||
|
buildSectionSelect(data) {
|
||||||
|
let palceOptions = {};
|
||||||
|
let newPlace = [];
|
||||||
|
data.forEach((item) => {
|
||||||
|
palceOptions[item.sectionName] = item.sectionName;
|
||||||
|
});
|
||||||
|
newPlace.push({
|
||||||
|
label: '全选',
|
||||||
|
value: '全选',
|
||||||
|
})
|
||||||
|
for (let i in palceOptions) {
|
||||||
|
newPlace.push({
|
||||||
|
label: palceOptions[i],
|
||||||
|
value: palceOptions[i],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return [...newPlace];
|
||||||
|
},
|
||||||
|
|
||||||
|
initChart() {
|
||||||
|
this.yAxisMax = 1;
|
||||||
|
|
||||||
|
if (trendChart != null && trendChart != "" && trendChart != undefined) {
|
||||||
|
trendChart.dispose(); // 销毁
|
||||||
|
}
|
||||||
|
if(Array.isArray(this.trendData) && this.trendData.length==0){
|
||||||
|
document.getElementById("chartColumn").innerHTML = '<div class="empty">暂无数据</div>'
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
trendChart = echarts.init(document.getElementById("chartColumn"));
|
||||||
|
let text = '';
|
||||||
|
|
||||||
|
if(this.queryParams.placeList.length==1){
|
||||||
|
let code = ''
|
||||||
|
if(this.queryParams.yco == 'Yco_1'){
|
||||||
|
code = '监测指标浓度'
|
||||||
|
}
|
||||||
|
if(this.queryParams.yco == 'Yco_2'){
|
||||||
|
code = '综合营养指数'
|
||||||
|
}
|
||||||
|
if(this.queryParams.yco == 'Yco_3'){
|
||||||
|
code = '水质类别'
|
||||||
|
}
|
||||||
|
|
||||||
|
text = this.queryParams.placeList[0] + this.queryParams.yearList.join('、') + '年度' + code
|
||||||
|
}
|
||||||
|
|
||||||
|
// 生成x轴
|
||||||
|
this.buildxAxis();
|
||||||
|
// 生成series
|
||||||
|
this.buildSeries();
|
||||||
|
|
||||||
|
let option = {
|
||||||
|
title:{
|
||||||
|
text:text,
|
||||||
|
x:'center',
|
||||||
|
textStyle: {
|
||||||
|
color: '#3A7BD5',
|
||||||
|
fontSize: 16
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
axisPointer: {
|
||||||
|
type: "cross",
|
||||||
|
crossStyle: {
|
||||||
|
color: "#999",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
formatter: (this.queryParams.yco == 'Yco_3') && ((params)=>{
|
||||||
|
if(this.queryParams.yco == 'Yco_3'){
|
||||||
|
var html = '<div style="font-weight:bold">水质类别</div>';
|
||||||
|
for(var i=0;i<params.length;i++){
|
||||||
|
console.log('params',params)
|
||||||
|
html += "<div style='line-height:25px'><span style='display: inline-block;width: 10px; height: 10px;margin-right:5px; border-radius: 10px;background:"+params[i].color+"'></span>类别"+ params[i].seriesName +"："+params[i].data+"%" + "</div>";
|
||||||
|
}
|
||||||
|
return html
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
feature: {
|
||||||
|
saveAsImage: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: true,
|
||||||
|
x: "center", //可设定图例在左、右、居中
|
||||||
|
y: "bottom", //可设定图例在上、下、居中
|
||||||
|
padding: [0, 50, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
|
||||||
|
// formatter: function (name) {
|
||||||
|
// return name;
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
xAxis: this.xAxis,
|
||||||
|
yAxis: {
|
||||||
|
type: "value",
|
||||||
|
max: this.yAxisMax,
|
||||||
|
name: this.queryParams.yco == 'Yco_1' ? '单位：mg/L' : '',
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
interval: 'auto',
|
||||||
|
formatter: this.queryParams.yco=='Yco_3' && '{value} %'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
series: this.series,
|
||||||
|
};
|
||||||
|
|
||||||
|
trendChart.setOption(option);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 生成Y轴最大值
|
||||||
|
buildYMax(value){
|
||||||
|
if(this.yAxisMax<value){
|
||||||
|
this.yAxisMax = Math.ceil(value)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 生成x轴标签
|
||||||
|
buildxAxis() {
|
||||||
|
let xAxis = [];
|
||||||
|
// x坐标是断面
|
||||||
|
if (this.queryParams.xco == "Xco_3") {
|
||||||
|
this.trendData.forEach((item) => {
|
||||||
|
if(xAxis.indexOf(item.place)<0){
|
||||||
|
xAxis.push(item.place);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// x左边为年度、年月,只选一个断面
|
||||||
|
// && ( Array.isArray(this.queryParams.placeList) && this.queryParams.placeList.length==1)
|
||||||
|
if (this.queryParams.xco == "Xco_1" || this.queryParams.xco == "Xco_2") {
|
||||||
|
this.trendData.forEach((item) => {
|
||||||
|
let x = this.buildYearMonth(item);
|
||||||
|
if (xAxis.indexOf(x) < 0) xAxis.push(x);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
let rotate = 0;
|
||||||
|
if (xAxis.join("").length > 50) {
|
||||||
|
rotate = 10;
|
||||||
|
}
|
||||||
|
console.log('xAxis',xAxis)
|
||||||
|
this.xAxis = {
|
||||||
|
type: "category",
|
||||||
|
axisLabel: {
|
||||||
|
interval: 0,
|
||||||
|
rotate: rotate,
|
||||||
|
},
|
||||||
|
// boundaryGap: false, // 第一个数据点距离y轴距离
|
||||||
|
data: xAxis,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
// 生成营养度三根线
|
||||||
|
buildLine() {
|
||||||
|
let lines = [];
|
||||||
|
|
||||||
|
let xMax = this.xAxis.data.length;
|
||||||
|
// 三根营养线,在纵坐标选择综合营养指数时显示
|
||||||
|
if (this.queryParams.yco == "Yco_2"){
|
||||||
|
this.buildYMax(72);
|
||||||
|
|
||||||
|
if(xMax-3<1){
|
||||||
|
lines = [
|
||||||
|
{
|
||||||
|
name: "中度富营养↓",
|
||||||
|
yAxis: 70,
|
||||||
|
label: {
|
||||||
|
color: "red",
|
||||||
|
borderColor: "red",
|
||||||
|
formatter:'中度富营养↓'
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
color: "red",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "轻度富营养↓",
|
||||||
|
yAxis: 60,
|
||||||
|
label: {
|
||||||
|
color: "#fbfb00",
|
||||||
|
borderColor: "#fbfb00",
|
||||||
|
formatter:'轻度富营养↓'
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
color: "#fbfb00",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "中营养↓",
|
||||||
|
yAxis: 50,
|
||||||
|
label: {
|
||||||
|
color: "#99ff00",
|
||||||
|
borderColor: "#99ff00",
|
||||||
|
formatter:'中营养↓'
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
color: "#99ff00",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
}else{
|
||||||
|
lines = [
|
||||||
|
[
|
||||||
|
{
|
||||||
|
name: "中度富营养↓",
|
||||||
|
yAxis: 70,
|
||||||
|
xAxis: 0,
|
||||||
|
label: {
|
||||||
|
color: "red",
|
||||||
|
borderColor: "red",
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
color: "red",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
yAxis: 70,
|
||||||
|
xAxis: xMax - 3,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
name: "轻度富营养↓",
|
||||||
|
yAxis: 60,
|
||||||
|
xAxis: 0,
|
||||||
|
label: {
|
||||||
|
color: "#fbfb00",
|
||||||
|
borderColor: "#fbfb00",
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
color: "#fbfb00",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
yAxis: 60,
|
||||||
|
xAxis: xMax - 2,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
name: "中营养↓",
|
||||||
|
yAxis: 50,
|
||||||
|
xAxis: 0,
|
||||||
|
label: {
|
||||||
|
color: "#99ff00",
|
||||||
|
borderColor: "#99ff00",
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
color: "#99ff00",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
yAxis: 50,
|
||||||
|
xAxis: xMax - 1,
|
||||||
|
},
|
||||||
|
]];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 在纵坐标选择浓度，那显示指标均线
|
||||||
|
if(this.queryParams.yco == "Yco_1"){
|
||||||
|
let singleLine = []
|
||||||
|
this.queryParams.monitorIndexList.forEach(item=>{
|
||||||
|
this.indicatorOptions.forEach(single=>{
|
||||||
|
if(single.value == item){
|
||||||
|
this.buildYMax(single.limit);
|
||||||
|
|
||||||
|
|
||||||
|
const name = single.label+'Ⅱ类标准'
|
||||||
|
singleLine.push(
|
||||||
|
{
|
||||||
|
name:name,
|
||||||
|
type:'line',
|
||||||
|
symbol:'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z',
|
||||||
|
markLine:{
|
||||||
|
data:[
|
||||||
|
{
|
||||||
|
name:name,
|
||||||
|
yAxis: single.limit,
|
||||||
|
}
|
||||||
|
],
|
||||||
|
lineStyle: {
|
||||||
|
type: "dashed", // dotted,solid,dashed
|
||||||
|
// color: single.color,
|
||||||
|
width: 2,
|
||||||
|
opacity: 0.9,
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
// color: single.color,
|
||||||
|
formatter: single.label+"Ⅱ类标准",
|
||||||
|
position:'insideEndBottom'
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
// singleLine.push(
|
||||||
|
// {
|
||||||
|
// name: item,
|
||||||
|
// yAxis: single.limit,
|
||||||
|
// lineStyle: {
|
||||||
|
// type: "dashed", // dotted,solid,dashed
|
||||||
|
// color: single.color,
|
||||||
|
// width: 2,
|
||||||
|
// opacity: 0.9,
|
||||||
|
// },
|
||||||
|
// label: {
|
||||||
|
// color: single.color,
|
||||||
|
// formatter: single.label+"Ⅱ类标准",
|
||||||
|
// },
|
||||||
|
// }
|
||||||
|
// )
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
lines = [...singleLine]
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
return lines;
|
||||||
|
},
|
||||||
|
// 生成年月标识
|
||||||
|
buildYearMonth(obj){
|
||||||
|
if(this.queryParams.xco == "Xco_1"){
|
||||||
|
return obj.year;
|
||||||
|
}else{
|
||||||
|
return obj.year + (obj.month ? ('-'+obj.month) : "");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
// 生成图表数据
|
||||||
|
buildSeries() {
|
||||||
|
let series = [];
|
||||||
|
|
||||||
|
|
||||||
|
let charType = 'bar'
|
||||||
|
// 如果Y坐标选择了浓度，那就是折线图，选择综合指标是柱状图，选择水质类别那就是堆叠
|
||||||
|
if(this.queryParams.yco == 'Yco_1'){
|
||||||
|
charType = 'line'
|
||||||
|
}
|
||||||
|
// // 如果选择了监测指标，那就是折线图
|
||||||
|
// if(Array.isArray(this.queryParams.monitorIndexList) && this.queryParams.monitorIndexList.length){
|
||||||
|
// charType = 'line'
|
||||||
|
// }
|
||||||
|
|
||||||
|
// X轴坐标
|
||||||
|
let seriesItemName = this.xAxis.data;
|
||||||
|
|
||||||
|
// x坐标是断面
|
||||||
|
if (this.queryParams.xco == "Xco_3") {
|
||||||
|
|
||||||
|
// 如果是断面，则用年月来分组数据
|
||||||
|
// let seriesItemName = this.xAxis.data;
|
||||||
|
let group = [];
|
||||||
|
|
||||||
|
|
||||||
|
// 如果是水质类别，那么就按类别分组
|
||||||
|
if(this.queryParams.yco=='Yco_3'){
|
||||||
|
this.trendData.forEach((item) => {
|
||||||
|
if (group.indexOf(item.value) < 0) {
|
||||||
|
group.push(item.value);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}else{
|
||||||
|
this.trendData.forEach((item) => {
|
||||||
|
if (group.indexOf(this.buildYearMonth(item)) < 0) {
|
||||||
|
group.push(this.buildYearMonth(item));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
group.forEach(item=>{
|
||||||
|
let itemData = [];
|
||||||
|
seriesItemName.forEach((data,index)=>{
|
||||||
|
itemData[index] = 0
|
||||||
|
this.trendData.forEach((single) => {
|
||||||
|
// 水质类别
|
||||||
|
if(this.queryParams.yco=='Yco_3'){
|
||||||
|
if(item==single.value && data == single.place){
|
||||||
|
itemData[index] += 1;
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
if (data == single.place && item == this.buildYearMonth(single)) {
|
||||||
|
itemData[index] = single.value;
|
||||||
|
this.buildYMax(single.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})
|
||||||
|
|
||||||
|
let single = {
|
||||||
|
name: item,
|
||||||
|
type: charType,
|
||||||
|
label: {
|
||||||
|
// 图形上的文本标签
|
||||||
|
show: true,
|
||||||
|
position: this.queryParams.yco=='Yco_3' ? "inside":"top", // 相对位置
|
||||||
|
formatter: (params)=>{
|
||||||
|
if(this.queryParams.yco=='Yco_3'){
|
||||||
|
if(params.data){
|
||||||
|
return params.data+"%"
|
||||||
|
}else{
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: [...itemData],
|
||||||
|
};
|
||||||
|
// 纵坐标 水质类别，那就堆叠
|
||||||
|
if(this.queryParams.yco=='Yco_3'){
|
||||||
|
single.stack = '水质类别'
|
||||||
|
this.buildYMax(100);
|
||||||
|
}
|
||||||
|
|
||||||
|
series.push(single);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 一个断面多个指标
|
||||||
|
const singleType = this.queryParams.placeList.length==1 && this.queryParams.monitorIndexList.length>1;
|
||||||
|
|
||||||
|
if (this.queryParams.xco == "Xco_1" || this.queryParams.xco == "Xco_2") {
|
||||||
|
// let seriesItemName = this.xAxis.data;
|
||||||
|
let group = [];
|
||||||
|
|
||||||
|
// 如果是水质类别，那么就按类别分组
|
||||||
|
if(this.queryParams.yco=='Yco_3'){
|
||||||
|
this.trendData.forEach((item) => {
|
||||||
|
if (group.indexOf(item.value) < 0) {
|
||||||
|
group.push(item.value);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}else{
|
||||||
|
if(singleType){
|
||||||
|
this.trendData.forEach((item) => {
|
||||||
|
if (group.indexOf(item.indexName) < 0) {
|
||||||
|
group.push(item.indexName);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}else{
|
||||||
|
this.trendData.forEach((item) => {
|
||||||
|
if (group.indexOf(item.place) < 0) {
|
||||||
|
group.push(item.place);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 生成数据图例
|
||||||
|
{
|
||||||
|
name: "一组",
|
||||||
|
data: [120, 200, 150, 80, 70, 110, 130],
|
||||||
|
type: "bar", // line
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "二组",
|
||||||
|
data: [120, 200, 150, 80, 70, 110, 130],
|
||||||
|
type: "bar", // line
|
||||||
|
},
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
group.forEach(item=>{
|
||||||
|
let itemData = [];
|
||||||
|
seriesItemName.forEach((data,index)=>{
|
||||||
|
itemData[index] = 0
|
||||||
|
this.trendData.forEach((single) => {
|
||||||
|
// 水质类别
|
||||||
|
if(this.queryParams.yco=='Yco_3'){
|
||||||
|
if(item==single.value && data == this.buildYearMonth(single)){
|
||||||
|
itemData[index] += 1;
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
let name = ''
|
||||||
|
if(singleType){
|
||||||
|
name = single.indexName
|
||||||
|
}else{
|
||||||
|
name = single.place
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data == this.buildYearMonth(single) && item == name) {
|
||||||
|
itemData[index] = single.value;
|
||||||
|
this.buildYMax(single.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
})
|
||||||
|
|
||||||
|
let single = {
|
||||||
|
name: item,
|
||||||
|
type: charType,
|
||||||
|
label: {
|
||||||
|
// 图形上的文本标签
|
||||||
|
show: true,
|
||||||
|
position: this.queryParams.yco=='Yco_3' ? "inside":"top", // 相对位置
|
||||||
|
formatter: (params)=>{
|
||||||
|
if(this.queryParams.yco=='Yco_3'){
|
||||||
|
if(params.data){
|
||||||
|
return params.data+"%"
|
||||||
|
}else{
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
barGap: this.queryParams.yco=='Yco_3' && '-100%',
|
||||||
|
data: [...itemData],
|
||||||
|
};
|
||||||
|
// 纵坐标 水质类别，那就堆叠
|
||||||
|
if(this.queryParams.yco=='Yco_3'){
|
||||||
|
single.stack = "Yco_3"
|
||||||
|
this.buildYMax(100);
|
||||||
|
}
|
||||||
|
|
||||||
|
series.push(single);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if(this.queryParams.yco=='Yco_1'){
|
||||||
|
series = [...series,...this.buildLine()]
|
||||||
|
}else{
|
||||||
|
series[0].markLine = {
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
type: "line",
|
||||||
|
width: 3,
|
||||||
|
opacity: 0.9,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
padding: [1, 10],
|
||||||
|
lineHeight: 30,
|
||||||
|
show: true,
|
||||||
|
position: this.queryParams.yco=='Yco_1' ? "insideEndBottom" : "end",
|
||||||
|
borderType: "dashed",
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
data: [...this.buildLine()],
|
||||||
|
symbol: ["none", "none"],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// 对指标的名字转成中文
|
||||||
|
if(singleType){
|
||||||
|
series = series.map(item=>{
|
||||||
|
let name = item.name;
|
||||||
|
this.indicatorOptions.forEach(single=>{
|
||||||
|
if(single.value == item.name){
|
||||||
|
name = single.label
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return {
|
||||||
|
...item,
|
||||||
|
name:name
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("series", series);
|
||||||
|
//进行堆叠图百分比计算
|
||||||
|
if(this.queryParams.yco=='Yco_3'){
|
||||||
|
// 所有分组的总值
|
||||||
|
let allGroupCount = [];
|
||||||
|
seriesItemName.forEach((item,index)=>{
|
||||||
|
let count = 0;
|
||||||
|
series.forEach(group=>{
|
||||||
|
count += group.data[index]
|
||||||
|
})
|
||||||
|
allGroupCount.push(count)
|
||||||
|
})
|
||||||
|
|
||||||
|
// 通过总值计算出百分比
|
||||||
|
seriesItemName.forEach((item,index)=>{
|
||||||
|
series = series.map(group=>{
|
||||||
|
group.data[index] = (Math.round(group.data[index] / allGroupCount[index] * 10000) / 100.00)
|
||||||
|
return {
|
||||||
|
...group,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this.series = series;
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped lang="less">
|
||||||
|
.mb-20 {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.empty{
|
||||||
|
height: 100%;
|
||||||
|
line-height: 400px;
|
||||||
|
color: #ccc;
|
||||||
|
font-size: 16px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user