草庐IT

解决echarts报错Cannot read properties of null (reading ‘getAttribute‘)

水星记_ 2023-09-13 原文

前言

最近在写 echarts 的时候碰到了这么一个报错，如下图。造成报错的原因是因为 echarts 的图形容器还未生成就对其进行了初始化，下面几种方法是经本人自测最有效的解决方案。

报错截图

解决方案：

1. this.$nextTick

该方法思路是将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。

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

2. created(){}

将 created(){} 生命周期中的方法放在 mounted(){} 生命周期中，该方法思路是因为数据渲染方法放到了 created(){} 生命周期中，但是数据还未取到，页面已经加载了，故放在 mounted(){} 生命周期中，在初始化页面完成后，再对 DOM 节点进行相关操作。

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

3. document.readyState

document.readyState 方法主要是描述了文档的加载状态，以下是它的三种类型值：

值描述
loading加载中
interactive文档已经完成加载且已被解析，但是类似图像，样式表和框架之类的子资源仍在加载。
complete加载完成

当这个属性的值变化时，document 对象上的 readystatechange 事件就会触发。因此我们可以借助此特性让图表方法在页面渲染完成后在触发。

mounted() {
  var that = this;//防止this指向问题
  var timer = setInterval(function () {
    // 判断页面所有资源已加载完毕
    if (document.readyState === "complete") {
      that.chartPort();//执行方法
      window.clearInterval(timer);
    }
  }, 800);
},
lsquogetAttributespanclasstoken前端echarts

有关解决echarts报错Cannot read properties of null (reading ‘getAttribute‘)的更多相关文章

  1. ruby CSV : How can I read a tab-delimited file? - 2

    CSV.open(name,"r").eachdo|row|putsrowend我得到以下错误:CSV::MalformedCSVErrorUnquotedfieldsdonotallow\ror\n文件名是一个.txt制表符分隔文件。我是专门做的。我有一个.csv文件，我转到excel，并将文件保存为.txt制表符分隔的文件。所以它是制表符分隔的。CSV.open不应该能够读取制表符分隔的文件吗？ 最佳答案 尝试像这样指定字段分隔符:CSV.open("name","r",{:col_sep=>"\t"}).eachdo|row|

  2. 屏幕录制为什么没声音？检查这2项，轻松解决 - 2

    相信很多人在录制视频的时候都会遇到各种各样的问题，比如录制的视频没有声音。屏幕录制为什么没声音？今天小编就和大家分享一下如何录制音画同步视频的具体操作方法。如果你有录制的视频没有声音，你可以试试这个方法。 一、检查是否打开电脑系统声音相信很多小伙伴在录制视频后会发现录制的视频没有声音，屏幕录制为什么没声音？如果当时没有打开音频录制，则录制好的视频是没有声音的。因此，建议在录制前进行检查。屏幕上没有声音，很可能是因为你的电脑系统的声音被禁止了。您只需打开电脑系统的声音，即可录制音频和图画同步视频。操作方法：步骤1：点击电脑屏幕右下侧的“小喇叭”图案，在上方的选项中，选择“声音”。 步骤2：在“声

  3. 【高数】用拉格朗日中值定理解决极限问题 - 2

    首先回顾一下拉格朗日定理的内容：函数f(x)是在闭区间[a,b]上连续、开区间(a,b)上可导的函数，那么至少存在一个，使得:通过这个表达式我们可以知道，f(x)是函数的主体，a和b可以看作是主体函数f(x)中所取的两个值。那么可以有，  也就意味着我们可以用来替换 这种替换可以用在求某些多项式差的极限中。方法： 外层函数f(x)是一致的，并且h(x)和g(x)是等价无穷小。此时，利用拉格朗日定理，将原式替换为 ，再进行求解，往往会省去复合函数求极限的很多麻烦。使用要注意：1.要先找到主体函数f(x)，即外层函数必须相同。2.f(x)找到后，复合部分是等价无穷小。3.要满足作差的形式。如果是加

  4. 深度学习部署：Windows安装pycocotools报错解决方法 - 2

    深度学习部署：Windows安装pycocotools报错解决方法1.pycocotools库的简介2.pycocotools安装的坑3.解决办法更多Ai资讯：公主号AiCharm本系列是作者在跑一些深度学习实例时，遇到的各种各样的问题及解决办法，希望能够帮助到大家。ERROR:Commanderroredoutwithexitstatus1:'D:\Anaconda3\python.exe'-u-c'importsys,setuptools,tokenize;sys.argv[0]='"'"'C:\\Users\\46653\\AppData\\Local\\Temp\\pip-instal

  5. ruby - File.read ("| echo mystring") 是如何工作的？ - 2

    我在我正在处理的一些代码中发现了这一点。它旨在解决从磁盘读取key文件的要求。在生产环境中，key文件的内容位于环境变量中。旧代码:key=File.read('path/to/key.pem')新代码:key=File.read('|echo$KEY_VARIABLE')这是如何工作的？ 最佳答案 来自IOdocs:Astringstartingwith“|”indicatesasubprocess.Theremainderofthestringfollowingthe“|”isinvokedasaprocesswithappro

  6. ruby - 如何通过 Rubocop 指示打开 & :read as argument to File. - 2

    我有这个代码File.open(file_name,'r'){|file|file.read}但是Rubocop发出警告:Offenses:Style/SymbolProc:Pass&:readasargumenttoopeninsteadofablock.你是怎么做到的？ 最佳答案 我刚刚创建了一个名为“t.txt”的文件，其中包含“Hello,World\n”。我们可以按如下方式阅读。File.open('t.txt','r',&:read)#=>"Hello,World\n"顺便说一下，由于第二个参数的默认值是'r'，所以这样

  7. ruby - Chef : Read variable from file and use it in one converge - 2

    我有以下代码，它下载一个文件，然后将文件的内容读入一个变量。使用该变量，它执行一个命令。这个配方不会收敛，因为/root/foo在编译阶段不存在。我可以通过多个聚合和一个来解决这个问题ifFile.exist但我想用一个收敛来完成它。关于如何做到这一点有什么想法吗？execute'download_joiner'docommand"awss3cps3://bucket/foo/root/foo"not_if{::File.exist?('/root/foo')}endpassword=::File.read('/root/foo').chompexecute'join_domain'd

  8. ruby - 如何更快地解决 project euler #21？ - 2

    原始问题Letd(n)bedefinedasthesumofproperdivisorsofn(numberslessthannwhichdivideevenlyinton).Ifd(a)=bandd(b)=a,whereab,thenaandbareanamicablepairandeachofaandbarecalledamicablenumbers.Forexample,theproperdivisorsof220are1,2,4,5,10,11,20,22,44,55and110;therefored(220)=284.Theproperdivisorsof284are1,2,

  9. Ruby:read_timeout 和 open_timeout 之间的区别 - 2

    标题本身就说明了......read_timeout和open_timeout之间有什么区别？ 最佳答案 open_timeout是您愿意等待“打开连接”的时间。在TCP上下文中，在放弃尝试并引发超时错误之前等待握手完成的时间量。read_timeout您可能会猜到，是您愿意等待从连接方接收到某些数据的时间。一个例子可能会清楚地说明这一点:在SOAPoverHTTPoverTCP上下文中(简化):您尝试与服务器建立TCP连接。如果建立连接的时间比open_timeout长，则放弃连接尝试并引发/发出/返回超时错误。如果连接成功，您发

  10. ruby - 为什么这些方法没有解决？ - 2

    这个问题在这里已经有了答案:WhydoRubysettersneed"self."qualificationwithintheclass?(3个答案)关闭29天前。给定这段代码:classSomethingattr_accessor:my_variabledefinitialize@my_variable=0enddeffoomy_variable=my_variable+3endends=Something.news.foo我收到这个错误:test.rb:9:in`foo':undefinedmethod`+'fornil:NilClass(NoMethodError)fromtes

随机推荐