From 47a5fd18f8bb660cea7fe1ec018d648d9590a309 Mon Sep 17 00:00:00 2001 From: chenjinsong <523037378@qq.com> Date: Fri, 25 Sep 2020 20:17:29 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20echarts=E6=80=A7=E8=83=BD=E4=BC=98?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/charts/chart-detail.vue | 2 +- .../src/components/charts/chart-list.vue | 12 ++--- .../src/components/charts/chartDataFormat.js | 4 +- .../components/charts/line-chart-block.vue | 54 ++++--------------- .../src/components/common/js/tools.js | 26 +++++---- 5 files changed, 28 insertions(+), 70 deletions(-) diff --git a/nezha-fronted/src/components/charts/chart-detail.vue b/nezha-fronted/src/components/charts/chart-detail.vue index e47f38431..efc74ffb5 100644 --- a/nezha-fronted/src/components/charts/chart-detail.vue +++ b/nezha-fronted/src/components/charts/chart-detail.vue @@ -389,7 +389,7 @@ show:true, } }); - console.info(labels); + //console.info(labels); return labels; }, replaceSplit(key){ diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue index 7f45d8c41..f8a37f40a 100644 --- a/nezha-fronted/src/components/charts/chart-list.vue +++ b/nezha-fronted/src/components/charts/chart-list.vue @@ -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 = []; diff --git a/nezha-fronted/src/components/charts/chartDataFormat.js b/nezha-fronted/src/components/charts/chartDataFormat.js index 9133d0de1..44a9481d4 100644 --- a/nezha-fronted/src/components/charts/chartDataFormat.js +++ b/nezha-fronted/src/components/charts/chartDataFormat.js @@ -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'){ diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue index 053bfff86..81157e9ae 100644 --- a/nezha-fronted/src/components/charts/line-chart-block.vue +++ b/nezha-fronted/src/components/charts/line-chart-block.vue @@ -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 = `
`; - //let str = `
`; 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); diff --git a/nezha-fronted/src/components/common/js/tools.js b/nezha-fronted/src/components/common/js/tools.js index 98479203e..3fbc55181 100644 --- a/nezha-fronted/src/components/common/js/tools.js +++ b/nezha-fronted/src/components/common/js/tools.js @@ -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;