echarts報錯Cannot?read?properties?of?null?(reading?‘getAttribute‘)的解決

更新時間：2023年01月17日 09:50:51 作者：水星記_

最近在開發(fā)Echarts忽然遇到了個問題,這篇文章主要給大家介紹了關于echarts報錯Cannot?read?properties?of?null?(reading?‘getAttribute‘)的解決方法,需要的朋友可以參考下

前言

最近在寫 echarts 的時候碰到了這么一個報錯，如下圖。造成報錯的原因是因為 echarts 的圖形容器還未生成就對其進行了初始化，下面幾種方法是經本人自測最有效的解決方案。

報錯截圖

解決方案：

1. this.$nextTick

該方法思路是將回調延遲到下次 DOM 更新循環(huán)之后執(zhí)行。在修改數據之后立即使用它，然后等待 DOM 更新。

this.$nextTick(() => {
  this.chartPort();
});

2. created(){}

將 created(){} 生命周期中的方法放在 mounted(){} 生命周期中，該方法思路是因為數據渲染方法放到了 created(){} 生命周期中，但是數據還未取到，頁面已經加載了，故放在 mounted(){} 生命周期中，在初始化頁面完成后，再對 DOM 節(jié)點進行相關操作。

mounted() {
    this.chartPort();
},

3. document.readyState

document.readyState 方法主要是描述了文檔的加載狀態(tài)，以下是它的三種類型值：

值	描述
loading	加載中
interactive	文檔已經完成加載且已被解析，但是類似圖像，樣式表和框架之類的子資源仍在加載。
complete	加載完成

當這個屬性的值變化時，document 對象上的 readystatechange 事件就會觸發(fā)。因此我們可以借助此特性讓圖表方法在頁面渲染完成后在觸發(fā)。

mounted() {
  var that = this;//防止this指向問題
  var timer = setInterval(function () {
    // 判斷頁面所有資源已加載完畢
    if (document.readyState === "complete") {
      that.chartPort();//執(zhí)行方法
      window.clearInterval(timer);
    }
  }, 800);
},

總結

到此這篇關于echarts報錯Cannot read properties of null (reading ‘getAttribute‘)解決的文章就介紹到這了,更多相關echarts報錯Cannot read properties of null內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: