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

报错
在Vue项目中遇到的一个问题,初始化echarts时报错TypeError:Cannot read property ‘init‘ of undefined
关于在Vue项目初始化echarts时报错TypeError:Cannot read property ‘init‘ of undefined的解决办法_第1张图片
解决办法
导入echarts
在Vue项目中的main.js文件中导入如下代码:
1.将 import echarts from ‘echarts’ 替换成 import * as echarts from ‘echarts’
2.将 echarts 挂到Vue原型上

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

初始化echarts
在Vue项目中使用echarts,需要挂载到mounted生命周期函数内:

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

你可能感兴趣的:(基础,vue)