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;
+}
+