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

趋势图柱状图

Browse Source
This commit is contained in:
庞东林
2022-01-14 18:06:56 +08:00
parent c27071780d
commit 7bb3f32af0
1 changed files with 422 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

604
src/views/water/lake/trend/index.vue
View File

@@ -107,20 +107,18 @@
<script> <script>
import * as echarts from "echarts"; import * as echarts from "echarts";
let trendChart; let trendChart;
import { getColumnOptions } from "@/api/ecology/noise/function-sound"; // import { getColumnOptions } from "@/api/ecology/noise/function-sound";
import { getSpecialLakeDropdown } from "@/api/ecology/new-lake"; import { getSpecialLakeDropdown } from "@/api/ecology/new-lake";
import { getLakeDropdown } from "@/api/ecology/new-lake"; import { getLakeDropdown } from "@/api/ecology/new-lake";
import { import { lakeLibrary } from "@/api/ecology/new-lake";
lakeLibrary,
} from "@/api/ecology/new-lake";
export default { export default {
components: {}, components: {},
data() { data() {
return { return {
queryParams: { queryParams: {
yearList: ["2020", "2021"], yearList: [],
placeList: [], placeList: [],
xco: "Xco_1", // 横坐标 xco: "Xco_1", // 横坐标
ycoList: [], ycoList: [],
@@ -233,24 +231,28 @@ export default {
value: "Yco_3", value: "Yco_3",
}, },
], ],
// 图表生成数据
xAxis: {},
series: {},
}; };
}, },
mounted() { mounted() {
let yy = new Date().getFullYear();
console.log("year", yy);
this.loadOptionData(); this.loadOptionData();
this.buildChart(); // this.buildChart();
}, },
methods: { methods: {
// 下拉列表 // 下拉列表
loadOptionData() { loadOptionData() {
getColumnOptions("monitor_year").then((res) => { let yy = new Date().getFullYear();
this.yearOptions = res.data.data.map((item) => {
return {
label: item,
value: item,
};
});
});
for (let i = 1; i <= 12; i++) { for (let i = 1; i <= 12; i++) {
this.yearOptions.push({
label: yy - i,
value: yy - i,
});
this.monthOptions.push({ label: i + "月", value: i }); this.monthOptions.push({ label: i + "月", value: i });
} }
// 内湖 // 内湖
@@ -259,7 +261,6 @@ export default {
this.getSpecialList(); this.getSpecialList();
}, },
handleLakeTypeChange(value) { handleLakeTypeChange(value) {
this.queryParams.placeList = []; this.queryParams.placeList = [];
this.queryParams.monitorIndexList = []; this.queryParams.monitorIndexList = [];
@@ -278,10 +279,10 @@ export default {
lakeLibrary(this.queryParams).then((res) => { lakeLibrary(this.queryParams).then((res) => {
console.log("res", res); console.log("res", res);
if (res.data.code == 0) { if (res.data.code == 0) {
this.trendData = res.data.data; this.trendData = res.data.data || [];
this.initChart(); this.initChart();
} else { } else {
console.log('res.data.msg',res.data.msg) console.log("res.data.msg", res.data.msg);
this.$message.error(res.data.msg); this.$message.error(res.data.msg);
} }
}); });
@@ -322,6 +323,10 @@ export default {
}, },
initChart() { initChart() {
// 生成x轴
this.buildxAxis();
// 生成series
this.buildSeries();
if (trendChart != null && trendChart != "" && trendChart != undefined) { if (trendChart != null && trendChart != "" && trendChart != undefined) {
trendChart.dispose(); // 销毁 trendChart.dispose(); // 销毁
@@ -344,103 +349,185 @@ export default {
}, },
}, },
}, },
legend:{show:true}, legend: {
xAxis: this.buildxAxis(), show: true,
x: "center", //可设定图例在左、右、居中
y: "bottom", //可设定图例在上、下、居中
padding: [0, 50, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
},
xAxis: this.xAxis,
yAxis: { yAxis: {
type: "value", type: "value",
max:200 max: 80,
}, },
series: this.buildSeries(), series: this.series,
}; };
console.log('option',option)
trendChart.setOption(option); trendChart.setOption(option);
}, },
/**
*
1.当断面名称多选，横坐标断面，纵坐标是营养指数---- x:断面名称，3跟营养指数线，
2.当年度多选，断面单选，横坐标年度，纵坐标是营养指数----3跟营养指数线，x:年度
*
*
*/
// 生成x轴标签 // 生成x轴标签
buildxAxis(){ buildxAxis() {
let xAxis = [] let xAxis = [];
this.trendData.forEach(item=>{
xAxis.push(item.place) // x坐标是断面
}) if (this.queryParams.xco == "Xco_3") {
return { this.trendData.forEach((item) => {
type: "category", xAxis.push(item.place);
axisLabel: { });
interval:0,
rotate:10
},
data: xAxis,
} }
// 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 = item.year + (item.month || "");
if (xAxis.indexOf(x) < 0) xAxis.push(x);
});
}
let rotate = 0;
if (xAxis.join("").length > 50) {
rotate = 10;
}
this.xAxis = {
type: "category",
axisLabel: {
interval: 0,
rotate: rotate,
},
// boundaryGap: false, // 第一个数据点距离y轴距离
data: xAxis,
};
}, },
// 生成y数值标签 // 生成y数值标签
buildyAxisData(){ buildyAxisData() {
let yAxisData = [] let yAxisData = [];
this.trendData.forEach(item=>{ this.trendData.forEach((item) => {
yAxisData.push(item.value) yAxisData.push(item.value);
}) });
return yAxisData return yAxisData;
}, },
// 生成营养度三根线 // 生成营养度三根线
buildLine(){ buildLine() {
return [ let lines = [];
[
{ let xMax = this.xAxis.data.length;
name: "中度富营养↓",
yAxis: 70, // 三根营养线
xAxis: 0, const three = [
label: { [
color:'red', {
borderColor: "red", name: "中度富营养↓",
}, yAxis: 70,
lineStyle:{ xAxis: 0,
color: "red", label: {
} color: "red",
borderColor: "red",
},
lineStyle: {
color: "red",
},
},
{
yAxis: 70,
xAxis: xMax - 3 < 1 ? 1 : xMax - 3,
},
],
[
{
name: "轻度富营养↓",
yAxis: 60,
xAxis: 0,
label: {
color: "#fbfb00",
borderColor: "#fbfb00",
},
lineStyle: {
color: "#fbfb00",
},
},
{
yAxis: 60,
xAxis: xMax - 2 < 1 ? 1 : xMax - 2,
},
],
[
{
name: "中营养↓",
yAxis: 50,
xAxis: 0,
label: {
color: "#99ff00",
borderColor: "#99ff00",
},
lineStyle: {
color: "#99ff00",
},
},
{
yAxis: 50,
xAxis: xMax - 1 < 1 ? 1 : xMax - 1,
},
],
];
// 如果选择监测指标，那显示指标均线
if(Array.isArray(this.queryParams.monitorIndexList) && this.queryParams.monitorIndexList.length){
let singleLine = []
this.queryParams.monitorIndexList.forEach(item=>{
singleLine.push(
{
name: item,
yAxis: 100,
lineStyle: {
type: "dashed", // dotted,solid,dashed
color: "blue",
width: 3,
opacity: 0.9,
}, },
{ label: {
yAxis: 70, color: "blue",
xAxis: this.buildxAxis().length-5 || 2, formatter: "溶解氧Ⅱ类标准",
}, },
], }
[ )
{ })
name: "轻度富营养↓", lines = [...singleLine]
yAxis: 60,
xAxis: 0, }else if (this.queryParams.yco == "Yco_2"){
label: { lines = [...three];
color:'#fbfb00', }
borderColor: "#fbfb00",
},
lineStyle:{
color: "#fbfb00", return lines;
}
},
{
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(){ buildSeries() {
let series = [ let series = [];
let charType = 'bar'
// 如果选择了监测指标，那就是折线图
if(Array.isArray(this.queryParams.monitorIndexList) && this.queryParams.monitorIndexList.length){
charType = 'line'
}
// x坐标是断面
if (this.queryParams.xco == "Xco_3") {
series = [
{ {
markLine: { markLine: {
lineStyle: { lineStyle: {
@@ -461,12 +548,140 @@ export default {
data: [...this.buildLine()], data: [...this.buildLine()],
symbol: ["none", "none"], symbol: ["none", "none"],
}, },
label: {
// 图形上的文本标签
show: true,
position: "top", // 相对位置
},
data: this.buildyAxisData(), data: this.buildyAxisData(),
type: "bar", // line type: charType, // line
}, },
] ];
return series }
// x左边为年度、年月,只选一个断面
if (this.queryParams.xco == "Xco_1" || this.queryParams.xco == "Xco_2") {
let seriesItemName = []; //一组柱状图中单个的名字
this.trendData.forEach((item) => {
if (seriesItemName.indexOf(item.place) < 0) {
seriesItemName.push(item.place);
}
});
seriesItemName.forEach((item) => {
let itemData = [];
this.trendData.forEach((single) => {
if (item == single.place) {
itemData.push(single.value);
}
});
// 补零
let len = this.xAxis.data.length - itemData.length;
for (let i = 0; i < len; i++) {
itemData.push(0);
}
let single = {
name: item,
type: charType,
label: {
// 图形上的文本标签
show: true,
position: "top", // 相对位置
},
data: [...itemData],
};
series.push(single);
});
series[0].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"],
};
// this.trendData.forEach(item=>{
// let singleData = [];
// this.xAxis.data.forEach(data=>{
// // 循环总表数据，根据年月拼接的X轴合并数组
// if(data==(item.year + (item.month || ''))){
// singleData.push(item.value)
// }
// })
// let single = {
// name: item.place,
// type: 'bar', // 换成bar则是堆叠
// // stack:'使用情况', // 堆叠标识，无标识或者不相同则是柱状图对比
// data: [...singleData],
// }
// series.push(single)
// })
}
// 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
// },
// ]
// series = [{
// name: '可用',
// type: 'bar', // 换成bar则是堆叠
// // stack:'使用情况', // 堆叠标识，无标识或者不相同则是柱状图对比
// data: [5],
// itemStyle:{
// normal:{color:"#FF8849"},
// }
// },{
// name: '不可用',
// type: 'bar', // 换成bar则是堆叠
// // stack:'使用情况', // 堆叠标识，无标识或者不相同则是柱状图对比
// data: [40],
// itemStyle:{
// normal:{color:"#3FBB49"},
// }
// }]
console.log("series", series);
this.series = series;
}, },
//生成柱状图 //生成柱状图
@@ -490,25 +705,24 @@ export default {
}, },
}, },
legend: { legend: {
show:true, show: true,
// orient: "vertical", // orient: "vertical",
// x: "right", //可设定图例在左、右、居中 x: "right", //可设定图例在左、右、居中
// y: "center", //可设定图例在上、下、居中 y: "bottom", //可设定图例在上、下、居中
padding: [0, 50, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离] padding: [0, 50, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
}, },
xAxis: { xAxis: {
type: "category", type: "category",
axisLabel: { axisLabel: {
interval:0, interval: 0,
rotate:10 rotate: 10,
}, },
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
}, },
yAxis: { yAxis: {
type: "value", type: "value",
}, },
series: [ series: [
{ {
// markLine: { // markLine: {
@@ -548,6 +762,81 @@ export default {
// }, // },
// }, // },
// 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"],
// },
markLine: { markLine: {
lineStyle: { lineStyle: {
normal: { normal: {
@@ -564,88 +853,39 @@ export default {
borderType: "dashed", borderType: "dashed",
borderWidth: 1, borderWidth: 1,
}, },
data: [ data: [...this.buildLine()],
[
{
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"], symbol: ["none", "none"],
}, },
name: "一组",
data: [120, 200, 150, 80, 70, 110, 130],
type: "bar", // line
},
{
name: "二组",
data: [120, 200, 150, 80, 70, 110, 130], data: [120, 200, 150, 80, 70, 110, 130],
type: "bar", // line type: "bar", // line
}, },
], ],
// 堆叠 // 堆叠
// series: [{ // series: [{
// name: '可用', // name: '可用',
// type: 'bar', // 换成bar则是堆叠 // type: 'bar', // 换成bar则是堆叠
// // stack:'使用情况', // 堆叠标识，无标识或者不相同则是柱状图对比 // // stack:'使用情况', // 堆叠标识，无标识或者不相同则是柱状图对比
// data: [5, 20, 36, 10, 10, 20, 60], // data: [5, 20, 36, 10, 10, 20, 60],
// itemStyle:{ // itemStyle:{
// normal:{color:"#FF8849"}, // normal:{color:"#FF8849"},
// } // }
// },{ // },{
// name: '不可用', // name: '不可用',
// type: 'bar', // 换成bar则是堆叠 // type: 'bar', // 换成bar则是堆叠
// // stack:'使用情况', // 堆叠标识，无标识或者不相同则是柱状图对比 // // stack:'使用情况', // 堆叠标识，无标识或者不相同则是柱状图对比
// data: [40, 22, 18, 35, 42, 40, 80], // data: [40, 22, 18, 35, 42, 40, 80],
// itemStyle:{ // itemStyle:{
// normal:{color:"#3FBB49"}, // normal:{color:"#3FBB49"},
// } // }
// }] // }]
}; };
trendChart.setOption(option); trendChart.setOption(option);
}, },