Vue中使用ECharts报错echarts Uncaught (in promise) TypeError: Cannot read property ‘getAttribute‘ of null

Vue中使用ECharts报echarts Uncaught (in promise) TypeError: Cannot read property ‘getAttribute’ of null错

一、问题

• 在Vue中使用ECharts时会出现如图的报错，简单翻译就是没有获取到属性名，也就ECharts没有找到可以渲染图表的DOM元素，所以抛出错误
  
• 遇到报错的场景，当图表中没有数据时展示“暂无数据”的提示模板，隐藏图表，有数据时展示图表（元素根据条件切换展示）

二、解决

• 回看代码中html的部分使用了v-if和v-else，由于Vue的特性，加上了v-if和v-else属性的一组元素并不会同时挂载DOM树上面，为了加快渲染速度，将满足条件的元素进行挂载并渲染，不满足条件的元素则不进行挂载操作，所以DOM树上面就不存在不满足条件的元素，进而使ECharts实例对象无法将图表绘制在不存在的元素上，导致了报错

  <div
    id="taskview-radar"
    v-if="radarData.length>0"
  ></div>
  <div
    class="chart-empty-data"
    v-else
  ></div>
  

• 解决方法也很简单，将v-if和v-else替换成为v-show，因为v-show会把两个元素都进行渲染并挂载到DOM树上，再根据条件将不满足条件的DOM设置上display:none的属性，此时EChats实例对象可以找到要渲染图表的元素，也就不会报错了

  <div
    id="taskview-radar"
    v-show="radarData.length>0"
  ></div>
  <div
    class="chart-empty-data"
    v-show="radarData.length<=0"
  ></div>
  

• 绘制图表部分的代码如下：

  let radarChart = this.$echarts.init(document.getElementById('taskview-radar'))
  window.addEventListener('resize', () => {
      radarChart.resize()
  })
  radarChart.setOption(options)