普陀大型网站建设,网站建设_,wordpress cc,免费咨询抑郁症首先说明#xff0c;此方案仅针对vue3项目在同一个页面引入了多个图表组件#xff0c;因为我发现不能框架不同的引入#xff0c;resize的写法还不同
window.addEventListener(resize, function() {...// 在此处重新调用即可
}以下是具体写法#xff1a;
循环…首先说明此方案仅针对vue3项目在同一个页面引入了多个图表组件因为我发现不能框架不同的引入resize的写法还不同
window.addEventListener(resize, function() {...// 在此处重新调用即可
}以下是具体写法
循环渲染多个pie图减少dom层的代码量
divclasschartv-for(item, index) in riskSpreadItem:keyitem.title
Pie:idriskSpread${index}:refel getRiskSpreadRef(el, index):titleitem.title:dataitem.dataemptyText暂无风险/
/divvue3需要先声明ref变量才能使用以下是循环出来的未知变量名或未知ref个数的声明方法
const riskSpreadRefList refHTMLElement[]([]);
const getRiskSpreadRef (el, index) {if (el) {riskSpreadRefList.value[index] el; }
};使用节流函数调用浏览器窗口的resize事件不然改变浏览器窗口会疯狂调用
const ThrottleResize Throttle(function () {riskSpreadRefList.value?.forEach((item: any) {if (!isEmpty(item)) {nextTick(() {// drawchart是子组件里面写的加载echarts的option的方法item.drawchart();});}});
}, 500);// 记住啊window.addEventListener在离开页面的时候一定要移除不然控制台会报错attribute is not define
onBeforeUnmount(() {window.removeEventListener(resize, ThrottleResize);
});onMounted(() {handleLoad();window.addEventListener(resize, ThrottleResize);
});
