vue2.0项目中引入echarts

在vue-cli搭建的项目中该如何引入echarts图表呢？

1.首先npm安装echarts

npm install echarts --S
或者使用国内的淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts --S

如果运行程序报错卸载并降低Echarts版本(首先看一下package.json里echarts里安装的版本，我遇到的情况是5.1的版本，图总是不出来，首先卸载npm uninstall echarts，然后安装低级版本echarts：npm install [email protected] --save)

2.全局引入

在Vue-cli构建的项目中找到main.js文件，然后全局引入echarts // 引入echarts

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

页面应用

js部分：

注意： 这里echarts初始化应在钩子函数mounted()中，这个钩子函数是在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用

3. 局部引用

上面全局引入会将所有的echarts图表打包，导致体积过大，所以可以局部引入，就是 根据单个页面的需要在自己的页面里引入使用。这样就不需要在main.js文件里引入文件了。在需要的图表的文件里引入。

// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/pie')
// 引入饼图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
注意：这里之所以使用 require 而不是 import，是因为 require 可以直接node_modules 中查找，而 import 必须把路径写全。