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

在使用echarts时,为了兼容移动端.使用了flxe布局出现echarts超出父盒子宽度的问题可以看出来echarts溢出了父盒子一下问题相似https://segmentfault.com/q/10…https://segmentfault.com/q/10…在了解echarts绘制机制echarts图形只绘制一次,且绘制时自动获取父级大小填写宽度考虑让echarts延迟绘制 使用setTimeout原先代码 <template> <div id=“myMap” style=“width:100%; height:500px” ></div> </template> mounted(){ this.myMap() }修改后 mounted(){ setTimeout(()=>{ this.myMap() } }效果图:关于自适应的问题首先要明白echarts只绘制一次,理清思路.适应大小那么echarts重绘代码修改 mounted(){ const that=this setTimeout(()=>{ this.myMap=echarts.init(document.querySelector(’#myMap’)) this.setMap() }) window.onresize= () => { that.myMap.resize() } } //修改了配置方法的名称myMap=>setMap看了很多帖子都没有解决这2个问题的回答.就自己写了我使用的是vue框架.使用其他技术的同学也可以参考一下,求赞有不对的地方欢迎指正.代码还有优化点