Vue Echarts报错Initialize failed: invalid dom解决方法
报错原因
dom还没挂载完成,echarts.init() 就已经开始执行
解决方法
1、不要用created(用mounted),created这时候还只是创建了实例,但模板还没挂载完成
- created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图
- mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作
也就是说created()
方法是在页面加载前调用,此时dom还未加载。所以当 有改变dom的时候用mounted
, 没有改变dom操作就用created
2、使用create情况下使用延迟加载
(1)setTimeout延迟加载
setTimeout()方法用于在指定毫秒数后调用
通过延迟加载getChart()方法,使DOM先于getChart方法加载,为DOM加载提供时间
(2)使用nextTick延迟加载
created() { this.$nextTick(()=>{ this.getchart(); }) },
3、用mounted还是会报错
最近发现有些友友用了mounted还是会报错,有查了查解决办法,发现有博主说可以将document.getElementId获取dom
换为使用ref指向dom元素
<template> <!--1.设置DOM容器--> <div id="Charts" ref="Echarts" ></div> </template> <script> //2.引入echartjs import * as echarts from "echarts"; export default { name: "chart", created() { setTimeout(() => { this.getChart() }, 1000); }, methods:{ getChart(){ // 3.定义图标对象myChart,初始化echarts实例 let myChart=echarts.init(this.$refs.Echarts) // 4.添加配置项 let options={ title: { //标题 text: 'ECharts 入门示例', //主标题文本 left:150, top:10, }, tooltip: {}, xAxis: { //配置要在 X 轴显示的项: data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, //配置要在 Y 轴显示的项: series: [ { name: '销量', type: 'bar', data: [ {"value":"5","date":"2022-4-8"}, {"value":"8","date":"2023-4-8"}, ], } ] } // 5.将配置给myChart myChart.setOption(options) } } } </script> <style scoped> #Charts{ width: 500px; height: 500px; border: 1px solid red; } </style>
总结
到此这篇关于Vue Echarts报错Initialize failed: invalid dom解决的文章就介绍到这了,更多相关Echarts报错Initialize failed: invalid dom内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vue中$emit传递多个参(arguments和$event)
本文主要介绍了vue中$emit传递多个参(arguments和$event),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-02-02vue开发移动端使用better-scroll时click事件失效的解决方案
这篇文章主要介绍了vue开发移动端使用better-scroll时click事件失效的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2021-07-07
最新评论