Vue项目中，如何使用ECharts：(1)安装ECharts

一、安转echarts

这里只介绍通过npm安装echarts，其他方式引入echarts，请自行百度。

npm install echarts --save

二、全局引入echarts

import Vue from 'vue'
import *as echarts from 'echarts'//引入echarts
Vue.prototype.$echarts = echarts//挂载到Vue实例上，方便全局使用

注意：在引入echarts的时候，一定要注意echarts的版本，否则引入不当会报错！！！

例如，如下报错：

错误原因：如果安转的echarts版本在echarts5.0及以上版本使用：import echarts from 'echarts' 引入时会报如上错入，那是因为安转的echarts版本过高而导致的，可以降低版本如安转echarts@4.8.0版本可以使用该方法引入。

如果不想降低版本，那么请改用 import *as echarts from 'echarts' 或 let echarts = require('echarts') 方法引入。

即：

• echarts5.0及以上版本（以下两种方法都可以）

import Vue from 'vue'
import *as echarts from 'echarts'//引入echarts
Vue.prototype.$echarts = echarts//挂载到Vue实例上，方便全局使用

或

import Vue from 'vue'
let echarts = require('echarts')//引入echarts
Vue.prototype.$echarts = echarts//挂载到Vue实例上，方便全局使用

• echarts5.0版本以下（以下三种方法都可以）

import Vue from 'vue'
import echarts from 'echarts'//引入echarts
Vue.prototype.$echarts = echarts//挂载到Vue实例上，方便全局使用

或 

import Vue from 'vue'
import *as echarts from 'echarts'//引入echarts
Vue.prototype.$echarts = echarts//挂载到Vue实例上，方便全局使用

 或

import Vue from 'vue'
let echarts = require('echarts')//引入echarts
Vue.prototype.$echarts = echarts//挂载到Vue实例上，方便全局使用

了解：

（1）最新版的 Echarts5.0 使用 import echarts from 'echarts' 导入，会发现导出的 echarts 是 undefined 的情况，无法正常使用。

（2）为什么会出现这种情况？

对比一下 源码就知道咯，5.0 版本的 dist 目录多了个 .esm.js 文件 ，之前的版本是没有的，这是个特意给 ESM 模块导入使用的，截图如下，所以以前的导入方法就不行咯，因为使用了 export 而不是 export default （可以去了解下 ESM，就知道这两个导出有啥区别了）