【vue3】同个页面引入多个图表组件实现自适应的方法

首先说明，此方案仅针对vue3项目在同一个页面引入了多个图表组件，因为我发现不能框架不同的引入，resize的写法还不同

window.addEventListener("resize", function() {...// 在此处重新调用即可
}

以下是具体写法：

循环渲染多个pie图，减少dom层的代码量

<divclass="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);
});