vue項目中echarts自適應(yīng)問題的高級解決過程
一、問題描述
1.1 頁面布局
項目首頁中有多個echarts圖表，如下圖所示：
頁面布局如下：
index頁面（綠框）是父頁面，父頁面中包含A頁面（紅框）和B頁面（橙框），A頁面中有3塊，共5個echarts圖，B頁面中有2部分，左側(cè)部分中有3個餅圖，右側(cè)部分是列表，綜上，index頁面共8個ecahrts圖。ps：A頁面和B頁面都是組件化書寫。
1.2 問題復(fù)現(xiàn)
點(diǎn)擊瀏覽器右上角的 向下還原 按鈕后，圖表顯示不正確，如下圖：
原因：未進(jìn)行圖表自適應(yīng)
二、解決過程
2.1 增加圖表resize
window.addEventListener('resize', function () {
chart.resize()
})增加后，點(diǎn)擊瀏覽器向下還原按鈕后，效果如下：
這里有個奇怪的現(xiàn)象：點(diǎn)擊瀏覽器向下還原按鈕，圖表顯示有問題；但是鼠標(biāo)拖拽瀏覽器放大或縮小，圖表顯示正常（百思不得其解……）
通過Elements檢查發(fā)現(xiàn)，canvas畫布大小與容器大小不一致。ps：pink背景是容器大小
2.2 解決canvas畫布大小和容器大小不一致的問題
利用resize設(shè)置width、height：
// 獲取容器的寬高
let width = this.$refs.chart1.offsetWidth
let height= this.$refs.chart1.offsetHeight
// 一般這一步是寫chart1.resize()，讓圖表根據(jù)當(dāng)前屏幕尺寸自適應(yīng)，但是當(dāng)前canvas畫布大小與容器大小不一致，而容器大小已經(jīng)設(shè)置了百分比，所以可以在resize里面手動設(shè)置寬高，使其占滿整個容器
chart1.resize({
// es6解構(gòu)
width,
height
})每個圖表都設(shè)置，完成后效果如下：
依然顯示有問題，要崩潰了……
耐心再找找原因！??！
苦思冥想后，猜測有可能的原因：窗口改變時 EChart 會立即獲取寬度，但是此時寬度還在變化中，不是最終值，所以 ECharts 顯示有問題，修改方法是添加一個延時。
2.3 動手添加延時
window.addEventListener('resize', function () {
setTimeout(()=>{
chart1.resize()
}, 100)
})添加完成后，依然沒效果……
是不是延時時間設(shè)置的有點(diǎn)短？？？那就設(shè)置500毫秒試試，來吧
依然沒效果，生氣了
想想其他方法，苦思冥想中，有了，那我監(jiān)聽瀏覽器onresize事件可不可以？監(jiān)聽到后，重新渲染圖表
2.4 監(jiān)聽瀏覽器onresize事件
去掉每個圖表對resize事件的監(jiān)聽，在父組件中增加對onresize事件的監(jiān)聽。
let _this = this;
window.onresize = function() {
_this.$nextTick(()=>{
setTimeout(()=>{
_this.$refs.chartLine.executeAllChart1() // 重新渲染echarts的方法
if(_this.isCollectAdmin) {
_this.$refs.tableLine.executeAllChart2() // // 重新渲染echarts的方法
}
}, 500)
})
}添加完后，看效果：
哇偶，成功了！??????
注意事項，onresize事件的監(jiān)聽要放在父組件中，否則不會生效?。。。?/strong>
三、解決方案
1、在每個圖表中 利用resize設(shè)置width、height（本文2.2）
2、在父組件監(jiān)聽瀏覽器onresize事件（本文2.4），一定要加延時，否則不生效?。?！100毫秒不行，加500?。?！
over?。。?/p>
總結(jié)
到此這篇關(guān)于vue項目中echarts自適應(yīng)問題的高級解決過程的文章就介紹到這了,更多相關(guān)vue echarts自適應(yīng)問題內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue+ElementUI 中級聯(lián)選擇器Bug問題的解決
這篇文章主要介紹了Vue+ElementUI 中級聯(lián)選擇器Bug問題的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
很多情況下,進(jìn)入和退出vue界面,都沒有清除定時器,從而導(dǎo)致有很多定時器一起工作,這樣肯定是不行的,下面這篇文章主要給大家介紹了關(guān)于vue中清除定時器的方法,需要的朋友可以參考下2023-02-02
element-ui中select下拉框加載大數(shù)據(jù)渲染優(yōu)化方式
這篇文章主要介紹了element-ui中select下拉框加載大數(shù)據(jù)渲染優(yōu)化方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
解決vue create 創(chuàng)建項目只有兩個文件問題
這篇文章主要介紹了解決vue create 創(chuàng)建項目只有兩個文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
vue實(shí)現(xiàn)在線學(xué)生錄入系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)在線學(xué)生錄入系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
ElementUI日期選擇器時間選擇范圍限制的實(shí)現(xiàn)
在日常開發(fā)中，我們會遇到一些情況，限制日期的范圍的選擇，本文就詳細(xì)的介紹了ElementUI日期選擇器時間選擇范圍限制的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，感興趣的可以了解一下2022-04-04
從 vue2 升級到 vue3，vue3 是可以兼容 vue2 的，所以 vue3 可以采用 vue2 的選項式API。這篇文章主要介紹了vue3 setup() 高級用法,需要的朋友可以參考下2021-11-11
Vue實(shí)現(xiàn)下拉滾動加載數(shù)據(jù)的示例
這篇文章主要介紹了Vue實(shí)現(xiàn)下拉滾動加載數(shù)據(jù)的示例，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
從Element日期組件源碼中學(xué)到的兩個工具方法技巧
這篇文章主要介紹了從Element日期組件源碼中學(xué)到的兩個工具方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
本篇文章主要介紹了淺談vue路徑優(yōu)化之resolve，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10