echarts报错 Cannot read property ‘getAttribute‘ of undefined

最新推荐文章于 2024-08-20 18:02:16 发布

漫长

最新推荐文章于 2024-08-20 18:02:16 发布

阅读量4.7k

点赞数

分类专栏： vue 文章标签： echarts vue.js

本文链接：https://blog.csdn.net/qq_42170658/article/details/120152836

版权

在Vue项目中遇到Echarts初始化时控制台报'Cannot read property 'getAttribute' of undefined'的问题。错误源于在Vue的created阶段尝试访问未渲染的DOM。解决方案包括将初始化代码移到mounted生命周期钩子中，确保DOM已挂载，或者对于v-if情况，改用v-show以确保DOM元素存在。

摘要由CSDN通过智能技术生成

今天在查看项目时，发现控制台莫名报错，Cannot read property 'getAttribute' of undefined

通过查看，问题定位在这一行，也就是echarts初始化的时候:

const chart = echarts.init(this.$refs['chart']);

结合报错信息可以得知，错误原因是因为没获取到dom属性。

在vue中获取不到dom一般分为两种情况，一是在created中获取，这个时候只是创建了vue实例，dom并没有开始渲染。所以自然拿不到，如果你是在created中初始化echarts，那么你只需要把初始化的方法放到mounted中执行，因为mounted是dom挂载完成的生命周期。这时候顺理成章就可以取到dom。

另外一种情况就是v-if导致dom没有渲染，接下来咱们看一下html部分:

<div style="width: 100%; height: 500px">
    <!-- 暂无数据/加载中组件 -->
    <tableLoading border 
        v-if="!conditionBoxLoading && hostAgentNameList.length === 1">
    </