問題
項(xiàng)目中側(cè)邊欄折疊展開后, echarts圖寬度不變, 代碼如下
// 監(jiān)聽側(cè)邊欄變化
watch: {
sidebar: {
handler() {
this.handleResize()
},
deep: true
},
},
methods: {
// 因?yàn)闀?huì)多次用到重繪echarts,所以封裝為一個(gè)方法
handleResize() {
this.$nextTick(() => {
if (this.chart) {
this.chart.resize()
}
})
}
}
效果如下圖:
image.png
解決方法
// 在監(jiān)聽事件中添加一個(gè)setTimeout延時(shí)器
watch: {
sidebar: {
handler() {
setTimeout(() => {
this.handleResize()
}, 300)
},
deep: true
},
},
[注]: 為啥加一個(gè)setTimeout延時(shí)器會(huì)生效 主要是因?yàn)橄到y(tǒng)側(cè)邊欄折疊展開做了過渡動(dòng)畫义郑，基本上是幾毫秒（這個(gè)多少時(shí)間在代碼中進(jìn)行覆蓋喳坠，element默認(rèn)好像是小于300ms），所以這時(shí)候不加延時(shí)器脱茉，echarts重繪得時(shí)候它得一個(gè)寬度還未變化結(jié)束剪芥，所以加一個(gè)setTimeout，不然沒什么效果琴许，如果側(cè)邊欄不做過渡動(dòng)畫就無需加延時(shí)器税肪。
后續(xù)優(yōu)化
通過加延時(shí)器的確可以解決echarts重繪的問題,，但實(shí)際效果不理想榜田。 因?yàn)榧恿搜訒r(shí)300ms益兄， 導(dǎo)致在側(cè)邊欄折疊展開時(shí)echarts圖會(huì)有肉眼可見的閃一下。個(gè)人感覺用戶體驗(yàn)不是很好箭券，后來突然想到可以通過監(jiān)聽echarts外的父容器來動(dòng)態(tài)對(duì)echarts進(jìn)行重繪净捅，說做就做！<br />通過父容器的resize事件辩块，動(dòng)態(tài)監(jiān)聽欄目的寬度變化蛔六，后來在網(wǎng)上找到了一個(gè)插件：element-resize-detector 荆永，可以對(duì)頁面指定元素進(jìn)行監(jiān)聽，如下：
// 安裝依賴包
npm install element-resize-detector -S
import elementResizeDetectorMaker from "element-resize-detector"
mounted() {
const _this = this
const erd = elementResizeDetectorMaker()
erd.listenTo(document.getElementById('bottom'), element => {
_this.$nextTick(() => {
// 監(jiān)聽到事件后執(zhí)行的業(yè)務(wù)邏輯
this.handleResize()
})
})
},
總結(jié)： 這種方式解決了第一總方式抖動(dòng)的問題国章，雖然相對(duì)來說性能消耗大一點(diǎn)具钥，但和好的用戶體驗(yàn)相比可以接受，個(gè)人遇到問題思路如下：發(fā)現(xiàn)問題-->分析問題 --> 解決問題 -->優(yōu)化解決方案
