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

NEZ-364 fix:修复图表resize页面卡死的问题

Browse Source
This commit is contained in:
wangwenrui
2020-08-20 16:19:09 +08:00
parent 59aa019c2a
commit 7a450c35ea
1 changed files with 14 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -368,6 +368,7 @@ export const chartResizeTool = {
containerBlankWidth: 25, //容器空白占位宽度（#listContainer的padding） containerBlankWidth: 25, //容器空白占位宽度（#listContainer的padding）
titleHeight: 28, //标题dom高度 titleHeight: 28, //标题dom高度
stepHeight: 50, //单元高度 stepHeight: 50, //单元高度
timeouter:null,
stepWidth(containerWidth) { //单元宽度，参数为容器总宽度 stepWidth(containerWidth) { //单元宽度，参数为容器总宽度
return (containerWidth-this.containerBlankWidth)/12; return (containerWidth-this.containerBlankWidth)/12;
}, },
@@ -379,6 +380,7 @@ export const chartResizeTool = {
return height-this.chartBlankHeight; return height-this.chartBlankHeight;
}, },
start(vm, originalData, event) { start(vm, originalData, event) {
let $self=this;
let data = JSON.parse(JSON.stringify(originalData)); //将初始对象复制，后续操作使用复制对象 let data = JSON.parse(JSON.stringify(originalData)); //将初始对象复制，后续操作使用复制对象
let shadow = vm.$refs.resizeShadow; //缩放时底部阴影dom let shadow = vm.$refs.resizeShadow; //缩放时底部阴影dom
if (!shadow) { if (!shadow) {
@@ -472,15 +474,19 @@ export const chartResizeTool = {
} }
if (widthChange || heightChange) { if (widthChange || heightChange) {
clearTimeout($self.timeouter)
$self.timeouter=setTimeout(()=>{
//step时chart重绘 //step时chart重绘
if (box.classList.contains("resize-box-echarts")) { //echarts类型 if (box.classList.contains("resize-box-echarts")) { //echarts类型
vm.echartStore.resize({width: shadow.offsetWidth-16, height: shadow.offsetHeight-titleHeight-vm.$refs.legendArea.offsetHeight}); vm.echartStore.resize({width: shadow.offsetWidth-16, height: shadow.offsetHeight-titleHeight-vm.$refs.legendArea.offsetHeight});
} }
},500)
//chart外层宽高调整 //chart外层宽高调整
let outerBox = document.getElementById(`chart-${data.id}`); let outerBox = document.getElementById(`chart-${data.id}`);
outerBox.style.height = `${shadow.offsetHeight+chartPaddingTop}px`; outerBox.style.height = `${shadow.offsetHeight+chartPaddingTop}px`;
outerBox.style.width = `${parseFloat(shadow.style.width.split("px")[0])+chartBlankWidth}px`; outerBox.style.width = `${parseFloat(shadow.style.width.split("px")[0])+chartBlankWidth}px`;
} }
} }
} }
}; };