在使用echarts时,为了兼容移动端.使用了flxe布局

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

一下问题相似

在了解echarts绘制机制

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

考虑让echarts延迟绘制 使用setTimeout

原先代码

        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框架.使用其他技术的同学也可以参考一下,求赞