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

最新推荐文章于 2025-03-05 10:53:20 发布

独孤小冬瓜

最新推荐文章于 2025-03-05 10:53:20 发布

阅读量3.1k

点赞数 3

文章标签： echarts vue.js javascript

本文链接：https://blog.youkuaiyun.com/dg_xdg/article/details/126882824

版权

解决办法

init undefined

到package.json中查看,如果ehcarts版本在5.0之上的
使用 import * as echarts from 'echarts'导入

或者用npm uninstall echarts先卸载echarts,安装旧版本
npm i echarts@4 --save

this.dom.getContext is not a function at e.initContext

报错是由于用了jquery来寻找节点，ehcarts不接受jQueryDOM,改用原生方式document.getElementById(“myEcharts”)即可

过程

按网上的文档用 npm i echarts --save 安装了，然后在vue中使用如下代码注册插件

import  echarts from 'echarts'; 
// 并设置对应的属性
Vue.prototype.$echarts = echarts;

但是调用echarts.init初始化报错，既然init找不到，我首先想的就是输出一下echarts这个东西，看看他的结构

console.log(this.$echarts)

结果为undefined

正确安装了，但是导入没有东西，这种情况肯定是导入姿势不正确

import导入的前提是某个文件进行了导出，比如export default{}

直接查看node_modules中的echarts目录下的index.js,发现里面全是use函数在使用各个模块,并没有导出，使用import * as echarts from 'echarts'; 将里面的东西集成到一坨

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

独孤小冬瓜

关注关注

3
点赞
踩
4

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

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

seimeii的博客

03-15

3163

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.

vue-cli3开发使用jQuery插件完成一键导出Word功能（纯前端）

m0_48940868的博客

04-06

943

前言：最近在做一个【生成报告类的系统】，其中最核心的功能就是“如何一键生成报告” 为了解决这一难题，博主采取了很多方案，也参考了网上的文章，无奈的是，很多文章说的不够仔细、清楚，看了半天收获也不是很大。对此，我想通过这篇文章总结下，也是互相分享学习。一般来说，完成导出Word这一功能多多少少都需要后端的支持，网上大致的思路有如下几种：安装四个依赖包，自己规定模板类使用在线导出工具（建议不要去用，商用的，仅做参考）百度模板类（这种个人觉得相对复杂点，博主没怎么看过）使用jQuery插件——Wo

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

使用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="

Echarts与Vue3中获取DOM节点可能出现的异常错误

热门推荐

乾复道

12-21

3万+

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

this.dom.getContext is not a function

喆๑

08-01

978

代码】this.dom.getContextisnotafunction。

TypeError: this.dom.getContext is not a function

bigbigpigsobig的博客

08-03

8586

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

在vue项目中使用jquery的第三方插件jquery.wordexport.js

MISS_CJL的博客

04-23

8543

前言项目需求是甲方需要导出一个word格式的文件，之前我司用的都是ireport，java后台，怎么说呢，比较繁琐，不是很方便。这一次，由于内容很少，就想完全由前端来生成word。在网上找了很多资料，很多回答说使用的是jquery的第三方插件jquery.wordexport.js。这个插件的样式不灵活，必须是行内样式。表格的话可以统一设置样式。先放上一张效果图：项目目录结...

聊一聊cropper.js

weixin_45731450的博客

01-30

1875

最近的项目中有一个纯前端实现的功能困扰了我好久，就是用户上传图片以后需要用户进入图片裁剪页并完成上传的功能，一开始我是打算自己去用canvas去写这样一个页面的，但是项目开发周期短，任务紧，所以我就在网上各种扒资源，还真让我找到了这么一款神仙插件——cropper.js。 cropper.js jQuery.cropper是一款使用简单且功能强大的图片剪裁jQuery插件。该图片剪裁插件支持图片放大缩小，支持图片旋转，支持触摸屏设备，支持canvas，并且支持跨浏览器使用。官方地址：http://fe

vue后台水印实现

沃德天，倪维胜么，捺莫帅？

03-17

1124

<template> <router-view v-waterMark="waterCode" ></router-view> </template> <script> import waterMark from 'common/utils/watermark'; export default { directives: { waterMark: waterMark, },

D3-股权穿透图

liujiawei567的博客

08-12

3407

安装·使用 // cdn 引入 <script scr="./saveSvgAsPng.js"></script> // 模块引用 npm install save-svg-as-png -D npm install d3 -D // 在出口文件main.js中 import saveSvgAsPng from "save-svg-as-png"; import d3from "d3"; Vue.prototype.$saveSvgAsPng = saveSvgAsPng;

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

zero___1的博客

12-18

3980

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的re

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

Z_Gleng的博客

04-03

1583

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

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

xiamoziqian的博客

04-17

2598

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

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

weixin_44195250的博客

11-10

1449

错误写法，因为页面只有一个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

Uncaught TypeError: echarts.init is not a function”错误-layui整合echarts

weixin_45907018的博客

03-23

3633

最近用echarts 首先就是遇到这个错误引入官网案例，页面啥都没得。原来是版本问题5.x版本太高下载压缩包解压后。dist目录下面的echarts.js就可以了layui整合echart 我看这个老哥整的不会自己整也没关系，我直接把整合的发过来下载后改一下后缀名->echarts.js就可以；下面是第一个html模板做几点说明 base指的是你的resource/static 所以我的目录是 /js 效果

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

qq_45630675的博客

08-24

1524

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

Vue||引入echarts，初始化 init 报错Cannot read property ‘init‘ of undefined 或者 echarts.init is not a function

FQ_QIU的博客

06-01

4385

Vue引入echarts.js，初始化init()遇到的坑。

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

06-06

这个错误通常是因为您在使用 ECharts 的时候，没有正确引入依赖的 Canvas 渲染器。您可以在引入 ECharts 的时候同时引入 Canvas 渲染器，例如： ```html <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.1/echarts.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/zrender/5.2.0/zrender.min.js"></script> ``` 如果您已经引入了 zrender.js，但是还是出现了这个错误，那么可能是因为您的 DOM 元素没有正确渲染，您可以检查一下您的 DOM 元素是否正确渲染，或者尝试在 DOM 元素渲染完成后再初始化 ECharts 实例。