Echarts图表变形与自适应解决方案

Posted 2023-03-15

参考技术A

使用Echarts绘制图表时，可能会遇到变形的问题。如下图：

其原因是Echarts在初始化实例的时候，对应dom元素的宽高还没有确定。
解决方案也很简单：
监听对应dom元素，如果大小发生变化，调用 resize() 方法。

自适应是浏览器窗口变化的时候，echarts图表大小能够相应的变化。可通过监听浏览器窗口实现。

多个echarts图的话，则

个别时候，也会遇到 myChart1 与 myaChart2 不在同一个作用域内，如果多次调用 window.onresize() ，后一个将会覆盖掉前一个。如下：

这时，可以使用 window.addEventListener(\'resize\', callback) 来避免监听被覆盖：

当然，也可以跟最上面的处理一样，使用 ResizeObserver 分别监听对应dom元素，调用 resize() 解决。

参考：
ResizeObserver API ： https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver