报错信息如下:

报错代码:

mounted() {
// ...
this.drwaCharts() // drawCharts方法为自己定义的包含渲染 echarts 图表的方法
// ...
}

之前一直用 echarts 没有出现过这个问题,所以当这个问题出现时我就开始了各种查,试了几种方法依旧报错,比如:

1、在mounted() {},使用 $nextTick:(依旧报错)

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

2、使用 setTimeout 包裹: (依旧报错)

setTimeout(() => {
   this.drawCharts()
}, 1000);

3、正确的方法

因为我在包裹echarts标签的最外层加了v-if,所以导致了报错,只要把v-if改成v-show就可以了~


以上解决方法来自 https://www.cnblogs.com/carriezhao/p/11434998.html


原因分析

报错地点:

在放 echarts 图表的 div 使用了 v-if 指令,在绑定的值为 false 时会报此错,而值为 true 时候不会报错。

原因分析:

我们都知道,在切换显示与隐藏很少的情况下,使用 v-if 会性能更好,所以我根据实际情况首先选择了 v-if 指令。但是因为隐藏的时候, v-if 会使整个 dom 节点不渲染,而 v-show 只是给 dom 节点加了 display: none;属性,节点依然存在 。所以在这种特殊的情况下,由于 v-if 值为 false 时候mounted 中画图的方法依然会执行,在获取 dom 节点时获取不到,所以就会导致报错。

在vue中使用echarts报错Cannot read property getAttribute of null的更多相关文章

  1. 记录下vue 中引用echarts 出现 "TypeError: Cannot read property 'getAttribute' of undefined"问题

    今天做项目,用echarts展示数据 ,自己测试 先测试 了下.写的代码html: <div ref="myChart" style="height:300px;w ...

  2. echarts js报错 Cannot read property 'getAttribute' of null

    本文将为您描述如何解决 eharts.js报错 Uncaught TypeError: Cannot read property 'getAttribute' of null 的问题 根据报错信息查找 ...

  3. vue中使用JSX报错,如何解决

    Support for the experimental syntax 'jsx' isn't currently enabled (32:12): 30 | }, 31 | render() { & ...

  4. js执行函数报错Cannot set property 'value' of null怎么解决?

    js执行函数报错Cannot set property 'value' of null 的解决方案: 原因:dom还没有完全加载 第一步:所以js建议放在body下面执行, 第二步:window.on ...

  5. hexo 报错 Cannot read property 'replace' of null

    详细错误信息: FATAL Cannot read property 'replace' of null TypeError: Cannot read property 'replace' of nu ...

  6. vue中npm install 报错之一

    报错原因: 这是因为文件phantomjs-2.1.1-windows.zip过大,网络不好,容易下载失败 PhantomJS not found on PATH 解决方案一: 选择用cnpm ins ...

  7. Vue tools开发工具报错Cannot read property '__VUE_DEVTOOLS_UID__' of undefined

    使用 vue tools 开发工具,不显示调试面板中的组件,点击控制台报错: Cannot read property 'VUE_DEVTOOLS_UID' of undefined 在 main.j ...

  8. echarts报错Cannot read property 'features' of undefined

    引入地图的时候 echarts2报错: Uncaught Error: [MODULE_MISS]"echarts/src/util/mapData/params" is not ...

  9. 报错”Cannot read property 'addEventListener' of null“

    1.报错:Cannot read property 'addEventListener' of null 2.解决方案: 把代码放到window.onload=function(){...}里面,因为 ...

随机推荐

  1. 解决用vscode开发arduino时Serial未定义

    在工作目录编辑c_cpp_properties.json文件 添加defines字段 { "configurations": [ { "name": " ...

  2. MySQL乱码问题(为什么?追根溯源)

    引言 定位:查询数据库得到的结果集乱码,client端向数据库插入数据乱码. 网上有不少帖子,手把手地教给我们如何去改这一问题.方案大多数如下: 方案中最多介绍的就是更改配置文件,win下my.ini ...

  3. jquery判断radio是否选中

    微交易-实体系统 微交易-虚拟系统   <div class="system"> <div class="systemt"> <l ...

  4. C/C++编程笔记:C语言贪吃蛇源代码控制台(一),会动的那种哦!

    前几天有个同学加我QQ私聊我说他们老师布置了一个贪吃蛇,他不知道怎么写所以来找我求解,我给他简单讲解了思路和一些难点之后他也能够自己独立将项目完成了!考虑到更多同学可能有贪吃蛇上的问题,今天有时间就来 ...

  5. Multiple dex files define解决记录

    引用多个library时经常会遇到Multiple dex files define错误,最常见的是support库多次定义,此时可用以下gradle命令来查看工程的引用树: gradlew -q d ...

  6. C++中unordered_map几种按键查询比较

    unorder_map有3种常见按键查值方法. 使用头文件<unordered_map>和<iostream>,以及命名空间std. 第一种是按键访问.如果键存在,则返回键对应 ...

  7. 【BZOJ4173】数学 题解(数论)

    前言:体验到了推式子的快感orz 题目大意:求$\varphi(n)*\varphi(m)*\sum_{n\ mod\ k+m\ mod\ k\geq k} \varphi(k)\ mod\ 9982 ...

  8. 【目标检测】:SPP-Net深入理解(从R-CNN到SPP-Net)

    一. 导论 SPP-Net是何凯明在基于R-CNN的基础上提出来的目标检测模型,使用SPP-Net可以大幅度提升目标检测的速度,检测同样一张图片当中的所有目标,SPP-Net所花费的时间仅仅是RCNN ...

  9. 从零搭建Spring Boot脚手架(2):增加通用的功能

    1. 前言 今天开始搭建我们的kono Spring Boot脚手架,首先会集成Spring MVC并进行定制化以满足日常开发的需要,我们先做一些刚性的需求定制,后续再补充细节.如果你看了本文有什么问 ...

  10. 在centos 上安装python

    1.下载最新版本python源码包 下载地址为https://www.python.org/ftp/python/3.8.5/Python-3.8.5.tgz 2.解压源码包 tar -zxf Pyt ...