echarts超出容器宽度和自适应的解决办法

在使用echarts时,为了兼容移动端.使用了flxe布局
出现echarts超出父盒子宽度的问题

可以看出来echarts溢出了父盒子

一下问题相似

https://segmentfault.com/q/10...

https://segmentfault.com/q/10...

在了解echarts绘制机制

echarts图形只绘制一次,且绘制时自动获取父级大小填写宽度

考虑让echarts延迟绘制 使用setTimeout

原先代码

mounted(){this.myMap()}

修改后

mounted(){setTimeout(()&＃61;>{this.myMap()}}

配置&＃96;

myMap(){let myMap&＃61;echarts.init(document.querySelector(&＃39;#myMap&＃39;))myMap.setOption({})}


效果图:

关于自适应的问题

首先要明白echarts只绘制一次,理清思路.适应大小那么echarts重绘

代码修改

mounted(){const that&＃61;thissetTimeout(()&＃61;>{this.myMap&＃61;echarts.init(document.querySelector(&＃39;#myMap&＃39;))this.setMap()})window.onresize&＃61; () &＃61;> {that.myMap.resize()}}//修改了配置方法的名称myMap&＃61;>setMap

setMap(){this.myMap&＃61;echarts.init(document.querySelector(&＃39;#myMap&＃39;))this.myMap.setOption({})}

我使用的是vue框架.使用其他技术的同学也可以参考一下,求赞
有不对的地方欢迎指正.代码还有优化点