江河趋势图
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