在父组件引入多个子组件(里面都是echarts图表)的时候,window.onresize()方法只会对最后一个组件里的图表产生效果,主要原因是组件加载顺序导致的,所以我们将window.onresize监听放到父组件去执行

父组件(图利为vue3写法,可自行换成vue2):

<echart1 ref="line" />
<echart2 ref="bar" />
const line = ref();
const bar = ref();
onMounted(() => {
  setTimeout(function () {
    // 监听屏幕变化,重置组件图表
    window.onresize = function () {
      line.value.resetCharts();
      bar.value.resetCharts();
    };
  }, 200);
});

子组件

// 在方法initCanvas中将myChart return出去,调用initCanvas方法
const resetCharts = () => {
   // 重置图表大小
   initCanvas().resize();
  };

Logo

前往低代码交流专区

更多推荐