From 7bb3f32af0dce04af98a88de56f4bfd07411858c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BA=9E=E4=B8=9C=E6=9E=97?= <pande@gxai-data.cn>
Date: Fri, 14 Jan 2022 18:06:56 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B6=8B=E5=8A=BF=E5=9B=BE=E6=9F=B1=E7=8A=B6?=
 =?UTF-8?q?=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/water/lake/trend/index.vue | 604 +++++++++++++++++++--------
 1 file changed, 422 insertions(+), 182 deletions(-)

diff --git a/src/views/water/lake/trend/index.vue b/src/views/water/lake/trend/index.vue
index f5666ab..eb5de25 100644
--- a/src/views/water/lake/trend/index.vue
+++ b/src/views/water/lake/trend/index.vue
@@ -107,20 +107,18 @@
 <script>
 import * as echarts from "echarts";
 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 { getLakeDropdown } from "@/api/ecology/new-lake";
 
-import {
-  lakeLibrary,
-} from "@/api/ecology/new-lake";
+import { lakeLibrary } from "@/api/ecology/new-lake";
 export default {
   components: {},
   data() {
     return {
       queryParams: {
-        yearList: ["2020", "2021"],
+        yearList: [],
         placeList: [],
         xco: "Xco_1", // 横坐标
         ycoList: [],
@@ -233,24 +231,28 @@ export default {
           value: "Yco_3",
         },
       ],
+
+      // 图表生成数据
+      xAxis: {},
+      series: {},
     };
   },
   mounted() {
+    let yy = new Date().getFullYear();
+    console.log("year", yy);
+
     this.loadOptionData();
-    this.buildChart();
+    // this.buildChart();
   },
   methods: {
     // 下拉列表
     loadOptionData() {
-      getColumnOptions("monitor_year").then((res) => {
-        this.yearOptions = res.data.data.map((item) => {
-          return {
-            label: item,
-            value: item,
-          };
-        });
-      });
+      let yy = new Date().getFullYear();
       for (let i = 1; i <= 12; i++) {
+        this.yearOptions.push({
+          label: yy - i,
+          value: yy - i,
+        });
         this.monthOptions.push({ label: i + "月", value: i });
       }
       // 内湖
@@ -259,7 +261,6 @@ export default {
       this.getSpecialList();
     },
 
-
     handleLakeTypeChange(value) {
       this.queryParams.placeList = [];
       this.queryParams.monitorIndexList = [];
@@ -278,10 +279,10 @@ export default {
       lakeLibrary(this.queryParams).then((res) => {
         console.log("res", res);
         if (res.data.code == 0) {
-          this.trendData = res.data.data;
+          this.trendData = res.data.data || [];
           this.initChart();
         } else {
-          console.log('res.data.msg',res.data.msg)
+          console.log("res.data.msg", res.data.msg);
           this.$message.error(res.data.msg);
         }
       });
@@ -322,6 +323,10 @@ export default {
     },
 
     initChart() {
+      // 生成x轴
+      this.buildxAxis();
+      // 生成series
+      this.buildSeries();
 
       if (trendChart != null && trendChart != "" && trendChart != undefined) {
         trendChart.dispose(); // 销毁
@@ -344,103 +349,185 @@ export default {
             },
           },
         },
-        legend:{show:true},
-        xAxis: this.buildxAxis(),
+        legend: {
+          show: true,
+          x: "center", //可设定图例在左、右、居中
+          y: "bottom", //可设定图例在上、下、居中
+          padding: [0, 50, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
+        },
+        xAxis: this.xAxis,
         yAxis: {
           type: "value",
-          max:200
+          max: 80,
         },
-        series: this.buildSeries(),
+        series: this.series,
       };
-    console.log('option',option)
       trendChart.setOption(option);
     },
 
+    /**
+ * 
+
+1.当断面名称多选，横坐标断面，纵坐标是营养指数---- x:断面名称，3跟营养指数线，
+2.当年度多选，断面单选，横坐标年度，纵坐标是营养指数----3跟营养指数线，x:年度
+
+
+ * 
+ * 
+ */
+
     // 生成x轴标签
-    buildxAxis(){
-      let xAxis = []
-      this.trendData.forEach(item=>{
-        xAxis.push(item.place)
-      })
-      return {
-          type: "category",
-          axisLabel: {
-            interval:0,
-            rotate:10
-          },
-          data: xAxis,
+    buildxAxis() {
+      let xAxis = [];
+
+      // x坐标是断面
+      if (this.queryParams.xco == "Xco_3") {
+        this.trendData.forEach((item) => {
+          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 = 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数值标签
-    buildyAxisData(){
-      let yAxisData = []
-      this.trendData.forEach(item=>{
-        yAxisData.push(item.value)
-      })
-      return yAxisData
+    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",
-                    }
+    buildLine() {
+      let lines = [];
+
+      let xMax = this.xAxis.data.length;
+
+      // 三根营养线
+      const three = [
+        [
+          {
+            name: "中度富营养↓",
+            yAxis: 70,
+            xAxis: 0,
+            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,
                   },
-                  {
-                    yAxis: 70,
-                    xAxis: this.buildxAxis().length-5 || 2,
+                  label: {
+                    color: "blue",
+                    formatter: "溶解氧Ⅱ类标准",
                   },
-                ],
-                [
-                  {
-                    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,
-                  },
-                ],
-              ]
+                }
+          )
+        })
+        lines = [...singleLine]
+         
+      }else if (this.queryParams.yco == "Yco_2"){
+        lines = [...three];
+      }
+
+
+
+      return lines;
     },
     // 生成图表数据
-    buildSeries(){
-      let series = [
+    buildSeries() {
+      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: {
               lineStyle: {
@@ -461,12 +548,140 @@ export default {
               data: [...this.buildLine()],
               symbol: ["none", "none"],
             },
-
+            label: {
+              // 图形上的文本标签
+              show: true,
+              position: "top", // 相对位置
+            },
             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: {
-          show:true,
+          show: true,
           // orient: "vertical",
-          // x: "right", //可设定图例在左、右、居中
-          // y: "center", //可设定图例在上、下、居中
+          x: "right", //可设定图例在左、右、居中
+          y: "bottom", //可设定图例在上、下、居中
           padding: [0, 50, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
-
         },
         xAxis: {
           type: "category",
           axisLabel: {
-            interval:0,
-            rotate:10
+            interval: 0,
+            rotate: 10,
           },
           data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
         },
         yAxis: {
           type: "value",
         },
-        
+
         series: [
           {
             // 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: {
               lineStyle: {
                 normal: {
@@ -564,88 +853,39 @@ export default {
                 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",
-                  },
-                ],
-              ],
+              data: [...this.buildLine()],
               symbol: ["none", "none"],
             },
 
+            name: "一组",
+            data: [120, 200, 150, 80, 70, 110, 130],
+            type: "bar", // line
+          },
+          {
+            name: "二组",
             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"},
-          //       }
-          //   }]
+        // 堆叠
+        // 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);
     },