From 461e4bba9c78efd3b6f60fcee37d6ac8ef01f9d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BA=9E=E4=B8=9C=E6=9E=97?= Date: Mon, 17 Jan 2022 15:24:11 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B9=96=E5=BA=93=E8=B6=8B=E5=8A=BF=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 | 792 ++++++++++++--------------- 1 file changed, 340 insertions(+), 452 deletions(-) diff --git a/src/views/water/lake/trend/index.vue b/src/views/water/lake/trend/index.vue index 7b50a07..07a076c 100644 --- a/src/views/water/lake/trend/index.vue +++ b/src/views/water/lake/trend/index.vue @@ -99,7 +99,7 @@ -
+
暂无数据
 @@ -139,8 +139,8 @@ export default { innerSection: [], // 内湖断面 specialSection: [], // 专湖断面 innerIndex: [ - { label: "pH值", value: "ph", limit:"6",color:"#209f53" }, - // { label: "透明度（cm）", value: "transparency", limit:"1",color:"#209f53" }, + { label: "pH值", value: "ph", limit:"9",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: "pH值", value: "ph", limit:"1",color:"#209f53" }, - { label: "电导率(ms/m)", value: "wCond", limit:"1",color:"#209f53" }, - { label: "透明度（cm）", value: "transp", limit:"1",color:"#209f53" }, - { label: "溶解氧 (mg/L)", value: "dissolvedOxygen", limit:"1",color:"#209f53" }, - { label: "高锰酸盐指数 (mg/L)", value: "codmn", limit:"1",color:"#209f53" }, - { label: "五日生化需氧量", value: "bod5", limit:"1",color:"#209f53" }, - { label: "氨氮 (mg/L)", value: "nh4N", limit:"1",color:"#209f53" }, - { label: "石油类 (mg/L)", value: "oils", limit:"1",color:"#209f53" }, - { label: "总氮 (mg/L)", value: "nTotal", limit:"1",color:"#209f53" }, - { label: "总磷 (mg/L)", value: "pTotal", limit:"1",color:"#209f53" }, - { label: "叶绿素 (mg/L)", value: "chlA", limit:"1",color:"#209f53" }, - { label: "挥发酚 (mg/L)", value: "vPhen", limit:"1",color:"#209f53" }, - { label: "汞 (mg/L)", value: "wHg", limit:"1",color:"#209f53" }, - { label: "铅 (mg/L)", value: "wPb", limit:"1",color:"#209f53" }, - { label: "化学需氧量 (mg/L)", value: "codcr", limit:"1",color:"#209f53" }, + // { label: "水位(m)", value: "wd", limit:"1",color:"#209f53" }, + { label: "pH值", value: "ph", limit:"9",color:"#209f53" }, + // { label: "电导率(ms/m)", value: "wCond", limit:"1",color:"#209f53" }, + { label: "透明度（cm）", value: "transp", limit:"0.01",color:"#209f53" }, + { label: "溶解氧 (mg/L)", value: "dissolvedOxygen", limit:"6",color:"#209f53" }, + { label: "高锰酸盐指数 (mg/L)", value: "codmn", limit:"4",color:"#209f53" }, + { label: "五日生化需氧量", value: "bod5", limit:"3",color:"#209f53" }, + { label: "氨氮 (mg/L)", value: "nh4N", limit:"0.5",color:"#209f53" }, + { label: "石油类 (mg/L)", value: "oils", limit:"0.05",color:"#209f53" }, + { label: "总氮 (mg/L)", value: "nTotal", limit:"0.5",color:"#209f53" }, + { label: "总磷 (mg/L)", value: "pTotal", limit:"0.025",color:"#209f53" }, + // { label: "叶绿素 (mg/L)", value: "chlA", limit:"0",color:"#209f53" }, + { label: "挥发酚 (mg/L)", value: "vPhen", limit:"0.002",color:"#209f53" }, + { label: "汞 (mg/L)", value: "wHg", limit:"0.00005",color:"#209f53" }, + { label: "铅 (mg/L)", value: "wPb", limit:"0.01",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: "as", limit:"1",color:"#209f53" }, - { label: "镉 (mg/L)", value: "cd", limit:"1",color:"#209f53" }, - { label: "六价铬 (mg/L)", value: "cr6", limit:"1",color:"#209f53" }, - { label: "氰化物 (mg/L)", value: "cnTotal", limit:"1",color:"#209f53" }, - { label: "阴离子表面活性剂 (mg/L)", value: "anSaa", limit:"1",color:"#209f53" }, + { label: "硒 (mg/L)", value: "se", limit:"0.01",color:"#209f53" }, + { label: "砷 (mg/L)", value: "as", limit:"0.05",color:"#209f53" }, + { label: "镉 (mg/L)", value: "cd", limit:"0.005",color:"#209f53" }, + { label: "六价铬 (mg/L)", value: "cr6", limit:"0.05",color:"#209f53" }, + { label: "氰化物 (mg/L)", value: "cnTotal", limit:"0.05",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: "no3N", limit:"1",color:"#209f53" }, - { label: "铁 (mg/L)", value: "wFe", limit:"1",color:"#209f53" }, - { label: "锰 (mg/L)", value: "wMn", limit:"1",color:"#209f53" }, + { label: "氯化物 (mg/L)", value: "cl", limit:"0.1",color:"#209f53" }, + { label: "硝酸盐 (mg/L)", value: "no3N", limit:"10",color:"#209f53" }, + { label: "铁 (mg/L)", value: "wFe", limit:"0.3",color:"#209f53" }, + { label: "锰 (mg/L)", value: "wMn", limit:"0.1",color:"#209f53" }, ], //专湖监测指标 monthOptions: [ - { - label: "全部", - value: "全部", - }, + // { + // label: "全部", + // value: "全部", + // }, ], xOptions: [ { @@ -241,11 +241,7 @@ export default { }; }, mounted() { - let yy = new Date().getFullYear(); - console.log("year", yy); - - this.loadOptionData(); - // this.buildChart(); + this.loadOptionData(); }, 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) { @@ -326,39 +333,46 @@ export default { }, initChart() { - this.yAxisMax = 1; + this.yAxisMax = 1; + + if (trendChart != null && trendChart != "" && trendChart != undefined) { + trendChart.dispose(); // 销毁 + } + if(Array.isArray(this.trendData) && this.trendData.length==0){ + document.getElementById("chartColumn").innerHTML = '
暂无数据
' + 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 = '
水质类别
'; + for(var i=0;i类别"+ params[i].seriesName +"："+params[i].data+"%" + ""; + } + 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 { - yAxisData.push(item.value); - this.buildYMax(item.value); - }); - return yAxisData; - }, // 生成营养度三根线 buildLine() { let lines = []; let xMax = this.xAxis.data.length; -// 三根营养线,在纵坐标选择综合营养指数时显示 - if (this.queryParams.yco == "Yco_2"){ + // 三根营养线,在纵坐标选择综合营养指数时显示 + if (this.queryParams.yco == "Yco_2"){ this.buildYMax(72); - lines = [ - [ - { - 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(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 = [ + [ + { + name: "中度富营养↓", + yAxis: 70, + xAxis: 0, + label: { + color: "red", + borderColor: "red", + }, + lineStyle: { + color: "red", + }, + }, + { + yAxis: 70, + xAxis: xMax - 3, + }, + ], + [ + { + name: "轻度富营养↓", + yAxis: 60, + xAxis: 0, + label: { + color: "#fbfb00", + borderColor: "#fbfb00", + }, + lineStyle: { + color: "#fbfb00", + }, + }, + { + yAxis: 60, + xAxis: xMax - 2, + }, + ], + [ + { + name: "中营养↓", + yAxis: 50, + xAxis: 0, + label: { + color: "#99ff00", + borderColor: "#99ff00", + }, + lineStyle: { + color: "#99ff00", + }, + }, + { + yAxis: 50, + xAxis: xMax - 1, + }, + ]]; + } + + + + } @@ -556,7 +612,7 @@ export default { }, // 生成年月标识 buildYearMonth(obj){ - return obj.year + (obj.month || ""); + return obj.year + (obj.month ? ('-'+obj.month) : ""); }, @@ -575,28 +631,48 @@ 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 = []; - this.trendData.forEach((item) => { - if (group.indexOf(this.buildYearMonth(item)) < 0) { - group.push(this.buildYearMonth(item)); + + // 如果是水质类别，那么就按类别分组 + 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 (data == single.place && item == this.buildYearMonth(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,14 +683,24 @@ 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 - } + if(this.queryParams.yco=='Yco_3'){ + single.stack = '水质类别' + this.buildYMax(100); + } series.push(single); }) @@ -624,39 +710,72 @@ 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(singleType){ - this.trendData.forEach((item) => { - if (group.indexOf(item.indexName) < 0) { - group.push(item.indexName); + + // 如果是水质类别，那么就按类别分组 + 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(item.place) < 0) { - group.push(item.place); + }else{ + 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); + } + }); } - }); - } + } + + /** + * 生成数据图例 + { + 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) => { - - let name = '' - if(singleType){ - name = single.indexName + // 水质类别 + if(this.queryParams.yco=='Yco_3'){ + if(item==single.value && data == this.buildYearMonth(single)){ + itemData[index] += 1; + } }else{ - name = single.place - } + 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); + if (data == this.buildYearMonth(single) && item == name) { + 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); - }, }, }; @@ -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; +} +