首先说明,此方案仅针对vue3项目在同一个页面引入了多个图表组件,因为我发现不能框架不同的引入,resize的写法还不同
window.addEventListener("resize", function() {
...
// 在此处重新调用即可
}
以下是具体写法:
循环渲染多个pie图,减少dom层的代码量
<div
class="chart"
v-for="(item, index) in riskSpreadItem"
:key="item.title"
>
<Pie
:id="`riskSpread${index}`"
:ref="el => getRiskSpreadRef(el, index)"
:title="item.title"
:data="item.data"
emptyText="暂无风险"
/>
</div>
vue3需要先声明ref变量,才能使用,以下是循环出来的未知变量名或未知ref个数的声明方法
const riskSpreadRefList = ref<HTMLElement[]>([]);
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);
});