vue項目中echarts自適應問題的高級解決過程

一、問題描述

1.1 頁面佈局

項目首頁中有多個echarts圖表,如下圖所示:

頁面佈局如下:

 index頁面(綠框)是父頁面,父頁面中包含A頁面(紅框)和B頁面(橙框),A頁面中有3塊,共5個echarts圖,B頁面中有2部分,左側部分中有3個餅圖,右側部分是列表,綜上,index頁面共8個ecahrts圖。ps:A頁面和B頁面都是組件化書寫。

1.2 問題復現 

點擊瀏覽器右上角的 向下還原 按鈕後,圖表顯示不正確,如下圖:

原因:未進行圖表自適應

二、解決過程

2.1 增加圖表resize

window.addEventListener('resize', function () {
  chart.resize()
})

增加後,點擊瀏覽器向下還原按鈕後,效果如下:

 這裡有個奇怪的現象:點擊瀏覽器向下還原按鈕,圖表顯示有問題;但是鼠標拖拽瀏覽器放大或縮小,圖表顯示正常(百思不得其解……)

通過Elements檢查發現,canvas畫佈大小與容器大小不一致。ps:pink背景是容器大小

2.2 解決canvas畫佈大小和容器大小不一致的問題

利用resize設置width、height:

// 獲取容器的寬高
let width = this.$refs.chart1.offsetWidth
let height= this.$refs.chart1.offsetHeight
// 一般這一步是寫chart1.resize(),讓圖表根據當前屏幕尺寸自適應,但是當前canvas畫佈大小與容器大小不一致,而容器大小已經設置瞭百分比,所以可以在resize裡面手動設置寬高,使其占滿整個容器
chart1.resize({
   // es6解構
   width,
   height
})

每個圖表都設置,完成後效果如下:

 依然顯示有問題,要崩潰瞭……

耐心再找找原因!!!

苦思冥想後,猜測有可能的原因:窗口改變時 EChart 會立即獲取寬度,但是此時寬度還在變化中,不是最終值,所以 ECharts 顯示有問題,修改方法是添加一個延時。

2.3 動手添加延時

window.addEventListener('resize', function () {
  setTimeout(()=>{
     chart1.resize()
  }, 100)
})

添加完成後,依然沒效果……

是不是延時時間設置的有點短???那就設置500毫秒試試,來吧

依然沒效果,生氣瞭

想想其他方法,苦思冥想中,有瞭,那我監聽瀏覽器onresize事件可不可以?監聽到後,重新渲染圖表

2.4 監聽瀏覽器onresize事件

去掉每個圖表對resize事件的監聽,在父組件中增加對onresize事件的監聽。

let _this = this;
window.onresize = function() {
  _this.$nextTick(()=>{
    setTimeout(()=>{
      _this.$refs.chartLine.executeAllChart1() // 重新渲染echarts的方法
      if(_this.isCollectAdmin) {
        _this.$refs.tableLine.executeAllChart2() // // 重新渲染echarts的方法
      }
    }, 500)
  })
}

 添加完後,看效果:

哇偶,成功瞭!👏👏👏

註意事項,onresize事件的監聽要放在父組件中,否則不會生效!!!!

三、解決方案

1、在每個圖表中 利用resize設置width、height(本文2.2)

2、在父組件監聽瀏覽器onresize事件(本文2.4),一定要加延時,否則不生效!!!100毫秒不行,加500!!!

over!!!

總結

到此這篇關於vue項目中echarts自適應問題的高級解決過程的文章就介紹到這瞭,更多相關vue echarts自適應問題內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: