一、問(wèn)題描述

1.1 頁(yè)面布局

項(xiàng)目首頁(yè)中有多個(gè)echarts圖表，如下圖所示：

頁(yè)面布局如下：

 index頁(yè)面（綠框）是父頁(yè)面，父頁(yè)面中包含A頁(yè)面（紅框）和B頁(yè)面（橙框），A頁(yè)面中有3塊，共5個(gè)echarts圖，B頁(yè)面中有2部分，左側(cè)部分中有3個(gè)餅圖，右側(cè)部分是列表，綜上，index頁(yè)面共8個(gè)ecahrts圖。ps：A頁(yè)面和B頁(yè)面都是組件化書(shū)寫(xiě)。

1.2 問(wèn)題復(fù)現(xiàn) 

點(diǎn)擊瀏覽器右上角的 向下還原 按鈕后，圖表顯示不正確，如下圖：

原因：未進(jìn)行圖表自適應(yīng)

二、解決過(guò)程

2.1 增加圖表resize

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

增加后，點(diǎn)擊瀏覽器向下還原按鈕后，效果如下：

 這里有個(gè)奇怪的現(xiàn)象：點(diǎn)擊瀏覽器向下還原按鈕，圖表顯示有問(wèn)題；但是鼠標(biāo)拖拽瀏覽器放大或縮小，圖表顯示正常（百思不得其解……）

通過(guò)Elements檢查發(fā)現(xiàn)，canvas畫(huà)布大小與容器大小不一致。ps：pink背景是容器大小

2.2 解決canvas畫(huà)布大小和容器大小不一致的問(wèn)題

利用resize設(shè)置width、height：

// 獲取容器的寬高
let width = this.$refs.chart1.offsetWidth
let height= this.$refs.chart1.offsetHeight
// 一般這一步是寫(xiě)chart1.resize()，讓圖表根據(jù)當(dāng)前屏幕尺寸自適應(yīng)，但是當(dāng)前canvas畫(huà)布大小與容器大小不一致，而容器大小已經(jīng)設(shè)置了百分比，所以可以在resize里面手動(dòng)設(shè)置寬高，使其占滿(mǎn)整個(gè)容器
chart1.resize({
   // es6解構(gòu)
   width,
   height
})

每個(gè)圖表都設(shè)置，完成后效果如下：

 依然顯示有問(wèn)題，要崩潰了……

耐心再找找原因！?。?/p>

苦思冥想后，猜測(cè)有可能的原因：窗口改變時(shí) EChart 會(huì)立即獲取寬度，但是此時(shí)寬度還在變化中，不是最終值，所以 ECharts 顯示有問(wèn)題，修改方法是添加一個(gè)延時(shí)。

2.3 動(dòng)手添加延時(shí)

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

添加完成后，依然沒(méi)效果……

是不是延時(shí)時(shí)間設(shè)置的有點(diǎn)短？？？那就設(shè)置500毫秒試試，來(lái)吧

依然沒(méi)效果，生氣了

想想其他方法，苦思冥想中，有了，那我監(jiān)聽(tīng)瀏覽器onresize事件可不可以？監(jiān)聽(tīng)到后，重新渲染圖表

2.4 監(jiān)聽(tīng)瀏覽器onresize事件

去掉每個(gè)圖表對(duì)resize事件的監(jiān)聽(tīng)，在父組件中增加對(duì)onresize事件的監(jiān)聽(tīng)。

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

 添加完后，看效果：

哇偶，成功了！??????

注意事項(xiàng)，onresize事件的監(jiān)聽(tīng)要放在父組件中，否則不會(huì)生效?。。?！

三、解決方案

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

2、在父組件監(jiān)聽(tīng)瀏覽器onresize事件（本文2.4），一定要加延時(shí)，否則不生效?。?！100毫秒不行，加500?。?！

over?。。?/p>

總結(jié)

到此這篇關(guān)于vue項(xiàng)目中echarts自適應(yīng)問(wèn)題的高級(jí)解決過(guò)程的文章就介紹到這了,更多相關(guān)vue echarts自適應(yīng)問(wèn)題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論