echarts容器不匹配问题

问题背景

当正常加载的时候echarts能够正常跟随父容器进行适配，但是刷新时echarts将会超过父容器宽度

问题分析

有可能的是刷新的绘制机制与正常加载不同，导致了超出预料的加载顺序。因此echarts组件渲染时没能拿到正确的父容器宽度。

如果是这样，那么只需要延迟子组件的加载就完全可以避免刷新异常了

解决方案

 // 原先代码
 <ReactEcharts
     option={chartsOptions}
     key={JSON.stringify(chartsOptions)}
  />


// 更改后代码
const chartsOptions = useComputeOptions({ props, callback })

const [chartIsReady, setChartIsReady] = useState(false)

useEffect(() => {
   setChartIsReady(true)
}, [])

return chartIsReady ? (
   <ReactEcharts
       option={chartsOptions}
       key={JSON.stringify(chartsOptions)}
    />
) : null

问题结论

经过实验发现延迟加载后echarts即使刷新后也能正确匹配父容器的宽度，可以说是验证了以上推论：

导致刷新后不匹配的原因是，echarts组件渲染时没能拿到正确的父容器宽度