gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：修改问题

Browse Source 
1 panel chart 图表refresh刷新无效，一致显示loading图标
2 堆叠图tooltip加一个总和total
This commit is contained in:
hyx
2020-04-29 16:35:58 +08:00
parent 690db89452
commit e0b70cdabc
4 changed files with 228 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
nezha-fronted/src/components/charts/chartPreview.vue
View File

@@ -145,6 +145,7 @@
xAxis: [],
theData: [], // series数据组
},
isStackArea:false,
echartModalStore: null, // 全屏查看时数据
chartType: 'line', // 图表类型
screenModal: false,
@@ -326,7 +327,6 @@
that.$refs.loadingPreview.endLoading();
}
}
console.log('=======',this.chart);
iframe.src = this.chart.param.url;
});
}
@@ -642,6 +642,8 @@ console.log('=======',this.chart);
}
};
let stackIconBorderColor = (chartInfo.type==='stackArea'?'#53a3cb':'#7e7e7e');
let stackIconChooseBorderColor = (chartInfo.type==='stackArea'?'#7e7e7e':'#53a3cb');
var option = {
title:{
show:false,
@@ -656,7 +658,13 @@ console.log('=======',this.chart);
yAxisIndex:false
},
magicType:{
type:['stack']
type:['stack'],
iconStyle:{
borderColor:stackIconBorderColor,
},
emphasis:{
borderColor:stackIconChooseBorderColor,
}
}
}
},
@@ -698,7 +706,7 @@ console.log('=======',this.chart);
formatter:function(params){
//display:inline-block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;
let str = `<div>`;
let sum = 0;
//let str = `<div style='white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;min-width:150px;max-width:600px;display:inline-block;line-height: 18px;font-size:12px;font-family: Roboto,Helvetica Neue,Arial,sans-serif;'>`;
params.forEach((item, i) => {
//let tip=legend.find((element)=>{
@@ -716,6 +724,7 @@ console.log('=======',this.chart);
if(val===0){
val = Number(item.data[1]);
}
sum +=val;
str += `<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip?(tip.alias?tip.alias:tip.name):item.seriesName} </div>`;
str += `<div style="padding-left: 10px;">`;
@@ -724,6 +733,17 @@ console.log('=======',this.chart);
str += `</div>`;
});
if(chartInfo.type==='stackArea' || self.isStackArea){
sum = parseFloat(Number(sum).toFixed(2));
str +=`<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
str +=`<div style="line-height: 18px; font-size: 12px;padding-left:20px;">`
str +=self.$t("dashboard.panel.chartTotal");
str +=`</div>`;
str +=`<div style="padding-left: 10px;">`;
str +=chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(sum,null,2);
str +=`</div>`;
str += `</div>`;
}
str +=`</div>`;
return str;
},
@@ -891,6 +911,62 @@ console.log('=======',this.chart);
this.echartModalStore.setOption(option);//创建图表
this.$refs.loadingPreview.endLoading();
});
this.echartModalStore.on('magictypechanged', function (params) {
self.isStackArea = !self.isStackArea;
if(self.isStackArea){
this.setOption({
toolbox:{
feature:{
magicType:{
iconStyle:{
borderColor:'#7e7e7e',
},
},
}
},
tooltip: {
formatter:function(params){
let str = `<div>`;let sum = 0;
params.forEach((item, i) => {let tip=legend[item.seriesIndex];
let color = self.bgColorList[item.seriesIndex];
if(i===0){
let value=bus.computeTimezone(item.data[0]);
let t_date = new Date(value);
str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
+ [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':');
str +=`<br/>`;
}
let val = parseFloat(Number(item.data[1]).toFixed(2));
if(val===0){
val = Number(item.data[1]);
}
sum +=val;
str += `<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip?(tip.alias?tip.alias:tip.name):item.seriesName} </div>`;
str += `<div style="padding-left: 10px;">`;
str += chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,2);
str += `</div>`;
str += `</div>`;
});
if(chartInfo.type==='stackArea' || self.isStackArea){
sum = parseFloat(Number(sum).toFixed(2));
str +=`<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
str +=`<div style="line-height: 18px; font-size: 12px;padding-left:20px;">`
str +=self.$t("dashboard.panel.chartTotal");
str +=`</div>`;
str +=`<div style="padding-left: 10px;">`;
str +=chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(sum,null,2);
str +=`</div>`;
str += `</div>`;
}
str +=`</div>`;
return str;
},
}
});
}
});
},
mouseEnterFullChart(){
if (this.echartModalStore) {
@@ -952,6 +1028,7 @@ console.log('=======',this.chart);
if(iframe){
iframe.src="";
}
this.isStackArea = false;
},
// 重新请求数据 刷新操作