湖库图表

src/views/water/lake/trend/index.vue

@@ -99,7 +99,7 @@
       </a-row>
     </a-form>
     <a-card :bordered="false">
-      <div id="chartColumn" style="width: 100%; height: 500px"></div>
+      <div id="chartColumn" style="width: 100%; height: 700px"></div>
     </a-card>
   </div>
 </template>
@@ -119,9 +119,11 @@ export default {
     return {
       queryParams: {
         yearList: [],
+        monthList: [],
+        lakeType:'',
         placeList: [],
         xco: "Xco_1", // 横坐标
-        ycoList: [],
+        yco:"",
         monitorIndexList: [], // 监测指标
       },
       trendData: [],
@@ -137,64 +139,64 @@ export default {
       innerSection: [], // 内湖断面
       specialSection: [], // 专湖断面
       innerIndex: [
-        { label: "pH值", value: "ph" },
+        { label: "pH值", value: "ph", limit:"6",color:"#209f53" },
-        { label: "透明度（cm）", value: "transparency" },
+        // { label: "透明度（cm）", value: "transparency", limit:"1",color:"#209f53" },
-        { label: "溶解氧饱和度（﹪）", value: "dissolvedOxygenSaturation" },
+        // { label: "溶解氧饱和度（﹪）", value: "dissolvedOxygenSaturation", limit:"6",color:"#20749f" },
-        { label: "溶解氧", value: "dissolvedOxygen" },
+        { label: "溶解氧", value: "dissolvedOxygen", limit:"6",color:"#20749f" },
-        { label: "高锰酸盐指数", value: "permanganateIndex" },
+        { label: "高锰酸盐指数", value: "permanganateIndex", limit:"4",color:"#7bbe3a" },
-        { label: "五日生化需氧量", value: "fiveDayBod" },
+        { label: "五日生化需氧量", value: "fiveDayBod", limit:"3",color:"#ad3abe" },
-        { label: "总氮 ", value: "totalNitrogen" },
+        { label: "总氮 ", value: "totalNitrogen", limit:"0.5",color:"#a4a3f1" },
-        { label: "氨氮", value: "ammonia" },
+        { label: "氨氮", value: "ammonia", limit:"0.5",color:"#3d3abe" },
-        { label: "挥发酚", value: "volatilePhenol" },
+        { label: "挥发酚", value: "volatilePhenol", limit:"0.002",color:"#f1eca3" },
-        { label: "砷(mg/L)", value: "as" },
+        { label: "砷(mg/L)", value: "as", limit:"0.05",color:"#bbb443" },
-        { label: "汞 (mg/L)", value: "hg" },
+        { label: "汞 (mg/L)", value: "hg", limit:"0.00005",color:"#62bb43" },
-        { label: "六价铬 (mg/L)", value: "cr6" },
+        { label: "六价铬 (mg/L)", value: "cr6", limit:"0.05",color:"#3cd560" },
-        { label: "铅 (mg/L)", value: "pb" },
+        { label: "铅 (mg/L)", value: "pb", limit:"0.01",color:"#91b516" },
-        { label: "镉 (mg/L)", value: "cd" },
+        { label: "镉 (mg/L)", value: "cd", limit:"0.005",color:"#4ab516" },
-        { label: "总磷", value: "totalPhosphorus" },
+        { label: "总磷", value: "totalPhosphorus", limit:"0.1",color:"#62255a" },
-        { label: "石油类", value: "petro" },
+        { label: "石油类", value: "petro", limit:"0.05",color:"#8a4c82" },
-        { label: "粪大肠菌群（MPN/L）", value: "fecalColiforms" },
+        { label: "粪大肠菌群（MPN/L）", value: "fecalColiforms", limit:"2000",color:"#63258b" },
-        { label: "化学需氧量", value: "cod" },
+        { label: "化学需氧量", value: "cod", limit:"15",color:"#25388b" },
-        { label: "叶绿素a (mg/m3)", value: "chlA" },
+        // { label: "叶绿素a (mg/m3)", value: "chlA", limit:"1",color:"#209f53" },
-        { label: "阴离子表面活性剂(mg/L)", value: "anSaa" },
+        { label: "阴离子表面活性剂(mg/L)", value: "anSaa", limit:"0.2",color:"#258b80" },
-        { label: "硫化物(mg/L) ", value: "s" },
+        { label: "硫化物(mg/L) ", value: "s", limit:"0.1",color:"#27aa49" },
-        { label: "氧化还原电位（mV）", value: "oxidationReductionPotential" },
+        // { label: "氧化还原电位（mV）", value: "oxidationReductionPotential", limit:"1",color:"#209f53" },
       ], // 内湖监测指标
       specialIndex: [
-        { label: "浊度(NTU)", value: "turbidity" },
+        // { label: "浊度(NTU)", value: "turbidity", limit:"1",color:"#209f53" },
-        { label: "水温(℃)", value: "wTemp" },
+        { label: "水温(℃)", value: "wTemp", limit:"2",color:"#209f53" },
-        { label: "水位(m)", value: "wd" },
+        { label: "水位(m)", value: "wd", limit:"1",color:"#209f53" },
-        { label: "pH值", value: "ph" },
+        { label: "pH值", value: "ph", limit:"1",color:"#209f53" },
-        { label: "电导率(ms/m)", value: "wCond" },
+        { label: "电导率(ms/m)", value: "wCond", limit:"1",color:"#209f53" },
-        { label: "透明度（cm）", value: "transp" },
+        { label: "透明度（cm）", value: "transp", limit:"1",color:"#209f53" },
-        { label: "溶解氧 (mg/L)", value: "dissolvedOxygen" },
+        { label: "溶解氧 (mg/L)", value: "dissolvedOxygen", limit:"1",color:"#209f53" },
-        { label: "高锰酸盐指数 (mg/L)", value: "codmn" },
+        { label: "高锰酸盐指数 (mg/L)", value: "codmn", limit:"1",color:"#209f53" },
-        { label: "五日生化需氧量", value: "bod5" },
+        { label: "五日生化需氧量", value: "bod5", limit:"1",color:"#209f53" },
-        { label: "氨氮 (mg/L)", value: "nh4N" },
+        { label: "氨氮 (mg/L)", value: "nh4N", limit:"1",color:"#209f53" },
-        { label: "石油类 (mg/L)", value: "oils" },
+        { label: "石油类 (mg/L)", value: "oils", limit:"1",color:"#209f53" },
-        { label: "总氮 (mg/L)", value: "nTotal" },
+        { label: "总氮 (mg/L)", value: "nTotal", limit:"1",color:"#209f53" },
-        { label: "总磷 (mg/L)", value: "pTotal" },
+        { label: "总磷 (mg/L)", value: "pTotal", limit:"1",color:"#209f53" },
-        { label: "叶绿素 (mg/L)", value: "chlA" },
+        { label: "叶绿素 (mg/L)", value: "chlA", limit:"1",color:"#209f53" },
-        { label: "挥发酚 (mg/L)", value: "vPhen" },
+        { label: "挥发酚 (mg/L)", value: "vPhen", limit:"1",color:"#209f53" },
-        { label: "汞 (mg/L)", value: "wHg" },
+        { label: "汞 (mg/L)", value: "wHg", limit:"1",color:"#209f53" },
-        { label: "铅 (mg/L)", value: "wPb" },
+        { label: "铅 (mg/L)", value: "wPb", limit:"1",color:"#209f53" },
-        { label: "化学需氧量 (mg/L)", value: "codcr" },
+        { label: "化学需氧量 (mg/L)", value: "codcr", limit:"1",color:"#209f53" },
-        { label: "铜 (mg/L)", value: "wCu" },
+        { label: "铜 (mg/L)", value: "wCu", limit:"1",color:"#209f53" },
-        { label: "锌 (mg/L)", value: "wZn" },
+        { label: "锌 (mg/L)", value: "wZn", limit:"1",color:"#209f53" },
-        { label: "氟化物 (mg/L)", value: "f" },
+        { label: "氟化物 (mg/L)", value: "f", limit:"1",color:"#209f53" },
-        { label: "硒 (mg/L)", value: "se" },
+        { label: "硒 (mg/L)", value: "se", limit:"1",color:"#209f53" },
-        { label: "砷 (mg/L)", value: "as" },
+        { label: "砷 (mg/L)", value: "as", limit:"1",color:"#209f53" },
-        { label: "镉 (mg/L)", value: "cd" },
+        { label: "镉 (mg/L)", value: "cd", limit:"1",color:"#209f53" },
-        { label: "六价铬 (mg/L)", value: "cr6" },
+        { label: "六价铬 (mg/L)", value: "cr6", limit:"1",color:"#209f53" },
-        { label: "氰化物 (mg/L)", value: "cnTotal" },
+        { label: "氰化物 (mg/L)", value: "cnTotal", limit:"1",color:"#209f53" },
-        { label: "阴离子表面活性剂 (mg/L)", value: "anSaa" },
+        { label: "阴离子表面活性剂 (mg/L)", value: "anSaa", limit:"1",color:"#209f53" },
-        { label: "硫化物 (mg/L)", value: "s" },
+        { label: "硫化物 (mg/L)", value: "s", limit:"1",color:"#209f53" },
-        { label: "粪大肠菌群 (mg/L)", value: "coloOrg" },
+        { label: "粪大肠菌群 (mg/L)", value: "coloOrg", limit:"1",color:"#209f53" },
-        { label: "硫酸盐 (mg/L)", value: "so4" },
+        { label: "硫酸盐 (mg/L)", value: "so4", limit:"1",color:"#209f53" },
-        { label: "氯化物 (mg/L)", value: "cl" },
+        { label: "氯化物 (mg/L)", value: "cl", limit:"1",color:"#209f53" },
-        { label: "硝酸盐 (mg/L)", value: "no3N" },
+        { label: "硝酸盐 (mg/L)", value: "no3N", limit:"1",color:"#209f53" },
-        { label: "铁 (mg/L)", value: "wFe" },
+        { label: "铁 (mg/L)", value: "wFe", limit:"1",color:"#209f53" },
-        { label: "锰 (mg/L)", value: "wMn" },
+        { label: "锰 (mg/L)", value: "wMn", limit:"1",color:"#209f53" },
       ], //专湖监测指标
 
       monthOptions: [
@@ -235,6 +237,7 @@ export default {
       // 图表生成数据
       xAxis: {},
       series: {},
+      yAxisMax:1, //Y轴最大值
     };
   },
   mounted() {
@@ -323,16 +326,40 @@ export default {
     },
 
     initChart() {
+        this.yAxisMax = 1;
       // 生成x轴
       this.buildxAxis();
       // 生成series
       this.buildSeries();
 
+        
       if (trendChart != null && trendChart != "" && trendChart != undefined) {
         trendChart.dispose(); // 销毁
       }
       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
+        // }
+
+
       let option = {
+          title:{
+              text:text,
+               textAlign:'center'
+          },
         tooltip: {
           trigger: "axis",
           axisPointer: {
@@ -358,8 +385,10 @@ export default {
         xAxis: this.xAxis,
         yAxis: {
           type: "value",
-          max: 80,
+          max: this.yAxisMax,
+          name: this.queryParams.yco == 'Yco_1' ? '单位：mg/L' : ''
         },
+
         series: this.series,
       };
       trendChart.setOption(option);
@@ -376,21 +405,29 @@ export default {
  * 
  */
 
+    // 生成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) => {
-          xAxis.push(item.place);
+            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 = item.year + (item.month || "");
+          let x = this.buildYearMonth(item);
           if (xAxis.indexOf(x) < 0) xAxis.push(x);
         });
       }
@@ -398,7 +435,7 @@ export default {
       if (xAxis.join("").length > 50) {
         rotate = 10;
       }
-
+      console.log('xAxis',xAxis)
       this.xAxis = {
         type: "category",
         axisLabel: {
@@ -415,6 +452,7 @@ export default {
       let yAxisData = [];
       this.trendData.forEach((item) => {
         yAxisData.push(item.value);
+        this.buildYMax(item.value);
       });
       return yAxisData;
     },
@@ -423,9 +461,10 @@ export default {
       let lines = [];
 
       let xMax = this.xAxis.data.length;
-
+// 三根营养线,在纵坐标选择综合营养指数时显示
-      // 三根营养线
+    if (this.queryParams.yco == "Yco_2"){
-      const three = [
+        this.buildYMax(72);
+        lines = [
         [
           {
             name: "中度富营养↓",
@@ -479,100 +518,207 @@ export default {
             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: {
-                    color: "blue",
-                    formatter: "溶解氧Ⅱ类标准",
-                  },
-                }
-          )
-        })
-        lines = [...singleLine]
-         
-      }else if (this.queryParams.yco == "Yco_2"){
-        lines = [...three];
       }
       
  
+  // 在纵坐标选择浓度，那显示指标均线
+    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);
+                        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){
+        return  obj.year + (obj.month || "");
+    },
+
+
     // 生成图表数据
     buildSeries() {
       let series = [];
       
 
       let charType = 'bar'
-      // 如果选择了监测指标，那就是折线图
+        // 如果Y坐标选择了浓度，那就是折线图，选择综合指标是柱状图，选择水质类别那就是堆叠
-      if(Array.isArray(this.queryParams.monitorIndexList) && this.queryParams.monitorIndexList.length){
+        if(this.queryParams.yco == 'Yco_1'){
-        charType = 'line'
+            charType = 'line'
-      }
+        }
+    //   // 如果选择了监测指标，那就是折线图
+    //   if(Array.isArray(this.queryParams.monitorIndexList) && this.queryParams.monitorIndexList.length){
+    //     charType = 'line'
+    //   }
+
 
       // x坐标是断面
       if (this.queryParams.xco == "Xco_3") {
-        series = [
+       
-          {
+        // 如果是断面，则用年月来分组数据
-            markLine: {
+        let seriesItemName = this.xAxis.data; 
-              lineStyle: {
+        let group = [];
-                normal: {
+
-                  type: "line",
+        this.trendData.forEach((item) => {
-                  width: 3,
+            if (group.indexOf(this.buildYearMonth(item)) < 0) {
-                  opacity: 0.9,
+                group.push(this.buildYearMonth(item));
-                },
+            }
-              },
+        });
-              label: {
+
-                padding: [1, 10],
+        group.forEach(item=>{
-                lineHeight: 30,
+            let itemData = [];
-                show: true,
+            seriesItemName.forEach((data,index)=>{
-                position: "end",
+                itemData[index] = 0
-                borderType: "dashed",
+                this.trendData.forEach((single) => {
-                borderWidth: 1,
+                    if (data == single.place && item == this.buildYearMonth(single)) {
-              },
+                        itemData[index] = single.value;
-              data: [...this.buildLine()],
+                        this.buildYMax(single.value);
-              symbol: ["none", "none"],
+                    }
-            },
+                });
+            })
+
+        let single = {
+            name: item,
+            type: charType,
             label: {
               // 图形上的文本标签
               show: true,
               position: "top", // 相对位置
             },
-            data: this.buildyAxisData(),
+            data: [...itemData],
-            type: charType, // line
+          };
-          },
+           // 纵坐标 水质类别，那就堆叠
-        ];
+        if(this.queryParams.yco=='Yco_3'){
+            single.stack = item
+            }
+
+          series.push(single);
+        })
       }
-      // x左边为年度、年月,只选一个断面
+
+      // 一个断面多个指标
+    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(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);
+            }
+            });
+        }
+
+        group.forEach(item=>{
+            let itemData = [];
+            seriesItemName.forEach((data,index)=>{
+                itemData[index] = 0
+                this.trendData.forEach((single) => {
+
+                    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: "top", // 相对位置
+            },
+            data: [...itemData],
+          };
+           // 纵坐标 水质类别，那就堆叠
+        if(this.queryParams.yco=='Yco_3'){
+            single.stack = item
+            }
+
+          series.push(single);
+        })
+
+    }
+
+
+
+
+
+/*
+      // x左边为年度、年月
       if (this.queryParams.xco == "Xco_1" || this.queryParams.xco == "Xco_2") {
         let seriesItemName = []; //一组柱状图中单个的名字
-        this.trendData.forEach((item) => {
+        let gropu = [];
-          if (seriesItemName.indexOf(item.place) < 0) {
+
-            seriesItemName.push(item.place);
+        if(singleType){
-          }
+            this.trendData.forEach((item) => {
-        });
+            if (seriesItemName.indexOf(item.indexName) < 0) {
+                seriesItemName.push(item.indexName);
+            }
+            });
+        }else{
+            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) {
+              let name = '';
-              itemData.push(single.value);
+                if(singleType){
-            }
+                    name = single.indexName
+                }else{
+                    name = single.place
+                }
+
+                if (item == name) {
+                    itemData.push(single.value);
+                    this.buildYMax(single.value);
+                }
+            
           });
           // 补零
           let len = this.xAxis.data.length - itemData.length;
@@ -591,10 +737,17 @@ export default {
             data: [...itemData],
           };
 
+        // 纵坐标 水质类别，那就堆叠
+        if(this.queryParams.yco=='Yco_3'){
+        single.stack = item
+        }
+
           series.push(single);
         });
+      }
+      */
 
-        series[0].markLine = {
+      series[0].markLine = {
           lineStyle: {
             normal: {
               type: "line",
@@ -613,72 +766,21 @@ export default {
           data: [...this.buildLine()],
           symbol: ["none", "none"],
         };
-
+        // 对指标的名字转成中文
-        // this.trendData.forEach(item=>{
+        if(singleType){
-        //   let singleData = [];
+            series = series.map(item=>{
-
+                let name = '';
-        //   this.xAxis.data.forEach(data=>{
+                this.indicatorOptions.forEach(single=>{
-        //     // 循环总表数据，根据年月拼接的X轴合并数组
+                    if(single.value == item.name){
-        //      if(data==(item.year + (item.month || ''))){
+                        name = single.label
-        //        singleData.push(item.value)
+                    }
-        //      }
+                })
-        //   })
+                return {
-
+                    ...item,
-        //   let single = {
+                    name:name
-        //         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;