湖库图表基础页面
This commit is contained in:
庞东林
@@ -75,4 +75,11 @@ export const specialAverageNutrition = function (data) {
|
|||||||
export const specialYearContrastUrl = '/lakeLibrary/wateAnalysis/special/yearContrast';
|
export const specialYearContrastUrl = '/lakeLibrary/wateAnalysis/special/yearContrast';
|
||||||
export const specialYearContrastData = function (data) {
|
export const specialYearContrastData = function (data) {
|
||||||
return axios.post(specialYearContrastUrl,data)
|
return axios.post(specialYearContrastUrl,data)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 湖库统计图表
|
||||||
|
|
||||||
|
export const lakeLibraryUrl = '/lakeLibrary/trendChart/data';
|
||||||
|
export const lakeLibrary = function (data) {
|
||||||
|
return axios.post(lakeLibraryUrl,data)
|
||||||
}
|
}
|
||||||
659
src/views/water/lake/trend/index.vue
Normal file
659
src/views/water/lake/trend/index.vue
Normal file
@@ -0,0 +1,659 @@
|
|||||||
|
<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="请选择年度"
|
||||||
|
>
|
||||||
|
</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="请选择月份"
|
||||||
|
>
|
||||||
|
</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.lakeType"
|
||||||
|
@change="handleLakeTypeChange"
|
||||||
|
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="请选择断面名称"
|
||||||
|
>
|
||||||
|
</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="请选择监测指标"
|
||||||
|
>
|
||||||
|
</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: 500px"></div>
|
||||||
|
</a-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
let trendChart;
|
||||||
|
import { getColumnOptions } from "@/api/ecology/noise/function-sound";
|
||||||
|
|
||||||
|
import { getSpecialLakeDropdown } from "@/api/ecology/new-lake";
|
||||||
|
import { getLakeDropdown } from "@/api/ecology/new-lake";
|
||||||
|
|
||||||
|
import {
|
||||||
|
lakeLibrary,
|
||||||
|
} from "@/api/ecology/new-lake";
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
queryParams: {
|
||||||
|
yearList: ["2020", "2021"],
|
||||||
|
placeList: [],
|
||||||
|
xco: "Xco_1", // 横坐标
|
||||||
|
ycoList: [],
|
||||||
|
monitorIndexList: [], // 监测指标
|
||||||
|
},
|
||||||
|
trendData: [],
|
||||||
|
regionLevelOptions: [
|
||||||
|
{ label: "城市内湖", value: "city" },
|
||||||
|
{ label: "专项湖库", value: "special" },
|
||||||
|
],
|
||||||
|
placeOptions: [],
|
||||||
|
sectionOptions: [],
|
||||||
|
yearOptions: [],
|
||||||
|
indicatorOptions: [],
|
||||||
|
|
||||||
|
innerSection: [], // 内湖断面
|
||||||
|
specialSection: [], // 专湖断面
|
||||||
|
innerIndex: [
|
||||||
|
{ label: "pH值", value: "ph" },
|
||||||
|
{ label: "透明度（cm）", value: "transparency" },
|
||||||
|
{ label: "溶解氧饱和度（﹪）", value: "dissolvedOxygenSaturation" },
|
||||||
|
{ label: "溶解氧", value: "dissolvedOxygen" },
|
||||||
|
{ label: "高锰酸盐指数", value: "permanganateIndex" },
|
||||||
|
{ label: "五日生化需氧量", value: "fiveDayBod" },
|
||||||
|
{ label: "总氮 ", value: "totalNitrogen" },
|
||||||
|
{ label: "氨氮", value: "ammonia" },
|
||||||
|
{ label: "挥发酚", value: "volatilePhenol" },
|
||||||
|
{ label: "砷(mg/L)", value: "as" },
|
||||||
|
{ label: "汞 (mg/L)", value: "hg" },
|
||||||
|
{ label: "六价铬 (mg/L)", value: "cr6" },
|
||||||
|
{ label: "铅 (mg/L)", value: "pb" },
|
||||||
|
{ label: "镉 (mg/L)", value: "cd" },
|
||||||
|
{ label: "总磷", value: "totalPhosphorus" },
|
||||||
|
{ label: "石油类", value: "petro" },
|
||||||
|
{ label: "粪大肠菌群（MPN/L）", value: "fecalColiforms" },
|
||||||
|
{ label: "化学需氧量", value: "cod" },
|
||||||
|
{ label: "叶绿素a (mg/m3)", value: "chlA" },
|
||||||
|
{ label: "阴离子表面活性剂(mg/L)", value: "anSaa" },
|
||||||
|
{ label: "硫化物(mg/L) ", value: "s" },
|
||||||
|
{ label: "氧化还原电位（mV）", value: "oxidationReductionPotential" },
|
||||||
|
], // 内湖监测指标
|
||||||
|
specialIndex: [
|
||||||
|
{ label: "浊度(NTU)", value: "turbidity" },
|
||||||
|
{ label: "水温(℃)", value: "wTemp" },
|
||||||
|
{ label: "水位(m)", value: "wd" },
|
||||||
|
{ label: "pH值", value: "ph" },
|
||||||
|
{ label: "电导率(ms/m)", value: "wCond" },
|
||||||
|
{ label: "透明度（cm）", value: "transp" },
|
||||||
|
{ label: "溶解氧 (mg/L)", value: "dissolvedOxygen" },
|
||||||
|
{ label: "高锰酸盐指数 (mg/L)", value: "codmn" },
|
||||||
|
{ label: "五日生化需氧量", value: "bod5" },
|
||||||
|
{ label: "氨氮 (mg/L)", value: "nh4N" },
|
||||||
|
{ label: "石油类 (mg/L)", value: "oils" },
|
||||||
|
{ label: "总氮 (mg/L)", value: "nTotal" },
|
||||||
|
{ label: "总磷 (mg/L)", value: "pTotal" },
|
||||||
|
{ label: "叶绿素 (mg/L)", value: "chlA" },
|
||||||
|
{ label: "挥发酚 (mg/L)", value: "vPhen" },
|
||||||
|
{ label: "汞 (mg/L)", value: "wHg" },
|
||||||
|
{ label: "铅 (mg/L)", value: "wPb" },
|
||||||
|
{ label: "化学需氧量 (mg/L)", value: "codcr" },
|
||||||
|
{ label: "铜 (mg/L)", value: "wCu" },
|
||||||
|
{ label: "锌 (mg/L)", value: "wZn" },
|
||||||
|
{ label: "氟化物 (mg/L)", value: "f" },
|
||||||
|
{ label: "硒 (mg/L)", value: "se" },
|
||||||
|
{ label: "砷 (mg/L)", value: "as" },
|
||||||
|
{ label: "镉 (mg/L)", value: "cd" },
|
||||||
|
{ label: "六价铬 (mg/L)", value: "cr6" },
|
||||||
|
{ label: "氰化物 (mg/L)", value: "cnTotal" },
|
||||||
|
{ label: "阴离子表面活性剂 (mg/L)", value: "anSaa" },
|
||||||
|
{ label: "硫化物 (mg/L)", value: "s" },
|
||||||
|
{ label: "粪大肠菌群 (mg/L)", value: "coloOrg" },
|
||||||
|
{ label: "硫酸盐 (mg/L)", value: "so4" },
|
||||||
|
{ label: "氯化物 (mg/L)", value: "cl" },
|
||||||
|
{ label: "硝酸盐 (mg/L)", value: "no3N" },
|
||||||
|
{ label: "铁 (mg/L)", value: "wFe" },
|
||||||
|
{ label: "锰 (mg/L)", value: "wMn" },
|
||||||
|
], //专湖监测指标
|
||||||
|
|
||||||
|
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",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.loadOptionData();
|
||||||
|
this.buildChart();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 下拉列表
|
||||||
|
loadOptionData() {
|
||||||
|
getColumnOptions("monitor_year").then((res) => {
|
||||||
|
this.yearOptions = res.data.data.map((item) => {
|
||||||
|
return {
|
||||||
|
label: item,
|
||||||
|
value: item,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
});
|
||||||
|
for (let i = 1; i <= 12; i++) {
|
||||||
|
this.monthOptions.push({ label: i + "月", value: i });
|
||||||
|
}
|
||||||
|
// 内湖
|
||||||
|
this.getInnerList();
|
||||||
|
// 专湖
|
||||||
|
this.getSpecialList();
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
handleLakeTypeChange(value) {
|
||||||
|
this.queryParams.placeList = [];
|
||||||
|
this.queryParams.monitorIndexList = [];
|
||||||
|
if (value == "city") {
|
||||||
|
// 内湖
|
||||||
|
this.sectionOptions = [...this.innerSection];
|
||||||
|
this.indicatorOptions = [...this.innerIndex];
|
||||||
|
} else if (value == "special") {
|
||||||
|
// 专湖
|
||||||
|
this.sectionOptions = [...this.specialSection];
|
||||||
|
this.indicatorOptions = [...this.specialIndex];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 趋势图
|
||||||
|
drawTrend() {
|
||||||
|
lakeLibrary(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);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取内湖断面
|
||||||
|
getInnerList() {
|
||||||
|
getLakeDropdown().then((res) => {
|
||||||
|
this.innerSection = this.buildSectionSelect(res);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 获取专湖断面
|
||||||
|
getSpecialList() {
|
||||||
|
getSpecialLakeDropdown().then((res) => {
|
||||||
|
this.specialSection = this.buildSectionSelect(res);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 生成断面数据
|
||||||
|
buildSectionSelect(res) {
|
||||||
|
let palceOptions = {};
|
||||||
|
let newPlace = [];
|
||||||
|
res.data.data.forEach((item) => {
|
||||||
|
palceOptions[item.regionName] = item.regionName;
|
||||||
|
});
|
||||||
|
for (let i in palceOptions) {
|
||||||
|
newPlace.push({
|
||||||
|
label: palceOptions[i],
|
||||||
|
value: palceOptions[i],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.palceOptions = [...newPlace];
|
||||||
|
return res.data.data.map((item) => {
|
||||||
|
return {
|
||||||
|
label: item.sectionName,
|
||||||
|
value: item.sectionName,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
initChart() {
|
||||||
|
|
||||||
|
if (trendChart != null && trendChart != "" && trendChart != undefined) {
|
||||||
|
trendChart.dispose(); // 销毁
|
||||||
|
}
|
||||||
|
trendChart = echarts.init(document.getElementById("chartColumn"));
|
||||||
|
let option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
axisPointer: {
|
||||||
|
type: "cross",
|
||||||
|
crossStyle: {
|
||||||
|
color: "#999",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
feature: {
|
||||||
|
saveAsImage: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend:{show:true},
|
||||||
|
xAxis: this.buildxAxis(),
|
||||||
|
yAxis: {
|
||||||
|
type: "value",
|
||||||
|
max:200
|
||||||
|
},
|
||||||
|
series: this.buildSeries(),
|
||||||
|
};
|
||||||
|
console.log('option',option)
|
||||||
|
trendChart.setOption(option);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 生成x轴标签
|
||||||
|
buildxAxis(){
|
||||||
|
let xAxis = []
|
||||||
|
this.trendData.forEach(item=>{
|
||||||
|
xAxis.push(item.place)
|
||||||
|
})
|
||||||
|
return {
|
||||||
|
type: "category",
|
||||||
|
axisLabel: {
|
||||||
|
interval:0,
|
||||||
|
rotate:10
|
||||||
|
},
|
||||||
|
data: xAxis,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 生成y数值标签
|
||||||
|
buildyAxisData(){
|
||||||
|
let yAxisData = []
|
||||||
|
this.trendData.forEach(item=>{
|
||||||
|
yAxisData.push(item.value)
|
||||||
|
})
|
||||||
|
return yAxisData
|
||||||
|
},
|
||||||
|
// 生成营养度三根线
|
||||||
|
buildLine(){
|
||||||
|
return [
|
||||||
|
[
|
||||||
|
{
|
||||||
|
name: "中度富营养↓",
|
||||||
|
yAxis: 70,
|
||||||
|
xAxis: 0,
|
||||||
|
label: {
|
||||||
|
color:'red',
|
||||||
|
borderColor: "red",
|
||||||
|
},
|
||||||
|
lineStyle:{
|
||||||
|
color: "red",
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
yAxis: 70,
|
||||||
|
xAxis: this.buildxAxis().length-5 || 2,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
name: "轻度富营养↓",
|
||||||
|
yAxis: 60,
|
||||||
|
xAxis: 0,
|
||||||
|
label: {
|
||||||
|
color:'#fbfb00',
|
||||||
|
borderColor: "#fbfb00",
|
||||||
|
},
|
||||||
|
lineStyle:{
|
||||||
|
color: "#fbfb00",
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
yAxis: 60,
|
||||||
|
xAxis: this.buildxAxis().length-4 || 2,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
name: "中营养↓",
|
||||||
|
yAxis: 50,
|
||||||
|
xAxis: 0,
|
||||||
|
label: {
|
||||||
|
color:'#99ff00',
|
||||||
|
borderColor: "#99ff00",
|
||||||
|
},
|
||||||
|
lineStyle:{
|
||||||
|
color: "#99ff00",
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
yAxis: 50,
|
||||||
|
xAxis: this.buildxAxis().length-2,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
]
|
||||||
|
},
|
||||||
|
// 生成图表数据
|
||||||
|
buildSeries(){
|
||||||
|
let series = [
|
||||||
|
{
|
||||||
|
markLine: {
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
type: "line",
|
||||||
|
width: 3,
|
||||||
|
opacity: 0.9,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
padding: [1, 10],
|
||||||
|
lineHeight: 30,
|
||||||
|
show: true,
|
||||||
|
position: "end",
|
||||||
|
borderType: "dashed",
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
data: [...this.buildLine()],
|
||||||
|
symbol: ["none", "none"],
|
||||||
|
},
|
||||||
|
|
||||||
|
data: this.buildyAxisData(),
|
||||||
|
type: "bar", // line
|
||||||
|
},
|
||||||
|
]
|
||||||
|
return series
|
||||||
|
},
|
||||||
|
|
||||||
|
//生成柱状图
|
||||||
|
buildChart() {
|
||||||
|
trendChart = echarts.init(document.getElementById("chartColumn"));
|
||||||
|
let option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
axisPointer: {
|
||||||
|
type: "cross",
|
||||||
|
crossStyle: {
|
||||||
|
color: "#999",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
feature: {
|
||||||
|
saveAsImage: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show:true,
|
||||||
|
// orient: "vertical",
|
||||||
|
// x: "right", //可设定图例在左、右、居中
|
||||||
|
// y: "center", //可设定图例在上、下、居中
|
||||||
|
padding: [0, 50, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
|
||||||
|
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
axisLabel: {
|
||||||
|
interval:0,
|
||||||
|
rotate:10
|
||||||
|
},
|
||||||
|
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: "value",
|
||||||
|
},
|
||||||
|
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
// markLine: {
|
||||||
|
// data: [
|
||||||
|
// {
|
||||||
|
// type: "average",
|
||||||
|
// name: "平均值",
|
||||||
|
// lineStyle: {
|
||||||
|
// type: "dashed", // dotted,solid,dashed
|
||||||
|
// color: "blue",
|
||||||
|
// width: 3,
|
||||||
|
// opacity: 0.9,
|
||||||
|
// },
|
||||||
|
// label: {
|
||||||
|
// borderColor: "blue",
|
||||||
|
// formatter: "平均值",
|
||||||
|
// },
|
||||||
|
// },{
|
||||||
|
// name: "标志",
|
||||||
|
// yAxis: 100,
|
||||||
|
// lineStyle: {
|
||||||
|
// type: "dashed", // dotted,solid,dashed
|
||||||
|
// color: "blue",
|
||||||
|
// width: 3,
|
||||||
|
// opacity: 0.9,
|
||||||
|
// },
|
||||||
|
// label: {
|
||||||
|
// color: "blue",
|
||||||
|
// formatter: "溶解氧Ⅱ类标准",
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// symbol: ["none", "none"],
|
||||||
|
// label: {
|
||||||
|
// show: true,
|
||||||
|
// position: "insideEndBottom",
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
|
||||||
|
markLine: {
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
type: "line",
|
||||||
|
width: 3,
|
||||||
|
opacity: 0.9,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
padding: [1, 10],
|
||||||
|
lineHeight: 30,
|
||||||
|
show: true,
|
||||||
|
position: "end",
|
||||||
|
borderType: "dashed",
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
[
|
||||||
|
{
|
||||||
|
name: "中度富营养↓",
|
||||||
|
yAxis: 180,
|
||||||
|
xAxis: 0,
|
||||||
|
label: {
|
||||||
|
color:'red',
|
||||||
|
borderColor: "red",
|
||||||
|
},
|
||||||
|
lineStyle:{
|
||||||
|
color: "red",
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
yAxis: 180,
|
||||||
|
xAxis: 3,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
name: "轻度富营养↓",
|
||||||
|
yAxis: 150,
|
||||||
|
xAxis: 0,
|
||||||
|
label: {
|
||||||
|
color:'#fbfb00',
|
||||||
|
borderColor: "#fbfb00",
|
||||||
|
},
|
||||||
|
lineStyle:{
|
||||||
|
color: "#fbfb00",
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
yAxis: 150,
|
||||||
|
xAxis: "Thu",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
name: "中营养↓",
|
||||||
|
yAxis: 100,
|
||||||
|
xAxis: 0,
|
||||||
|
label: {
|
||||||
|
color:'#99ff00',
|
||||||
|
borderColor: "#99ff00",
|
||||||
|
},
|
||||||
|
lineStyle:{
|
||||||
|
color: "#99ff00",
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
yAxis: 100,
|
||||||
|
xAxis: "Thu",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
],
|
||||||
|
symbol: ["none", "none"],
|
||||||
|
},
|
||||||
|
|
||||||
|
data: [120, 200, 150, 80, 70, 110, 130],
|
||||||
|
type: "bar", // line
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
// 堆叠
|
||||||
|
// series: [{
|
||||||
|
// name: '可用',
|
||||||
|
// type: 'bar', // 换成bar则是堆叠
|
||||||
|
// // stack:'使用情况', // 堆叠标识，无标识或者不相同则是柱状图对比
|
||||||
|
// data: [5, 20, 36, 10, 10, 20, 60],
|
||||||
|
// itemStyle:{
|
||||||
|
// normal:{color:"#FF8849"},
|
||||||
|
// }
|
||||||
|
// },{
|
||||||
|
// name: '不可用',
|
||||||
|
// type: 'bar', // 换成bar则是堆叠
|
||||||
|
// // stack:'使用情况', // 堆叠标识，无标识或者不相同则是柱状图对比
|
||||||
|
// data: [40, 22, 18, 35, 42, 40, 80],
|
||||||
|
// itemStyle:{
|
||||||
|
// normal:{color:"#3FBB49"},
|
||||||
|
// }
|
||||||
|
// }]
|
||||||
|
};
|
||||||
|
trendChart.setOption(option);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped lang="less">
|
||||||
|
.mb-20 {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user