关于对echart盒子设置百分比读取的宽高没有撑开盒子解决方案

问题背景

当使用ecaht时，对echart对盒子使用百分比高宽。

在echart源码当中，调用init函数会自动创建canvas 默认设置画布高宽为当前盒子的高宽。

但这需要设定的dom盒子有具体的px像素盒子 例如

   <div ref="echart_pie1" style="width: 100px;height: 100px;" />
   
   
    const myEcharts = echarts.init(echart_pie1.value, null);

如果dom宽高设置百分比会导致渲染时，宽高并没有撑开。

dom设置百分白宽高时候的情况

解决方案

1.setTimeout(() => {
        const myEcharts = echarts.init(echart_pie1.value, null);
        myEcharts.setOption(option);
    }, 0)
    
    
  2.await nextTick()
    // setTimeout(() => {
    const myEcharts = echarts.init(echart_pie1.value, null);
    myEcharts.setOption(option);

核心原理，使用异步任务推慢创建canvas

问题原因

在浏览器渲染过程 html解析->CSS解析->layout->paint->分块->光栅化->画

常规来讲给定固定px像素的时候，在layout时期dom的宽高就固定了，这时候就是触发vue的onMounted周期

而百分比因为不固定，这时候的dom元素宽高是默认宽高，需要根据父盒子去进行计算，从而导致这时候拿到的宽高并不是能够撑满盒子的宽高