【echarts/antv】解决Uncaught TypeError: Cannot read property ‘getAttribute‘ of null报错

一、报错

在vue的项目中使用echarts、antv等图表组件时，可能会出现上述报错。

二、分析原因

echarts/antv图的id是动态生成的（由父组件传递过来/通过接口拿等），出现了图形容器尚未生成便对其进行了初始化的情况。此时，就会产生"找不到图形容器"的错误。

三、解决方案

思路：先保证容器存在，再生成图形

方法1. 使用id

首先，在main.js全局引入echarts

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

然后，创造容器。这里绑定的id可以是动态生成的（由父组件传过来/从接口拿来等…）

<div :id="id" style="width:100%;height:376px">div>

最后，在mounted中实例化对象。（为了保证容器的存在，要先判断再开始绘图）至于，怎么绘图官网说得很清楚啦~ 有疑问可以留言

mounted () {
     
  if (this.id && document.getElementById(this.id)) {
     
    this.drawChart()
  }
},

方法2. 使用ref

同样，首先要在main.js全局引入echarts。
然后，创造容器。（通过 ref 这个 attribute 为子组件赋予一个 ID 引用）

<div :ref="id" style="width:100%;height:376px">div>

最后，实例化图表对象。

mounted () {
     
  this.drawChart()
},
methods: {
     
  drawChart() {
     
    const chart = this.$refs[this.id]
    if (chart) {
     
       this.chart = this.$echarts.init(chart)
       const option = {
     ...}
       this.chart.setOption(option)
       window.addEventListener("resize", function() {
     
         this.chart.resize()
       })
     }
     this.$on('hook:destroyed',()=>{
     
       window.removeEventListener("resize", function() {
     
         this.chart.resize();
       });
     })
  }