資訊專欄INFORMATION COLUMN
摘要：在使用時為了兼容移動端使用了布局出現(xiàn)超出父盒子寬度的問題可以看出來溢出了父盒子一下問題相似在了解繪制機制圖形只繪制一次且繪制時自動獲取父級大小填寫寬度考慮讓延遲繪制使用原先代碼修改后配置效果圖關(guān)于自適應(yīng)的問題首先要明白只繪制一次理清思路適應(yīng)
在使用echarts時,為了兼容移動端.使用了flxe布局
出現(xiàn)echarts超出父盒子寬度的問題
可以看出來echarts溢出了父盒子
一下問題相似
https://segmentfault.com/q/10...
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({})
}
效果圖:
關(guān)于自適應(yīng)的問題
首先要明白echarts只繪制一次,理清思路.適應(yīng)大小那么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框架.使用其他技術(shù)的同學(xué)也可以參考一下,求贊
有不對的地方歡迎指正.代碼還有優(yōu)化點
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/100906.html
摘要：問題添加微信廣告的小程序在正式上線并且通過審查后，如果有除了純展示的其他需求，比如需要點擊觀看廣告秒才能領(lǐng)取獎勵。 場景：微信小程序中添加廣告，可以是微信廣告和自定義廣告的自適應(yīng)布局； 問題：微信廣告在小屏（比如：320）手機上或是設(shè)置ad組件父組件寬度小于300px，內(nèi)容會超出布局范圍； 截圖效果：showImg(https://segmentfault.com/img/bVbq...
摘要：問題添加微信廣告的小程序在正式上線并且通過審查后，如果有除了純展示的其他需求，比如需要點擊觀看廣告秒才能領(lǐng)取獎勵。 場景：微信小程序中添加廣告，可以是微信廣告和自定義廣告的自適應(yīng)布局； 問題：微信廣告在小屏（比如：320）手機上或是設(shè)置ad組件父組件寬度小于300px，內(nèi)容會超出布局范圍； 截圖效果：showImg(https://segmentfault.com/img/bVbq...
閱讀 2492·2021-09-29 09:34
閱讀 3353·2021-09-23 11:21
閱讀 2528·2021-09-06 15:00
閱讀 1148·2019-08-30 15:44
閱讀 2052·2019-08-29 17:23
閱讀 3025·2019-08-29 16:44
閱讀 3082·2019-08-29 13:13
閱讀 1964·2019-08-28 18:12
