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

最新推荐文章于 2023-06-01 21:35:51 发布
最新推荐文章于 2023-06-01 21:35:51 发布
阅读量2.8k 收藏 4
点赞数 3
文章标签： echarts vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dg_xdg/article/details/126882824
版权

解决办法

  1. init undefined

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

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

  1. 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'; 将里面的东西集成到一坨

独孤小冬瓜
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1.元旦倒计时代码展示
12-20
核心代码 var canvas = document.querySelector("canvas"), ctx = canvas.getContext("2d"); var ww,wh; function onResize(){ ww = canvas.width = window.innerWidth; wh = canvas.height = window.innerHeight; } ctx.strokeStyle = "red"; ctx.shadowBlur = 25; ctx.shadowColor = "hsla(0, 100%, 60%,0.5)"; var precision = 100; var hearts = []; var mouseMoved = false; function onMove(e){ mouseMoved = true; if(e.type === "touchmove"){ hearts.push(new Heart(e.touches[0].clientX, e.touches[
AnyCAD.WinForms.zip
08-25
AnyCAD.WinForms开发帮助实例
使用Echarts报错:this.dom.getContext is not a function；
前端开发小白9527
04-20 7722
echarts 报错 this.dom.getContext is not a function; 原因:因为在初始化echarts的时候，echarts.js规定只能使用dom原生方法获取标签，document.getElementById('id')；这里我结合vue使用 所以用的是$refs ，我印象中使用$refs是可以的，但是当我打印两个对象查看时 差异性就可以显现出来，一个是原生的dom对象，另一个却是Vue组件实例对象 代码部分: <div class="
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
09-28
通过调用canvas对象的getContext()方法来获取绘图环境，其只需要一个参数：绘图环境的类型，下面通过实例为大家详细介绍下
1234.htmlyangzihang
12-23
<!doctype html> <html> <head> <meta charset="utf-8"> <title>2019新年倒计时</title> <style> @import url("https://fonts.googleapis.com/css?family=Aleo"); :root { font-family: "Aleo", sans-serif; } html, body { width: 100%; height: 100%; padding: 0; margin: 0; background: rgb(119, 13, 13); background: radial-gradient( circle, rgba(119, 13, 13, 0.92) 64%, rgba(0, 0, 0, 0.6) 100% ); } canvas { width: 100%; height: 100%; } .label { font-size: 2.2rem; background: url("img/6368077651977322227241996.png"); background-clip: text; -webkit-background-clip: text; color: transparent; animation: moveBg 30s linear infinite; } @keyframes moveBg { 0% { background-position: 0% 30%; } 100% { background-position: 1000% 500%; } } .middle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .time { color: #d99c3b; text-transform: uppercase; display: flex; justify-content: center; } .time span { padding: 0 14px; font-size: 0.8rem; } .time span div { font-size: 3rem; } </style> </head> <body> <div class="middle"> <h1 class="label">New Year Countdown </h1> <div class="time"> <span> <div id="d"> 00 </div> Days </span> <span> <div id="h"> 00 </div> Hours </span> <span> <div id="m"> 00 </div> Minutes </span> <span> <div id="s"> 00 </div> Seconds </span> </div> </div> <script> class Snowflake { constructor() { this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; this.radius = 0; this.alpha = 0; this.reset(); } reset() { this.x = this.randBetween(0, window.innerWidth); this.y = this.randBetween(0, -window.innerHeight); this.vx = this.randBetween(-3, 3); this.vy = this.randBetween(2, 5); this.radius = this.randBetween(1, 4); this.alpha = this.randBetween(0.1, 0.9); } randBetween(min, max) { return min + Math.random() * (max - min); } update() { this.x += this.vx; this.y += this.vy; if (this.y + this.radius > window.innerHeight) { this.reset(); } } } class Snow { constructor() { this.canvas = document.createElement("canvas"); this.ctx = this.canvas.getContext("2d"); document.body.appendChild(this.canvas); window.addEventListener("resize", () => this.onResize()); this.onResize(); this.updateBound = this.update.bind(this); requestAnimationFrame(this.updateBound); this.createSnowflakes(); } onResize() { this.width = window.innerWidth; this.height = window.innerHeight; this.canvas.width = this.width; this.canvas.height = this.height; } createSnowflakes() { const flakes = window.innerWidth / 4; this.snowflakes = []; for (let s = 0; s < flakes; s++) { this.snowflakes.push(new Snowflake()); } } update() { this.ctx.clearRect(0, 0, this.width, this.height); for (let flake of this.snowflakes) { flake.update(); this.ctx.save(); this.ctx.fillStyle = "#FFF"; this.ctx.beginPath(); this.ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI * 2); this.ctx.closePath(); this.ctx.globalAlpha = flake.alpha; this.ctx.fill(); this.ctx.restore(); } requestAnimationFrame(this.updateBound); } } new Snow() const comingdate = new Date("Jan 1, 2019 00:00:00"); const d = document.getElementById("d"); const h = document.getElementById("h"); const m = document.getElementById("m"); const s = document.getElementById("s"); d.innerHTML = getTrueNumber(days); h.innerHTML = getTrueNumber(hours); m.innerHTML = getTrueNumber(mins); s.innerHTML = getTrueNumber(secs); if (x <= 0) clearInterval(x); }, 1000); const getTrueNumber = x => (x < 10 ? "0" + x : x); </script> <div style="text-ali
Vue 报错TypeError: this.$set is not a function 的解决方法
12-12
报错场景：将APi中得到的response数据，用Vue$set()使数据动态响应 报错代码： methods: { textTranslate: function (text, to) { $.ajax({ url: 'http://openapi.youdao.com/api', type: 'post', dataType: 'jsonp', data: { q: text, appKey: this.appKey, salt: this.salt, from: this.from, to:
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......
vue后台的一个项目遇到的一些问题和解决办法的记录
动感超人的博客
05-21 2132
vue使用echarts报错Error in mounted hook: “TypeError: this.dom.getContext is not a function” 解决 一开始是this.refs.dom获取节点的,后面使用在‘<el−row>‘标签上就不可以,所以如果使用this.refs.dom获取节点的,后面使用在`<el-row>`标签上就不可以,所以如果使用this.refs.dom获取节点的,后面使用在‘<el−row>‘标签上就不可以,所以如
Vue||引入echarts，初始化 init 报错Cannot read property ‘init‘ of undefined 或者 echarts.init is not a function
FQ_QIU的博客
06-01 3863
Vue引入echarts.js，初始化init()遇到的坑。
echarts 报错 this.dom.getContext is not a function;
xiamoziqian的博客
04-17 2035
原因:因为在初始化echarts的时候，echarts.js规定只能使用dom原生方法获取标签，即 document.getElementById('main')； 错误代码： var myEchart = echarts.init($('#main')); 正确代码： var myEchart = echarts.init(document.getElementById('main')); ...
canvas的填色画游戏代码.zip
07-11
html5 canvas填色画游戏代码是一款适合儿童玩的益智类填色游戏，通过选中色块，来给模型填充颜色。支持多种模型选择填色效果。 function extend(O1,O2){     for(var i in O2){         O1[i]=O2[i];     } } function each(arr,f){     for(var i = 0;i<arr.length;i ){         f.call(arr[i],i,arr[i]);     } } function dataInfo(Obj,x,y){     var c=document.createElement("canvas");     var txt= c.getContext("2d");     c.width=Obj.img.width;     c.height=Obj.img.height;     txt.drawImage(Obj.img,0,0);     var data=txt.getImageData(x-1,y-1,3,3);     var num=0;     for(var q=0;q<data.data.length;q =4){         num =data.data[q 3];     }     num=num/9;     return parseInt(num); } var HGAME=new Object(); HGAME.event=new Object();//事件对象 HGAME.event.clickBuffer=new Array();//缓存要添加事件的节点 click buffer HGAME.animate=function(Obj){     var defaultObj={         time:30,//动画间隔         frequency:-1,//动画次数 -1表示无限制         action:function(){},//动画每一帧的动作         lastAction:function(){}//最后一次动画执行完成触发函数     };     extend(defaultObj,Obj);     var oldTime=new Date();     var newTime=null;     this.time=defaultObj.time;     this.frequency=defaultObj.frequency;     this.action=defaultObj.action;     this.lastAction=defaultObj.lastAction;     this.stop=function(){         cancelAnimationFrame(this.INT_BUFFER);     };
详解Vue.js搭建路由报错 router.map is not a function
10-19
主要介绍了详解Vue.js搭建路由报错 router.map is not a function，非常具有实用价值，需要的朋友可以参考下
Vue 解决通过this.$refs来获取DOM或者组件报错问题
10-15
主要介绍了Vue 解决通过this.$refs来获取DOM或者组件报错问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
详解vue文件中使用echarts.js的两种方式
10-17
主要介绍了详解vue文件中使用echarts.js的两种方式，主要介绍了两种使用方式，一种是以组件的形式另一种直接引入，非常具有实用价值，需要的朋友可以参考下
Uncaught TypeError: echarts.init is not a function”错误-layui整合echarts
weixin_45907018的博客
03-23 2740
最近用echarts 首先就是遇到这个错误 引入官网案例，页面啥都没得。 原来是版本问题5.x版本太高 下载压缩包解压后。dist目录下面的echarts.js就可以了layui整合echart 我看这个老哥整的 不会自己整也没关系，我直接把整合的发过来 下载后改一下后缀名->echarts.js就可以； 下面是第一个html模板 做几点说明 base指的是你的resource/static 所以我的目录是 /js 效果
ECharts使用：this.dom.getContext is not a function
weixin_30820151的博客
04-27 2274
echarts 画图报错 this.dom.getContext is not a function; 原因:因为在初始化echarts的时候，echarts.js规定只能使用dom原生方法获取标签，即document.getElementById('main')； 错误写法： var myCommentLineChart = echarts.init($("#comment-line")); ...
大纲
m0_45272038的博客
12-25 982
错误 1、错误一 “export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘ 一直报错 （在“echarts”中找不到导出“echarts”） 重新更新echarts等各种方法都试了，还是解决不了问题 谷歌说可能是版本问题，就查看安装的是echarts 5.0 页面查看报"TypeError: echarts.init is not a function"错误， 但是console.log()出来的echarts.init就是
this.dom.getContext is not a function
喆๑
08-01 756
代码】this.dom.getContextisnotafunction。
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 实例。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值