echarts报错:Error in mounted hook的解决方法

下面是详细讲解“echarts报错:Error in mounted hook的解决方法”的完整攻略。

问题描述

当我们使用 echarts 绘制图表时，有时会遇到“Error in mounted hook”的错误提示，该错误提示通常出现在我们使用 vue 进行网站开发时。具体的错误提示信息如下：

[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'getAttribute' of undefined"

这个错误提示表明，在 vue 的 mounted 钩子函数执行时，引用的某个元素还没有被正确渲染，导致获取不到该元素的属性值。

解决方法

方法一：使用 $nextTick 函数

由于问题是因为在 mounted 钩子函数中，元素还没有正确渲染导致的，因此我们可以使用 $nextTick 函数，让代码在页面渲染完成后再执行。$nextTick 函数是 vue 提供的一个异步执行函数，用法如下：

this.$nextTick(() => {
  // 在这里写需要在页面渲染完成后执行的代码
});

在使用 echarts 绘制图表的场景中，我们通常需要在 mounted 钩子函数中调用 echarts.init 方法初始化 echarts 实例，因此我们可以使用 $nextTick 函数来解决问题，具体的代码如下：

mounted() {
  this.$nextTick(() => {
    var chartDom = document.getElementById('chart');
    var myChart = echarts.init(chartDom);
    // 接下来就可以使用 myChart 实例进行图表绘制了
  });
}

方法二：使用 vue 的生命周期函数 created

由于问题是因为在 mounted 钩子函数中，元素还没有正确渲染导致的，因此我们可以使用 vue 的生命周期函数 created 来替代 mounted，因为 created 函数会在页面元素渲染之前执行。具体的代码如下：

created() {
  var chartDom = document.getElementById('chart');
  var myChart = echarts.init(chartDom);
  // 接下来就可以使用 myChart 实例进行图表绘制了
}

这样就可以在页面元素渲染完成之前创建 echarts 实例了。

示例说明

示例一：使用 $nextTick 函数

假设我们的模板代码如下：

<template>
  <div>
    <div id="chart"></div>
  </div>
</template>

<script>
import echarts from 'echarts';

export default {
  mounted() {
    var chartDom = document.getElementById('chart');
    var myChart = echarts.init(chartDom);
    // 接下来就可以使用 myChart 实例进行图表绘制了
  }
};
</script>

此时，我们可以修改 mounted 函数的代码如下：

mounted() {
  this.$nextTick(() => {
    var chartDom = document.getElementById('chart');
    var myChart = echarts.init(chartDom);
    // 接下来就可以使用 myChart 实例进行图表绘制了
  });
}

示例二：使用 vue 的生命周期函数 created