Error in mounted hook: “TypeError: this.dom.getContext is not a function“

最新推荐文章于 2025-04-30 10:06:45 发布

原创最新推荐文章于 2025-04-30 10:06:45 发布 · 4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #echarts

博客主要讲述了在Vue中使用ECharts时遇到的报错问题，即 'Error in mounted hook: \TypeError: this.dom.getContext is not a function\'。最初用jQuery获取dom会报错，使用document.getelementById()获取同样报错，后来改用Vue的ref获取则解决了问题。

vue使用echarts报错：Error in mounted hook: "TypeError: this.dom.getContext is not a function"

// let c_dom = this.JQ('#overview_echarts');
let c_dom = this.$refs.overview_echarts;
this.E.init(c_dom).setOption(this.option)

一开始是使用jQuery获取dom，一直报上面的错误，后来改变用vue的ref获取就可以了
使用document.getelementById（）获取也会报错

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zero___1

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

[Vue warn]: Error in mounted hook: “TypeError: Cannot read property ‘getAttribute‘ of null“

郭宝的博客

06-24

11万+

错误场景一：错误提示：在运行Vue项目时出现了上述错误，出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的，代码如下： // 基于准备好的dom，初始化echarts实例 var bar_dv = document.getElementById('bar_dv'); let myChart = this.$echarts.init(bar_dv) 解...

Error in mounted hook: "TypeError: AMap.MouseTool is not a constructor"

郭宝的博客

10-16

6907

错误提示：解决办法：如果是直接引入的高德地图js文件，那么只需在路径后面添加&plugin=AMap.MouseTool 即可，全部路径如下： <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的KEY=AMap.MouseTo...

参与评论您还未登录，请先登录后发表或查看评论

ECharts使用：this.dom.getContext is not a function

seimeii的博客

03-15

3340

echarts 画图报错 this.dom.getContext is not a function; 原因:因为在初始化echarts的时候，echarts.js规定只能使用dom原生方法获取标签，即document.getElementById(‘main’)；错误写法： var myCommentLineChart = echarts.init($("#comment-line")); 加粗样式 var myCommentLineChart = echarts.init(document.

TypeError: this.dom.getContext is not a function

bigbigpigsobig的博客

08-03

8671

Vue引进echarts时报错：解决办法：在初始化echarts的时候，只能使用dom原生方法获取标签，而不能使用 refs 获取把 let dom = this.$refs.charts; 改成 let dom = document.getElementById("#chart");

使用Echarts报错:this.dom.getContext is not a function；

前端开发小白9527

04-20

1万+

echarts 报错 this.dom.getContext is not a function; 原因:因为在初始化echarts的时候，echarts.js规定只能使用dom原生方法获取标签，document.getElementById('id')；这里我结合vue使用所以用的是$refs ，我印象中使用$refs是可以的，但是当我打印两个对象查看时差异性就可以显现出来，一个是原生的dom对象，另一个却是Vue组件实例对象代码部分: <div class="

this.dom.getContext is not a function；

热门推荐

乾复道

12-21

3万+

echarts 画图报错 this.dom.getContext is not a function; 原因:因为在初始化echarts的时候，echarts.js规定只能使用dom原生方法获取标签，即document.getElementById('main')；错误代码： var myEchart = echarts.init($('#main')); 正确代码： v......

【echarts初始化方法报错】[Vue warn]: Error in nextTick: “TypeError: this.dom.getContext is not a function“

qq_45630675的博客

08-24

1641

echarts初始化方法中使用getElementsByClassName方法获取渲染dom元素报错

vue.runtime.esm.js:620 [Vue warn]: Error in created hook: “TypeError: this.initDeptTree(...) is not

qubes的专栏

02-20

1597

方法1：每个语句后面加分号，但是format会自动删掉非必要分号，保留最后一条语句的分号。当前方法initDeptTree和下一个语句拼接到了一起。控制台报错死活说，不认识这个方法。方法2：修改后面的写法。

精选资源

Error in mounted hook: "ReferenceError: AMap is not defined" fo

06-13

ReferenceError: AMap is not defined AMap未定义

this.$refs.xxx的小坑，Error in mounted hook “Error Initialize failed invalid dom.“

emgexgb_sef的博客

02-21

2430

最近在vue项目中使用echarts的时候遇到报错，Error in mounted hook: “Error: Initialize failed: invalid dom.”，这个错误就是dom元素还没准备就绪，但是我在mouted中初始化echarts，按理说不该报这个错。反复查看代码，也没有问题，最终发现this.refs.chart−1打印出来为NaN...，但是打印this.refs.chart-1打印出来为NaN...，但是打印this.refs.chart−1打印出来为NaN...，但是打

echarts初始化获取容器时报错“TypeError: this.dom.getContext is not a function“

最新发布

long_yy_的博客

04-30

761

不管使用class名获取，还是通过ref获取，都会获取失败，报错this.dom.getContext is not a function。通过以上方法，打印出来的对象，就可以看出差异性。

vue echarts.js 报错 this.dom.getContext is not a function；

Z_Gleng的博客

04-03

1658

不能用refs去获取然后我就获取dom原生获取首先用了 getElementsByClassName 还是不行使用getElementById就好了

echarts 报错 this.dom.getContext is not a function;

xiamoziqian的博客

04-17

2677

原因:因为在初始化echarts的时候，echarts.js规定只能使用dom原生方法获取标签，即 document.getElementById('main')；错误代码： var myEchart = echarts.init($('#main')); 正确代码： var myEchart = echarts.init(document.getElementById('main')); ...

this.dom.getContext is not a function

喆๑

08-01

1038

代码】this.dom.getContextisnotafunction。

vue使用echarts报错init is undefined...或者this.dom.getContext is not a function

dg_xdg的博客

09-16

3373

vue使用echarts报错init is undefined...或者this.dom.getContext is not a function

ECharts使用折线图报错：this.dom.getContext is not a function

weixin_44195250的博客

11-10

1537

错误写法，因为页面只有一个echart的折线图所以写了如下代码 this.initEcharts(document.getElementByClassName('line-charts'),option); 修改后的代码如下： var a = document.getElementsByClassName('line-charts').length; for(let i=0;i<a;i++){ this.initEcharts(document.getElementByClassName('l

完美解决vue引用echarts报错TypeError: this.dom.getContext is not a function

u013346160的博客

06-21

6949

这里写自定义目录标题vue引入echarts渲染时用ref取dom会报错，解决方法如下，如果解决的话请点个赞。错误截图 vue引入echarts渲染时用ref取dom会报错，解决方法如下，如果解决的话请点个赞。 let dom = this.$refs.charts[0];//完美解决报错 //或者直接用原生取dom let dom = document.getElementById("#chart"); 错误截图 ...

vue中 Error in mounted hook: “TypeError: this.$store.$dispatch is not a function“ 报错问题解决方案

m0_64453243的博客

06-01

3022

vue中 Error in mounted hook: "TypeError: this.$store.$dispatch is not a function" 报错问题解决方案

[Vue warn]: Error in mounted hook: "TypeError: this.dom.getContext is not a function"

08-31

具体来说，错误信息提示"TypeError: this.dom.getContext is not a function"。根据引用和引用，这个错误可能是由于使用了错误的方法或属性导致的。解决这个问题的方法是通过检查代码中使用的方法和属性是否正确。...