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

首先说明，此方案仅针对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);
});