diff --git a/nezha-fronted/package-lock.json b/nezha-fronted/package-lock.json
index 5796a8e7f..25e73425e 100644
--- a/nezha-fronted/package-lock.json
+++ b/nezha-fronted/package-lock.json
@@ -3843,11 +3843,11 @@
}
},
"echarts": {
- "version": "4.6.0",
- "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.6.0.tgz",
- "integrity": "sha512-xKkcr6v9UVOSF+PMuj7Ngt3bnzLwN1sSXWCvpvX+jYb3mePYsZnABq7wGkPac/m0nV653uGHXoHK8DCKCprdNg==",
+ "version": "4.8.0",
+ "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.8.0.tgz",
+ "integrity": "sha512-YwShpug8fWngj/RlgxDaYrLBoD+LsZUArrusjNPHpAF+is+gGe38xx4W848AwWMGoi745t3OXM52JedNrv+F6g==",
"requires": {
- "zrender": "4.2.0"
+ "zrender": "4.3.1"
}
},
"ee-first": {
@@ -13174,9 +13174,9 @@
}
},
"zrender": {
- "version": "4.2.0",
- "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.2.0.tgz",
- "integrity": "sha512-YJ9hxt5uFincYYU3KK31+Ce+B6PJmYYK0Q9fQ6jOUAoC/VHbe4kCKAPkxKeT7jGTxrK5wYu18R0TLGqj2zbEOA=="
+ "version": "4.3.1",
+ "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.1.tgz",
+ "integrity": "sha512-CeH2TpJeCdG0TAGYoPSAcFX2ogdug1K7LIn9UO/q9HWqQ54gWhrMAlDP9AwWYMUDhrPe4VeazQ4DW3msD96nUQ=="
}
}
}
diff --git a/nezha-fronted/package.json b/nezha-fronted/package.json
index c9b9a748c..1d09b62b9 100644
--- a/nezha-fronted/package.json
+++ b/nezha-fronted/package.json
@@ -12,7 +12,7 @@
"dependencies": {
"axios": "^0.19.0",
"d3": "^5.16.0",
- "echarts": "^4.6.0",
+ "echarts": "^4.7.0",
"element-ui": "^2.13.0",
"file-saver": "^2.0.2",
"node-sass": "^4.13.1",
diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue
index c9f83f9ec..541951e9f 100644
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -149,6 +149,7 @@ import chartUrl from './chart-url';
import chartSingleStat from './chart-single-stat';
import chartAssetInfo from './chart-asset-info'
import draggable from 'vuedraggable'
+import chartDataFormat from "./chartDataFormat";
export default {
name: 'chartList',
@@ -921,6 +922,26 @@ export default {
seriesItem.theData.stack = chartInfo.title;
seriesItem.theData.areaStyle = {"opacity": 0.3};
}
+ if((chartInfo.type === 'line'||chartInfo.type === 'stackArea'||chartInfo.type === 'bar')&& chartInfo.param && chartInfo.param.threshold){
+ seriesItem.theData.markLine={
+ silent: true,
+ symbol:['circle','circle'],
+ label:{
+ distance:this.computeDistance(chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(chartInfo.param.threshold)),
+ formatter:function(params){
+ return chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(params.value)
+ }
+ },
+ lineStyle:{
+ color:'#d64f40',
+ width:2,
+ type:'dotted'
+ },
+ data: [{
+ yAxis: Number(chartInfo.param.threshold)
+ }, ]
+ }
+ }
// 图表中每条线的名字,后半部分
let host = '';//up,
if (queryItem.metric.__name__) {
@@ -1096,6 +1117,11 @@ export default {
}
}
},
+ computeDistance:function(value){
+ let temp=value+'';
+ let length=temp.length *12 -20;
+ return Number('-'+length)
+ },
modelStaticData(chartInfo, filterType) {
let series = [];
let seriesItem = {
diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue
index 28465c35d..7176daea1 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/nezha-fronted/src/components/charts/line-chart-block.vue
@@ -1376,6 +1376,27 @@
seriesItem.theData.stack=this.data.title;
seriesItem.theData.areaStyle={"opacity": 0.3};
}
+
+ if((this.data.type === 'line'||this.data.type === 'stackArea'||this.data.type === 'bar')&& this.data.param && this.data.param.threshold){
+ seriesItem.theData.markLine={
+ silent: true,
+ symbol:['circle','circle'],
+ label:{
+ distance:this.computeDistance(chartDataFormat.getUnit(this.data.unit?this.data.unit:2).compute(this.data.param.threshold)),
+ formatter:function(params){
+ return chartDataFormat.getUnit(this.data.unit?this.data.unit:2).compute(params.value)
+ }
+ },
+ lineStyle:{
+ width:2,
+ type:'dotted'
+ },
+ data: [{
+ yAxis: Number(this.data.param.threshold)
+ }, ]
+ }
+ }
+
// 图表中每条线的名字,后半部分
// let host = `${queryItem.metric.__name__}{`;//up,
let host = '';//up,
@@ -1462,6 +1483,11 @@
});
});
},
+ computeDistance:function(value){
+ let temp=value+'';
+ let length=temp.length *12 -20;
+ return Number('-'+length)
+ },
showLoad(chartItem) {
//设置高度
this.$nextTick(() => {
diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index 488ba74a1..c91dca329 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -116,6 +116,7 @@ const cn = {
url: "URL",
statistics:'Statistics',
sync: '同步到设备',
+ threshold:'阈值',
typeVal: {
line: {
label: "曲线图"
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 89fc36879..80605b9c6 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -127,6 +127,7 @@ const en = {
statistics:'Statistics',
legendTip:'Controls the name of the time series, using name or pattern. For example {{hostname}} will be replaced with label value for the label hostname.',
sync: 'Sync to assets',
+ threshold:'Threshold',
typeVal:{
line:{
label:'Line Chart' //"曲线图"
diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue
index 03a50c726..27746a3f3 100644
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -183,12 +183,18 @@
-
-
-
+
+
+
+
+
+
+
+
+
{{$t('dashboard.panel.chartForm.metric')}}
@@ -286,7 +292,8 @@
height:'400',
unit:2,
param:{
- url:''
+ url:'',
+ threshold:'',
},
elements:{
id: '',
@@ -660,11 +667,16 @@
type: this.chart.type,
unit:this.chart.unit,
param:{
- statistics:target.statistics
+
},
sync: this.chart.sync
};
-
+ if(this.chart.type === 'singleStat'){
+ params.param.statistics=target.statistics;
+ }
+ if(this.chart.type==='line'||this.chart.type==='bar'||this.chart.type==='stackArea'){
+ params.param.threshold=this.chart.param.threshold;
+ }
//生成指标数组
const elements = [];
this.elementTarget.forEach((elem,index) => {
@@ -877,6 +889,9 @@
});
});
}else{
+ if((this.chart.type==='line'||this.chart.type==='bar'||this.chart.type==='stackArea')&&data.param){
+ this.chart.param.threshold=data.param.threshold;
+ }
this.setIsOtherChart();
//this.getSuggestMetric();//获得指标列表
// 指标
@@ -954,6 +969,9 @@
}*/
}else {
this.setIsOtherChart();
+ if(chartType === 'bar'||chartType === 'line'||chartType === 'stackArea'){
+ this.chart.param={threshold:''}
+ }
/*if(this.$refs.chartTag){
this.$refs.chartTag.forEach((item, index) => {
item.setNotSingleStat();