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

perf: echarts性能优化

Browse Source
This commit is contained in:
chenjinsong
2020-09-25 20:17:29 +08:00
parent c968c4cefc
commit 47a5fd18f8
5 changed files with 28 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
nezha-fronted/src/components/charts/chart-detail.vue
View File

@@ -389,7 +389,7 @@
show:true,
}
});
console.info(labels);
//console.info(labels);
return labels;
},
replaceSplit(key){

12
nezha-fronted/src/components/charts/chart-list.vue
View File

@@ -1119,14 +1119,10 @@
}
},
computeDistance:function(str){
var width = 0;
var html = document.createElement('span');
html.innerText = str;
html.className = 'getTextWidth';
document.querySelector('body').appendChild(html);
width = document.querySelector('.getTextWidth').offsetWidth;
document.querySelector('.getTextWidth').remove();
return Number('-'+(width+5));
let span = document.querySelector(".temp-dom");
span.textContent = str;
let txtWidth = parseFloat(window.getComputedStyle(span).width);
return Number('-'+(txtWidth+5));
},
modelStaticData(chartInfo, filterType) {
let series = [];

4
nezha-fronted/src/components/charts/chartDataFormat.js
View File

@@ -649,9 +649,9 @@ export default {
while(value<1){
pow++;
value=value*10;
console.log(value);
//console.log(value);
}
console.log( Math.floor(value+1)/Math.pow(10,pow));
//console.log( Math.floor(value+1)/Math.pow(10,pow));
return Math.floor(value+1)/Math.pow(10,pow);
}
if(type ==='Time'){

54
nezha-fronted/src/components/charts/line-chart-block.vue
View File

@@ -433,22 +433,6 @@
return '';
}
//计算宽度
/*var span = document.createElement("span");
var result = {};
result.width = span.offsetWidth;
result.height = span.offsetHeight;
span.style.visibility = "hidden";
span.style.fontSize = 14;
span.style.fontFamily = "Arial";
span.style.display = "inline-block";
document.body.appendChild(span);
if(typeof span.textContent != "undefined"){
span.textContent = name;
}else{
span.innerText = name;
}
var txtWidth = parseFloat(window.getComputedStyle(span).width) - result.width;
document.body.removeChild(span);*/
let span = document.querySelector(".temp-dom");
span.textContent = name;
let txtWidth = parseFloat(window.getComputedStyle(span).width) - this.tempDom.width;
@@ -618,9 +602,7 @@
}
},
formatter:function(params){
//display:inline-block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;
let str = `<div>`;
//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;'>`;
let sum = 0;
params.forEach((item, i) => {
let tip=legend[item.seriesIndex];
@@ -1031,23 +1013,9 @@
return '';
}
//计算宽度
var span = document.createElement("span");
var result = {};
result.width = span.offsetWidth;
result.height = span.offsetHeight;
span.style.visibility = "hidden";
span.style.fontSize = 14;
span.style.fontFamily = "Arial";
span.style.display = "inline-block";
document.body.appendChild(span);
if(typeof span.textContent != "undefined"){
span.textContent = str;
}else{
span.innerText = str;
}
var txtWidth = parseFloat(window.getComputedStyle(span).width) - result.width;
document.body.removeChild(span);
let span = document.querySelector(".temp-dom");
span.textContent = name;
let txtWidth = parseFloat(window.getComputedStyle(span).width) - this.tempDom.width;
if(txtWidth < chartWidth){
return str;
}else {
@@ -1418,14 +1386,10 @@
});
},
computeDistance:function(str){
var width = 0;
var html = document.createElement('span');
html.innerText = str;
html.className = 'getTextWidth';
document.querySelector('body').appendChild(html);
width = document.querySelector('.getTextWidth').offsetWidth;
document.querySelector('.getTextWidth').remove();
return Number('-'+(width+5));
let span = document.querySelector(".temp-dom");
span.textContent = str;
let txtWidth = parseFloat(window.getComputedStyle(span).width);
return Number('-'+(txtWidth+5));
},
showLoad(chartItem) {
//设置高度
@@ -1482,8 +1446,8 @@
loadMore(){
this.seriesItemArr=this.seriesItem;
this.legendListMore=this.legendList;
console.log(this.seriesItem,'irate(mysql_global_status_commands_total[5m])>0');
console.log(this.data);
//console.log(this.seriesItem,'irate(mysql_global_status_commands_total[5m])>0');
//console.log(this.data);
let chartInfo=this.data;
let dataArg=this.seriesItem;
let maxValueCopies = this.getMaxValue(dataArg,chartInfo);

26
nezha-fronted/src/components/common/js/tools.js
View File

@@ -103,13 +103,13 @@ export const scrollBar = {
const { arg } = binding;
if (arg === "el-table") {
el = el.querySelector(".el-table__body-wrapper");
!el && console.warn("未发现className为el-table__body-wrapper的dom");
//!el && console.warn("未发现className为el-table__body-wrapper的dom");
} else if (arg === "el-dropdown") {
el = document.querySelector(".el-dropdown-menu");
!el && console.warn("未发现className为el-dropdown-menu的dom");
//!el && console.warn("未发现className为el-dropdown-menu的dom");
} else if (arg == "legend") {
el = el.querySelector(".legend-container");
!el && console.warn("未发现className为legend-container的dom");
//!el && console.warn("未发现className为legend-container的dom");
}
// 启用x轴后不让原生滚动条出来作乱
@@ -117,11 +117,11 @@ export const scrollBar = {
vnode.context.$nextTick(() => {
if (arg === "xterm") {
el = el.querySelector(".xterm-viewport");
!el && console.warn("未发现className为xterm-viewport的dom");
//!el && console.warn("未发现className为xterm-viewport的dom");
}
if(arg==="metric-label-cascader"){
el = el.querySelector(".el-cascader__tags");
!el && console.warn("未发现className为el-cascader__tags的dom");
//!el && console.warn("未发现className为el-cascader__tags的dom");
}
el.classList.add("ps");
el.addEventListener("ps-scroll-y", () => {
@@ -134,30 +134,30 @@ export const scrollBar = {
el_scrollBar(el);
});
const rules = ["fixed", "absolute", "relative"];
/*const rules = ["fixed", "absolute", "relative"];
if (!rules.includes(window.getComputedStyle(el, null).position)) {
console.error(
`perfect-scrollbar所在的容器的position属性必须是以下之一：${rules.join(
"、"
)}`
);
}
}*/
}
},
componentUpdated(el, binding, vnode, oldVnode) {
const { arg, value } = binding;
if (arg === "el-table") {
el = el.querySelector(".el-table__body-wrapper");
!el && console.warn("未发现className为el-table__body-wrapper的dom");
//!el && console.warn("未发现className为el-table__body-wrapper的dom");
} else if (arg === "el-dropdown") {
el = document.querySelector(".el-dropdown-menu");
!el && console.warn("未发现className为el-dropdown-menu的dom");
//!el && console.warn("未发现className为el-dropdown-menu的dom");
}else if (arg === "xterm") {
el = el.querySelector(".xterm-viewport");
!el && console.warn("未发现className为xterm-viewport的dom");
//!el && console.warn("未发现className为xterm-viewport的dom");
}else if(arg==="metric-label-cascader"){
el = el.querySelector(".el-cascader__tags");
!el && console.warn("未发现className为el-cascader__tags的dom");
//!el && console.warn("未发现className为el-cascader__tags的dom");
}
setTimeout(() => {
el.classList.add("ps");
@@ -201,8 +201,7 @@ export const bottomBoxWindow = {
let subInitialHeight = subListDom.offsetHeight+resizeBarHeight;
mainModalDom.style.display = "block";
resizeModalDom.style.height = `${subInitialHeight}px`;
resizeModalDom.style.display = "block";
resizeModalDom.style.cssText = `height: ${subInitialHeight}px; display: block;`;
resizeBarDom.style.display = "none";
let resizeModalEndHeight;
//点击时鼠标的Y轴位置
@@ -292,7 +291,6 @@ export const bottomBoxWindow = {
},
showSubListWatch(vm, n) {
vm.bottomBox.inTransform = n;
console.info(vm.bottomBox.inTransform)
if (!n) {
vm.mainTableHeight = vm.$tableHeight.normal; //重置table的高度
vm.tools.toTopBtnTop = vm.$tableHeight.toTopBtnTop;