998 lines
31 KiB
Vue
998 lines
31 KiB
Vue
<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.riverType"
|
||
@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="selectModel"
|
||
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"
|
||
:disabled="yDisable"
|
||
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: [],
|
||
riverType:'',
|
||
placeList: [],
|
||
xco: "Xco_1", // 横坐标
|
||
yco:"",
|
||
monitorIndexList: [], // 监测指标
|
||
},
|
||
trendData: [],
|
||
regionLevelOptions: [
|
||
{ label: "江河", value: "river" },
|
||
{ label: "自治区级水功能区", value: "autonomous_region" },
|
||
{ label: "国家级水功能区", value: "country" },
|
||
{ label: "水站", value: "water" },
|
||
],
|
||
sectionOptions: [],
|
||
yearOptions: [],
|
||
indicatorOptions: [
|
||
],
|
||
selectModel:'multiple',
|
||
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.5",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:"0.025",color:"#209f53" },
|
||
{ label: "纳污红线", value: "纳污红线", limit:"0.5",color:"#209f53" },
|
||
],
|
||
waterIndexOption:[
|
||
{ label: "全选", value: "全选", limit:"0",color:"#209f53" },
|
||
// { label: "水温", value: "水温", limit:"2",color:"#209f53" },
|
||
{ label: "ph", value: "ph", limit:"9",color:"#209f53" },
|
||
{ label: "溶解氧", value: "溶解氧", limit:"6",color:"#bbb443" },
|
||
{ label: "高锰酸盐指数", value: "高锰酸盐指数", limit:"4",color:"#209f53" },
|
||
{ label: "氨氮", value: "氨氮", limit:"0.5",color:"#ad3abe" },
|
||
{ label: "总磷", value: "总磷", limit:"0.025",color:"#20749f" },
|
||
],
|
||
|
||
innerSection: [], // 内湖断面
|
||
specialSection: [], // 专湖断面
|
||
yDisable:false,
|
||
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=='全因子' || e=='纳污红线'){
|
||
this.yDisable = true
|
||
this.selectModel = 'default'
|
||
this.queryParams.yco = 'Yco_3'
|
||
}else{
|
||
this.selectModel = 'multiple'
|
||
this.yDisable = false
|
||
}
|
||
|
||
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 = [];
|
||
this.queryParams.monitorIndexList = [];
|
||
this.yDisable = false
|
||
|
||
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.waterIndexOption];
|
||
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>
|