React开发中Echarts渲染机制影响图表继承父级宽高

最新推荐文章于 2024-06-12 09:33:10 发布

Peculiar person

最新推荐文章于 2024-06-12 09:33:10 发布

阅读量393

点赞数

文章标签： react.js echarts 前端

本文链接：https://blog.csdn.net/l125656/article/details/132740474

版权

问题描述：
前端开发在使用echarts图表时，偶尔会出现超出或不足父级容器宽度或高度的情况。
情景：给echarts设置了100%宽高，父容器设置了固定的宽高，出现图表占满不了父容器或者溢出容器的情况。如图。
原因：
一般不是因为图表绘制的方法调用问题，而是绘制渲染时机出现了问题，我们知道，React渲染页面需要时间，要在页面调用echarts.init()，并且给图表设置配置项chart.setOption(option)。
调用echarts api生成图表的时机发生在componentDidMount这个生命周期。在页面echarts绘制完成之后进行操作，发现有可能会出现元素虽然挂载了，但是布局还未完成的情况。这就导致图表元素显示超出父级容器很多，同时地，F12可以看到echarts元素的宽高度发生了明显的变化。
为什么会出现这种情况？父级元素还没有layout的时候，图表就开始生成，这个时候宽度和高度就不受默认布局的影响，而是会找到一个已经布局的大的父级元素作为父级，等真正的父级layout完毕，就超出了图表本身的父级容器。
解决：
```
setTimeout(() => { this.initChart() }, 20)
```
在componentDidMount生命周期内异步调用初始化图表函数。等父容器设置完宽高布局完成之后图表加载。
发现这个bug的解决方法是在,当我拖动浏览器页面时,图表又能自己撑满父级。可以推断出是因为React渲染时间的问题。一般而言，在使用vue或者react都会容易出现这个问题，原因是我们的模板文件不是一开始就生在html页面中，而是需要经过人为渲染，渲染需要时间，图表生成的时机有可能会早于父级元素layout的时机，尤其当我们使用自适应布局的时候会出现。