简介:
有的时候我们为了让Echarts自适应容器宽度,把Echarts容器宽度设置为100%,使容器宽度变化的时候,图表宽度也跟着变化。但是我们发现容器宽度变化的时候,图表宽度并不会跟着变化。
今天我就遇到了一个Echarts宽度设置100%导致的Bug,最后通过分析解决了这个Bug。
问题发现:
我的Echart图表内嵌在elementUI的标签页里面(el-tabs),页面结构如下:
游戏设置是页面默认的tab
但是点击全局统计加载图表,发现图表的宽度不符合预期
分析:
在el-tabs中tab是通过display:none来实现切换的
所以第一次加载游戏设置(tab),全局统计(tab)的content被设置了display:none,content里面所有元素的宽高为0,那么由于图表容器设置了width:100%,这个时候图表容器宽高也是0,但是因为echart图标宽高最小为100px,这个时候echart图表宽高为100px。
当我们点击全局统计(tab)的时候,由于Echart图标只会初始化一次,当第一次加载游戏设置(tab)的时候已经被初始化了,所以这个时候,虽然全局统计的display:none效果消失,图表容器width:100%起作用的时候,echart图表宽高仍然为100px。
解决:
既然当图表容器大小发生变化的时候echart检测不到,所以我们对容器设置一个监听器怎么样?当容器大小变化的时候自动调整图表不就解决了?
由于在系统中我的窗口大小不会变化,但是某些DOM元素的大小是变化的于是我没有使用window.addEvenListen('resize',function)这个办法,这个事件监听器不能监听某些DOM元素大小的变化。
我用了ResizeObserver这个API,来监听容器大小变化,然后Resize图表。
这边之所以用比例,而不是用px来比较是因为,不同的电脑分辨率不同,将来可能会无法触发Resize。
最终效果如下