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 cli4升级sass-loader(v8)后报错问题
这篇文章主要介绍了解决vue cli4升级sass-loader(v8)后报错问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
如何解决Element UI el-dialog打开一次后无法再次打开问题
这篇文章主要介绍了如何解决Element UI el-dialog打开一次后无法再次打开问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
vue中this.$refs.name.offsetHeight获取不到值问题
这篇文章主要介绍了vue中this.$refs.name.offsetHeight获取不到值问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-05-05
详解vue-router 2.0 常用基础知识点之router-link
这篇文章主要介绍了详解vue-router 2.0 常用基础知识点之router-link,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-05-05


最新评论