perf:chart 新增 threshold
This commit is contained in:
wangwenrui
14
nezha-fronted/package-lock.json
generated
14
nezha-fronted/package-lock.json
generated
@@ -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=="
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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 = {
|
||||
|
||||
@@ -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(() => {
|
||||
|
||||
@@ -116,6 +116,7 @@ const cn = {
|
||||
url: "URL",
|
||||
statistics:'Statistics',
|
||||
sync: '同步到设备',
|
||||
threshold:'阈值',
|
||||
typeVal: {
|
||||
line: {
|
||||
label: "曲线图"
|
||||
|
||||
@@ -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' //"曲线图"
|
||||
|
||||
@@ -183,12 +183,18 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-form-item v-if="isUrl" :label='$t("dashboard.panel.chartForm.url")' prop="param.url" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur' }">
|
||||
<el-input size="small" type="textarea" maxlength="1024" show-word-limit v-model="chart.param.url"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('dashboard.panel.chartForm.sync')" v-if="showPanel.type && showPanel.type == 'model'">
|
||||
<el-switch class="exporter-switch" v-model="chart.sync" active-color="#ee9d3f" :active-value="1" :inactive-value="0"></el-switch>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="isUrl" :label='$t("dashboard.panel.chartForm.url")' prop="param.url" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur' }">
|
||||
<el-input size="small" type="textarea" maxlength="1024" show-word-limit v-model="chart.param.url"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="chart.type == 'line' || chart.type == 'bar' || chart.type == 'stackArea'" :label='$t("dashboard.panel.chartForm.threshold")' prop="param.threshold" >
|
||||
<el-input size="small" type="input" v-model="chart.param.threshold"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<div v-if="!isUrl" class="right-box-sub-title">{{$t('dashboard.panel.chartForm.metric')}}</div>
|
||||
<div v-if="!isUrl" class="line-100"></div>
|
||||
|
||||
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user