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

真夜2026-03-23 17:51

问题背景

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

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

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

js 复制代码

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

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

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

解决方案

js 复制代码

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