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, show:true,
} }
}); });
console.info(labels); //console.info(labels);
return labels; return labels;
}, },
replaceSplit(key){ replaceSplit(key){

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

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

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

@@ -649,9 +649,9 @@ export default {
while(value<1){ while(value<1){
pow++; pow++;
value=value*10; 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); return Math.floor(value+1)/Math.pow(10,pow);
} }
if(type ==='Time'){ if(type ==='Time'){

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

@@ -433,22 +433,6 @@
return ''; 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"); let span = document.querySelector(".temp-dom");
span.textContent = name; span.textContent = name;
let txtWidth = parseFloat(window.getComputedStyle(span).width) - this.tempDom.width; let txtWidth = parseFloat(window.getComputedStyle(span).width) - this.tempDom.width;
@@ -618,9 +602,7 @@
} }
}, },
formatter:function(params){ formatter:function(params){
//display:inline-block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;
let str = `<div>`; 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; let sum = 0;
params.forEach((item, i) => { params.forEach((item, i) => {
let tip=legend[item.seriesIndex]; let tip=legend[item.seriesIndex];
@@ -1031,23 +1013,9 @@
return ''; return '';
} }
//计算宽度 //计算宽度
var span = document.createElement("span"); let span = document.querySelector(".temp-dom");
var result = {}; span.textContent = name;
result.width = span.offsetWidth; let txtWidth = parseFloat(window.getComputedStyle(span).width) - this.tempDom.width;
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);
if(txtWidth < chartWidth){ if(txtWidth < chartWidth){
return str; return str;
}else { }else {
@@ -1418,14 +1386,10 @@
}); });
}, },
computeDistance:function(str){ computeDistance:function(str){
var width = 0; let span = document.querySelector(".temp-dom");
var html = document.createElement('span'); span.textContent = str;
html.innerText = str; let txtWidth = parseFloat(window.getComputedStyle(span).width);
html.className = 'getTextWidth'; return Number('-'+(txtWidth+5));
document.querySelector('body').appendChild(html);
width = document.querySelector('.getTextWidth').offsetWidth;
document.querySelector('.getTextWidth').remove();
return Number('-'+(width+5));
}, },
showLoad(chartItem) { showLoad(chartItem) {
//设置高度 //设置高度
@@ -1482,8 +1446,8 @@
loadMore(){ loadMore(){
this.seriesItemArr=this.seriesItem; this.seriesItemArr=this.seriesItem;
this.legendListMore=this.legendList; this.legendListMore=this.legendList;
console.log(this.seriesItem,'irate(mysql_global_status_commands_total[5m])>0'); //console.log(this.seriesItem,'irate(mysql_global_status_commands_total[5m])>0');
console.log(this.data); //console.log(this.data);
let chartInfo=this.data; let chartInfo=this.data;
let dataArg=this.seriesItem; let dataArg=this.seriesItem;
let maxValueCopies = this.getMaxValue(dataArg,chartInfo); 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; const { arg } = binding;
if (arg === "el-table") { if (arg === "el-table") {
el = el.querySelector(".el-table__body-wrapper"); 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") { } else if (arg === "el-dropdown") {
el = document.querySelector(".el-dropdown-menu"); 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") { } else if (arg == "legend") {
el = el.querySelector(".legend-container"); el = el.querySelector(".legend-container");
!el && console.warn("未发现className为legend-container的dom"); //!el && console.warn("未发现className为legend-container的dom");
} }
// 启用x轴后不让原生滚动条出来作乱 // 启用x轴后不让原生滚动条出来作乱
@@ -117,11 +117,11 @@ export const scrollBar = {
vnode.context.$nextTick(() => { vnode.context.$nextTick(() => {
if (arg === "xterm") { if (arg === "xterm") {
el = el.querySelector(".xterm-viewport"); el = el.querySelector(".xterm-viewport");
!el && console.warn("未发现className为xterm-viewport的dom"); //!el && console.warn("未发现className为xterm-viewport的dom");
} }
if(arg==="metric-label-cascader"){ if(arg==="metric-label-cascader"){
el = el.querySelector(".el-cascader__tags"); 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.classList.add("ps");
el.addEventListener("ps-scroll-y", () => { el.addEventListener("ps-scroll-y", () => {
@@ -134,30 +134,30 @@ export const scrollBar = {
el_scrollBar(el); el_scrollBar(el);
}); });
const rules = ["fixed", "absolute", "relative"]; /*const rules = ["fixed", "absolute", "relative"];
if (!rules.includes(window.getComputedStyle(el, null).position)) { if (!rules.includes(window.getComputedStyle(el, null).position)) {
console.error( console.error(
`perfect-scrollbar所在的容器的position属性必须是以下之一：${rules.join( `perfect-scrollbar所在的容器的position属性必须是以下之一：${rules.join(
"、" "、"
)}` )}`
); );
} }*/
} }
}, },
componentUpdated(el, binding, vnode, oldVnode) { componentUpdated(el, binding, vnode, oldVnode) {
const { arg, value } = binding; const { arg, value } = binding;
if (arg === "el-table") { if (arg === "el-table") {
el = el.querySelector(".el-table__body-wrapper"); 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") { } else if (arg === "el-dropdown") {
el = document.querySelector(".el-dropdown-menu"); 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") { }else if (arg === "xterm") {
el = el.querySelector(".xterm-viewport"); 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"){ }else if(arg==="metric-label-cascader"){
el = el.querySelector(".el-cascader__tags"); el = el.querySelector(".el-cascader__tags");
!el && console.warn("未发现className为el-cascader__tags的dom"); //!el && console.warn("未发现className为el-cascader__tags的dom");
} }
setTimeout(() => { setTimeout(() => {
el.classList.add("ps"); el.classList.add("ps");
@@ -201,8 +201,7 @@ export const bottomBoxWindow = {
let subInitialHeight = subListDom.offsetHeight+resizeBarHeight; let subInitialHeight = subListDom.offsetHeight+resizeBarHeight;
mainModalDom.style.display = "block"; mainModalDom.style.display = "block";
resizeModalDom.style.height = `${subInitialHeight}px`; resizeModalDom.style.cssText = `height: ${subInitialHeight}px; display: block;`;
resizeModalDom.style.display = "block";
resizeBarDom.style.display = "none"; resizeBarDom.style.display = "none";
let resizeModalEndHeight; let resizeModalEndHeight;
//点击时鼠标的Y轴位置 //点击时鼠标的Y轴位置
@@ -292,7 +291,6 @@ export const bottomBoxWindow = {
}, },
showSubListWatch(vm, n) { showSubListWatch(vm, n) {
vm.bottomBox.inTransform = n; vm.bottomBox.inTransform = n;
console.info(vm.bottomBox.inTransform)
if (!n) { if (!n) {
vm.mainTableHeight = vm.$tableHeight.normal; //重置table的高度 vm.mainTableHeight = vm.$tableHeight.normal; //重置table的高度
vm.tools.toTopBtnTop = vm.$tableHeight.toTopBtnTop; vm.tools.toTopBtnTop = vm.$tableHeight.toTopBtnTop;