echarts自适应div大小 success

echarts如何根据div大小自动跟着变大小，今天做js控制div大小变化，发现div变了，到

window.onresize = Charts.curCharts.resize; 这个是根据窗体变得

这个问题也碰到过， 后面我是根据div变在重新setOption下

怎样使子div自适应父div的大小

在默认情况下（没有设置浮动或定位时），子级div元素本身宽度就是占满父级宽度的100%的。

如果还希望让子级div的高度占满父级，那么为子级div增加“height: 100%”的样式即可（前提是你的父级div存在固定高度）

echarts自适应

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

【变形图】

其原因是Echarts在初始化实例的时候，对应dom元素的宽高还没有确定。

解决方案也很简单：

监听对应dom元素，如果大小发生变化，调用 resize() 方法。

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

多个echarts图的话，则

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

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

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

参考：

ResizeObserver API ：

echarts如何实现宽度自适应

我是这样做的，直接给echart的div设置宽度。