关于在Vue项目初始化echarts时报错TypeError:Cannot read property ‘init‘ of undefined的解决办法

前言：在Vue项目中遇到的一个问题，初始化echarts时报错TypeError:Cannot read property ‘init‘ of undefined的解决办法

导入echarts

1. 在Vue项目中的main.js文件中导入如下代码:

• 将 import echarts from ‘echarts’ 替换成 import * as echarts from ‘echarts’
• 将 echarts 挂到Vue原型上

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

初始化echarts

1. 在Vue项目中使用echarts，需要挂载到mounted生命周期函数内:

mounted() {
  // mounted为挂载阶段,此时页面上的元素已经被渲染完毕了
  // 基于准备好的dom，初始化echarts实例
  var myChart = this.$echarts.init(document.getElementById('main'))
}