报错信息如下:

报错代码:

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. ThreadLocal源码分析以及why导致内存泄露

    1 ThreadLocal? This class provides thread-local variables. These variables differ from their normal ...

  2. jsp课堂笔记1

    http协议:规范浏览器和服务器交互或通信的规则 https:基于http实现,比http更加安全,提供了身份验证和通信内容加密  服务器:1.配置比较高的电脑  2.他就是一个应用 http1.0: ...

  3. [转载]android网络通信解析

    原文地址:android网络通信解析作者:clunyes 网络编程的目的就是直接戒间接地通过网络协议不其他计算机进行通讯. 网络编程中有两个主要的问题, 一个是如何准确的定位网络上一台戒多台指主机: ...

  4. 使用matlab进行傅里叶分析和滤波

    傅里叶分析 公式法 下例 是将振幅为1的5Hz正弦波和振幅为0.5的10Hz正弦波相加之后进行傅里叶分析. clear all N=512; dt=0.02; n=0:N-1; t=n*dt; x=s ...

  5. 官宣!AWS Athena正式可查询Apache Hudi数据集

    1. 引入 Apache Hudi是一个开源的增量数据处理框架,提供了行级insert.update.upsert.delete的细粒度处理能力(Upsert表示如果数据集中存在记录就更新:否则插入) ...

  6. PHP stristr() 函数

    实例 查找 "world" 在 "Hello world!" 中的第一次出现,并返回字符串的剩余部分: <?php高佣联盟 www.cgewang.com ...

  7. PDO::inTransaction

    PDO::inTransaction — 检查是否在一个事务内(PHP 5 >= 5.3.3, Bundled pdo_pgsql) 说明 语法 bool PDO::inTransaction ...

  8. mysql中走与不走索引的情况汇集(待全量实验)

    说明 在MySQL中,并不是你建立了索引,并且你在SQL中使用到了该列,MySQL就肯定会使用到那些索引的,有一些情况很可能在你不知不觉中,你就“成功的避开了”MySQL的所有索引. 索引列参与计算 ...

  9. luogu P4775 [NOI2018]情报中心 线段树合并 虚树 树的直径trick

    LINK:情报中心 神题! 写了一下午 写到肚子疼. 调了一晚上 调到ex 用的是网上dalao的方法 跑的挺快的. 对于链的暴力 我不太会kk. 直接说正解吧: 分类讨论两种情况: 1 答案的两条链 ...

  10. C/C++编程笔记:C语言写推箱子小游戏,大一学习C语言练手项目

    C语言,作为大多数人的第一门编程语言,重要性不言而喻,很多编程习惯,逻辑方式在此时就已经形成了.这个是我在大一学习 C语言 后写的推箱子小游戏,自己的逻辑能力得到了提升,在这里同大家分享这个推箱子小游 ...