echarts超出容器寬度和自適應的解決辦法

jerryloveemily 發布于2019-08-23 14:38 / 866人閱讀

摘要：在使用時為了兼容移動端使用了布局出現超出父盒子寬度的問題可以看出來溢出了父盒子一下問題相似在了解繪制機制圖形只繪制一次且繪制時自動獲取父級大小填寫寬度考慮讓延遲繪制使用原先代碼修改后配置效果圖關于自適應的問題首先要明白只繪制一次理清思路適應

在使用echarts時,為了兼容移動端.使用了flxe布局
出現echarts超出父盒子寬度的問題

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

一下問題相似

https://segmentfault.com/q/10...

在了解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框架.使用其他技術的同學也可以參考一下,求贊
有不對的地方歡迎指正.代碼還有優化點

容器云 html的寬度自適應的解決辦法 html超出寬度換行微軟的解決辦法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100906.html

微信小程序開發中遇到的問題及解決辦法：微信小程序ad自適應布局（二）

摘要：問題添加微信廣告的小程序在正式上線并且通過審查后，如果有除了純展示的其他需求，比如需要點擊觀看廣告秒才能領取獎勵。場景：微信小程序中添加廣告，可以是微信廣告和自定義廣告的自適應布局；問題：微信廣告在小屏（比如：320）手機上或是設置ad組件父組件寬度小于300px，內容會超出布局范圍；截圖效果：showImg(https://segmentfault.com/img/bVbq...

Freeman 2019-08-02 16:11 評論0 收藏0
微信小程序開發中遇到的問題及解決辦法：微信小程序ad自適應布局（二）

摘要：問題添加微信廣告的小程序在正式上線并且通過審查后，如果有除了純展示的其他需求，比如需要點擊觀看廣告秒才能領取獎勵。場景：微信小程序中添加廣告，可以是微信廣告和自定義廣告的自適應布局；問題：微信廣告在小屏（比如：320）手機上或是設置ad組件父組件寬度小于300px，內容會超出布局范圍；截圖效果：showImg(https://segmentfault.com/img/bVbq...

tanglijun 2019-08-23 16:46 評論0 收藏0
移動端樣式小技巧

摘要：平時在移動端開發拼頁面的過程中總會遇到一些問題，主要是各手機樣式顯示效果不一致造成的。五左右寬度自適應第四個小技巧結尾，圖中的布局實際上是分左右兩塊的，依照的需求，文案是要左對齊，數字是要右對齊的。平時在移動端開發拼頁面的過程中總會遇到一些問題，主要是各手機webview樣式顯示效果不一致造成的。以下總結了一些常見坑和一些小技巧，希望對看官有所幫助！本文只針對兩大手機陣營 Andr...

iOS122 2019-08-29 11:05 評論0 收藏0
移動端樣式小技巧

摘要：平時在移動端開發拼頁面的過程中總會遇到一些問題，主要是各手機樣式顯示效果不一致造成的。五左右寬度自適應第四個小技巧結尾，圖中的布局實際上是分左右兩塊的，依照的需求，文案是要左對齊，數字是要右對齊的。平時在移動端開發拼頁面的過程中總會遇到一些問題，主要是各手機webview樣式顯示效果不一致造成的。以下總結了一些常見坑和一些小技巧，希望對看官有所幫助！本文只針對兩大手機陣營 Andr...

lufficc 2019-08-20 10:14 評論0 收藏0