Vue echarts初始化实例Error in mounted hook: “TypeError: Cannot read property ‘init‘ of undefined“

项目场景：

Vue echarts初始化实例：Error in mounted hook: “TypeError: Cannot read property ‘init’ of undefined”

---

问题描述：

1.安装echarts依赖

　　通过 npm 获取 echarts，npm install echarts --save

2.main.js中全局引用

 import echarts from 'echarts'
  // 全局方法挂载
 Vue.prototype.$echarts = echarts

3.基于已经创建好的dom，初始化echarts实例

 // 初始化echarts实例
 this.chartLine = this.$echarts.init(
     document.getElementById('echartsView1')
 );

4.运行中报错，Echarts图表渲染失败

---

 原因分析：

开始的时候考虑会不会是版本的问题，后来发现，可能真是，自己安装的是最新版本和之初项目中的echarts版本不相同，就临时改了一下，最后成功了。

项目模块结束后，有点小强迫症还惦记这这个问题，就又上网搜罗了一番，发现出来改变版本可以解决，另外一种方式也可以，就是引用方式稍微修改一下也可以，就很nice
 

---

解决方案：

• 通过改变版本解决：

删除之前的版本，降低一下版本即可: npm install echarts@4.9.0 --save

 

• 通过改变引用方式解决：

稍微在main.js中对echarts的引用方式稍作改变就行

import *as echarts from 'echarts'
// 全局方法挂载
Vue.prototype.$echarts = echarts

（扩展：ES6新增import *as xxx from ‘xxx’

        import * as xxx from ‘xxx’: 会将若干export导出的内容组合成一个对象返回，通俗点说就是将导出的多个对象放到一个总对象中，调用的时候，直接用那个总对象调用，调用方便；

        import xxx from ‘xxx’：（export default Din）只会导出这个默认的对象作为一个对象，也就是只导出一个对象；

）

---

来给您们康康最终的效果：

嗯，以上两个方法反正我测试都可以解决上面那个bug，要是有遇到类似的，希望可以帮到您……欢迎交流