Vue中使用echart组件报错 Cannot read property 'getAttribute' of null

最新推荐文章于 2024-12-23 09:53:20 发布

原创最新推荐文章于 2024-12-23 09:53:20 发布 · 978 阅读

1 ·

CC 4.0 BY-SA版权

vue-echarts图专栏收录该内容

1 篇文章

订阅专栏

本文分享了一种在Vue项目中正确初始化ECharts图表的方法，通过使用$refs和ref属性代替传统的getElementById方法，有效避免了DOM未准备好时初始化图表导致的错误。

https://img-blog.csdnimg.cn/20190626225941507.png

// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('achievementAnalysis'))

这段文字是说：在成功载入dom后才会去正常初始化echart实例，

而我之前不太明白，忽略了知道总报上图的错误，而不自知。

在vue中找个了好的方法来避免这个为建立dom就初始化echart图的问题，方法如下：

var ana = this.$refs.achievementAnalysisChart;
        if (ana) {
          console.log('ana不为空');
          let myChart = this.$echarts.init(ana)
// 基于准备好的dom，初始化echarts实例
// let myChart = is.$echarts.init(document.getElementById('achievementAnalysis'))

该方法的目的是利用ref和$ref来替代document.getElementById(achievementAnalysis)的方式，获取该标签的内容。(注：上面代码不完整，细心的人可能会发现还缺少个“）”符号，如果需要的使用的话，请注意。）