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 框架. 使用其他技术的同学也可以参考一下, 求赞有不对的地方欢迎指正. 代码还有优化点