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框架.使用其餘技術的同窗也能夠參考一下,求贊有不對的地方歡迎指正.代碼還有優化點