湖库趋势图

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: 700px"></div>
+      <div id="chartColumn" style="width: 100%; height: 700px;"><div class="empty">暂无数据</div></div>
     </a-card>
   </div>
 </template>
@@ -139,8 +139,8 @@ export default {
       innerSection: [], // 内湖断面
       specialSection: [], // 专湖断面
       innerIndex: [
-        { label: "pH值", value: "ph", limit:"6",color:"#209f53" },
+        { label: "pH值", value: "ph", limit:"9",color:"#209f53" },
-        // { label: "透明度（cm）", value: "transparency", limit:"1",color:"#209f53" },
+        { label: "透明度（cm）", value: "transparency", limit:"0.01",color:"#209f53" },
         // { label: "溶解氧饱和度（﹪）", value: "dissolvedOxygenSaturation", limit:"6",color:"#20749f" },
         { label: "溶解氧", value: "dissolvedOxygen", limit:"6",color:"#20749f" },
         { label: "高锰酸盐指数", value: "permanganateIndex", limit:"4",color:"#7bbe3a" },
@@ -153,11 +153,11 @@ export default {
         { label: "六价铬 (mg/L)", value: "cr6", limit:"0.05",color:"#3cd560" },
         { label: "铅 (mg/L)", value: "pb", limit:"0.01",color:"#91b516" },
         { label: "镉 (mg/L)", value: "cd", limit:"0.005",color:"#4ab516" },
-        { label: "总磷", value: "totalPhosphorus", limit:"0.1",color:"#62255a" },
+        { label: "总磷", value: "totalPhosphorus", limit:"0.025",color:"#62255a" },
         { label: "石油类", value: "petro", limit:"0.05",color:"#8a4c82" },
         { label: "粪大肠菌群（MPN/L）", value: "fecalColiforms", limit:"2000",color:"#63258b" },
         { label: "化学需氧量", value: "cod", limit:"15",color:"#25388b" },
-        // { label: "叶绿素a (mg/m3)", value: "chlA", limit:"1",color:"#209f53" },
+        // { label: "叶绿素a (mg/m3)", value: "chlA", limit:"0",color:"#209f53" },
         { label: "阴离子表面活性剂(mg/L)", value: "anSaa", limit:"0.2",color:"#258b80" },
         { label: "硫化物(mg/L) ", value: "s", limit:"0.1",color:"#27aa49" },
         // { label: "氧化还原电位（mV）", value: "oxidationReductionPotential", limit:"1",color:"#209f53" },
@@ -165,45 +165,45 @@ export default {
       specialIndex: [
         // { label: "浊度(NTU)", value: "turbidity", limit:"1",color:"#209f53" },
         { label: "水温(℃)", value: "wTemp", limit:"2",color:"#209f53" },
-        { label: "水位(m)", value: "wd", limit:"1",color:"#209f53" },
+        // { label: "水位(m)", value: "wd", limit:"1",color:"#209f53" },
-        { label: "pH值", value: "ph", limit:"1",color:"#209f53" },
+        { label: "pH值", value: "ph", limit:"9",color:"#209f53" },
-        { label: "电导率(ms/m)", value: "wCond", limit:"1",color:"#209f53" },
+        // { label: "电导率(ms/m)", value: "wCond", limit:"1",color:"#209f53" },
-        { label: "透明度（cm）", value: "transp", limit:"1",color:"#209f53" },
+        { label: "透明度（cm）", value: "transp", limit:"0.01",color:"#209f53" },
-        { label: "溶解氧 (mg/L)", value: "dissolvedOxygen", limit:"1",color:"#209f53" },
+        { label: "溶解氧 (mg/L)", value: "dissolvedOxygen", limit:"6",color:"#209f53" },
-        { label: "高锰酸盐指数 (mg/L)", value: "codmn", limit:"1",color:"#209f53" },
+        { label: "高锰酸盐指数 (mg/L)", value: "codmn", limit:"4",color:"#209f53" },
-        { label: "五日生化需氧量", value: "bod5", limit:"1",color:"#209f53" },
+        { label: "五日生化需氧量", value: "bod5", limit:"3",color:"#209f53" },
-        { label: "氨氮 (mg/L)", value: "nh4N", limit:"1",color:"#209f53" },
+        { label: "氨氮 (mg/L)", value: "nh4N", limit:"0.5",color:"#209f53" },
-        { label: "石油类 (mg/L)", value: "oils", limit:"1",color:"#209f53" },
+        { label: "石油类 (mg/L)", value: "oils", limit:"0.05",color:"#209f53" },
-        { label: "总氮 (mg/L)", value: "nTotal", limit:"1",color:"#209f53" },
+        { label: "总氮 (mg/L)", value: "nTotal", limit:"0.5",color:"#209f53" },
-        { label: "总磷 (mg/L)", value: "pTotal", limit:"1",color:"#209f53" },
+        { label: "总磷 (mg/L)", value: "pTotal", limit:"0.025",color:"#209f53" },
-        { label: "叶绿素 (mg/L)", value: "chlA", limit:"1",color:"#209f53" },
+        // { label: "叶绿素 (mg/L)", value: "chlA", limit:"0",color:"#209f53" },
-        { label: "挥发酚 (mg/L)", value: "vPhen", limit:"1",color:"#209f53" },
+        { label: "挥发酚 (mg/L)", value: "vPhen", limit:"0.002",color:"#209f53" },
-        { label: "汞 (mg/L)", value: "wHg", limit:"1",color:"#209f53" },
+        { label: "汞 (mg/L)", value: "wHg", limit:"0.00005",color:"#209f53" },
-        { label: "铅 (mg/L)", value: "wPb", limit:"1",color:"#209f53" },
+        { label: "铅 (mg/L)", value: "wPb", limit:"0.01",color:"#209f53" },
-        { label: "化学需氧量 (mg/L)", value: "codcr", limit:"1",color:"#209f53" },
+        { label: "化学需氧量 (mg/L)", value: "codcr", limit:"15",color:"#209f53" },
         { label: "铜 (mg/L)", value: "wCu", limit:"1",color:"#209f53" },
         { label: "锌 (mg/L)", value: "wZn", limit:"1",color:"#209f53" },
         { label: "氟化物 (mg/L)", value: "f", limit:"1",color:"#209f53" },
-        { label: "硒 (mg/L)", value: "se", limit:"1",color:"#209f53" },
+        { label: "硒 (mg/L)", value: "se", limit:"0.01",color:"#209f53" },
-        { label: "砷 (mg/L)", value: "as", limit:"1",color:"#209f53" },
+        { label: "砷 (mg/L)", value: "as", limit:"0.05",color:"#209f53" },
-        { label: "镉 (mg/L)", value: "cd", limit:"1",color:"#209f53" },
+        { label: "镉 (mg/L)", value: "cd", limit:"0.005",color:"#209f53" },
-        { label: "六价铬 (mg/L)", value: "cr6", limit:"1",color:"#209f53" },
+        { label: "六价铬 (mg/L)", value: "cr6", limit:"0.05",color:"#209f53" },
-        { label: "氰化物 (mg/L)", value: "cnTotal", limit:"1",color:"#209f53" },
+        { label: "氰化物 (mg/L)", value: "cnTotal", limit:"0.05",color:"#209f53" },
-        { label: "阴离子表面活性剂 (mg/L)", value: "anSaa", limit:"1",color:"#209f53" },
+        { label: "阴离子表面活性剂 (mg/L)", value: "anSaa", limit:"0.2",color:"#209f53" },
         { label: "硫化物 (mg/L)", value: "s", limit:"1",color:"#209f53" },
         { label: "粪大肠菌群 (mg/L)", value: "coloOrg", limit:"1",color:"#209f53" },
         { label: "硫酸盐 (mg/L)", value: "so4", limit:"1",color:"#209f53" },
-        { label: "氯化物 (mg/L)", value: "cl", limit:"1",color:"#209f53" },
+        { label: "氯化物 (mg/L)", value: "cl", limit:"0.1",color:"#209f53" },
-        { label: "硝酸盐 (mg/L)", value: "no3N", limit:"1",color:"#209f53" },
+        { label: "硝酸盐 (mg/L)", value: "no3N", limit:"10",color:"#209f53" },
-        { label: "铁 (mg/L)", value: "wFe", limit:"1",color:"#209f53" },
+        { label: "铁 (mg/L)", value: "wFe", limit:"0.3",color:"#209f53" },
-        { label: "锰 (mg/L)", value: "wMn", limit:"1",color:"#209f53" },
+        { label: "锰 (mg/L)", value: "wMn", limit:"0.1",color:"#209f53" },
       ], //专湖监测指标
 
       monthOptions: [
-        {
+        // {
-          label: "全部",
+        //   label: "全部",
-          value: "全部",
+        //   value: "全部",
-        },
+        // },
       ],
       xOptions: [
         {
@@ -241,11 +241,7 @@ export default {
     };
   },
   mounted() {
-    let yy = new Date().getFullYear();
-    console.log("year", yy);
-
      this.loadOptionData();
-    // this.buildChart();
   },
   methods: {
     // 下拉列表
@@ -256,7 +252,7 @@ export default {
           label: yy - i,
           value: yy - i,
         });
-        this.monthOptions.push({ label: i + "月", value: i });
+        this.monthOptions.push({ label: i + "月", value: i<10?('0'+i):i });
       }
       // 内湖
       this.getInnerList();
@@ -279,6 +275,17 @@ export default {
     },
     // 趋势图
     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;
+      }
+
       lakeLibrary(this.queryParams).then((res) => {
         console.log("res", res);
         if (res.data.code == 0) {
@@ -327,38 +334,45 @@ export default {
 
     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();
 
-        
-      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'
+              x:'center',
+              textStyle: {
+                            color: '#3A7BD5',
+                            fontSize: 16
+                        }
           },
         tooltip: {
           trigger: "axis",
@@ -368,6 +382,16 @@ export default {
               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: {
@@ -386,7 +410,12 @@ export default {
         yAxis: {
           type: "value",
           max: this.yAxisMax,
-          name: this.queryParams.yco == 'Yco_1' ? '单位：mg/L' : ''
+          name: this.queryParams.yco == 'Yco_1' ? '单位：mg/L' : '',
+          axisLabel: {
+                show: true,
+                interval: 'auto',
+                formatter: this.queryParams.yco=='Yco_3' && '{value} %'
+            },
         },
 
         series: this.series,
@@ -394,17 +423,6 @@ export default {
       trendChart.setOption(option);
     },
 
-    /**
- * 
-
-1.当断面名称多选，横坐标断面，纵坐标是营养指数---- x:断面名称，3跟营养指数线，
-2.当年度多选，断面单选，横坐标年度，纵坐标是营养指数----3跟营养指数线，x:年度
-
-
- * 
- * 
- */
-
     // 生成Y轴最大值
     buildYMax(value){
         if(this.yAxisMax<value){
@@ -447,15 +465,6 @@ export default {
       };
     },
 
-    // 生成y数值标签
-    buildyAxisData() {
-      let yAxisData = [];
-      this.trendData.forEach((item) => {
-        yAxisData.push(item.value);
-        this.buildYMax(item.value);
-      });
-      return yAxisData;
-    },
     // 生成营养度三根线
     buildLine() {
       let lines = [];
@@ -464,6 +473,48 @@ export default {
       // 三根营养线,在纵坐标选择综合营养指数时显示
       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 = [
             [
               {
@@ -480,7 +531,7 @@ export default {
               },
               {
                 yAxis: 70,
-            xAxis: xMax - 3 < 1 ? 1 : xMax - 3,
+                xAxis: xMax - 3,
               },
             ],
             [
@@ -498,7 +549,7 @@ export default {
               },
               {
                 yAxis: 60,
-            xAxis: xMax - 2 < 1 ? 1 : xMax - 2,
+                xAxis: xMax - 2,
               },
             ],
             [
@@ -516,12 +567,17 @@ export default {
               },
               {
                 yAxis: 50,
-            xAxis: xMax - 1 < 1 ? 1 : xMax - 1,
+                xAxis: xMax - 1,
               },
             ]];
         }
 
 
+
+       
+      }
+      
+ 
   // 在纵坐标选择浓度，那显示指标均线
     if(this.queryParams.yco == "Yco_1"){
       let singleLine = []  
@@ -556,7 +612,7 @@ export default {
     },
     // 生成年月标识
     buildYearMonth(obj){
-        return  obj.year + (obj.month || "");
+        return  obj.year + (obj.month ? ('-'+obj.month) : "");
     },
 
 
@@ -575,29 +631,49 @@ export default {
     //     charType = 'line'
     //   }
 
+    // X轴坐标
+     let seriesItemName = this.xAxis.data; 
 
       // x坐标是断面
       if (this.queryParams.xco == "Xco_3") {
        
         // 如果是断面，则用年月来分组数据
-        let seriesItemName = this.xAxis.data; 
+        // 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);
                       }
+                    }
                 });
             })
 
@@ -607,13 +683,23 @@ export default {
             label: {
               // 图形上的文本标签
               show: true,
-              position: "top", // 相对位置
+              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 = item
+            single.stack = '水质类别'
+            this.buildYMax(100);
           }
 
           series.push(single);
@@ -624,8 +710,17 @@ export default {
     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 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) {
@@ -639,13 +734,35 @@ export default {
                 }
                 });
             }
+          }
+
+        /**
+         * 生成数据图例
+         {
+            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
@@ -657,6 +774,8 @@ export default {
                           itemData[index] = single.value;
                           this.buildYMax(single.value);
                       }
+                    }
+                    
                 });
             })
 
@@ -666,87 +785,30 @@ export default {
             label: {
               // 图形上的文本标签
               show: true,
-              position: "top", // 相对位置
+              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 = item
+          single.stack = "Yco_3"
+          this.buildYMax(100);
         }
 
           series.push(single);
         })
-
     }
 
-
-
-
-
-/*
-      // x左边为年度、年月
-      if (this.queryParams.xco == "Xco_1" || this.queryParams.xco == "Xco_2") {
-        let seriesItemName = []; //一组柱状图中单个的名字
-        let gropu = [];
-
-        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) => {
-              let name = '';
-                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;
-          for (let i = 0; i < len; i++) {
-            itemData.push(0);
-          }
-
-          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);
-        });
-      }
-      */
-
       series[0].markLine = {
           lineStyle: {
             normal: {
@@ -759,7 +821,7 @@ export default {
             padding: [1, 10],
             lineHeight: 30,
             show: true,
-            position: "end",
+            position: this.queryParams.yco=='Yco_1' ? "insideEndBottom" : "end",
             borderType: "dashed",
             borderWidth: 1,
           },
@@ -783,214 +845,32 @@ export default {
         }
 
       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;
     },
 
-    //生成柱状图
-    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: "bottom", //可设定图例在上、下、居中
-          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"],
-            // },
-
-            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"],
-            },
-
-            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"},
-        //       }
-        //   }]
-      };
-      trendChart.setOption(option);
-    },
   },
 };
 </script>
@@ -998,4 +878,12 @@ export default {
 .mb-20 {
   margin-bottom: 20px;
 }
+.empty{
+  height: 100%;
+  line-height: 400px;
+  color: #ccc;
+  font-size: 16px;
+  text-align: center;
+}
+
 </style>