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()
       }
    }

配置`

myMap(){
    let myMap=echarts.init(document.querySelector('#myMap'))
    myMap.setOption({})
    }

效果图:

关于自适应的问题

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

代码修改

mounted(){
      const that=this
      setTimeout(()=>{
        this.myMap=echarts.init(document.querySelector('#myMap'))
        this.setMap()
      })
      window.onresize= () => {
        that.myMap.resize()
      }
    }
    //修改了配置方法的名称myMap=>setMap

setMap(){
        this.myMap=echarts.init(document.querySelector('#myMap'))
        this.myMap.setOption({})
        }

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