VUE+Echarts 创建项目

1. 使用cnpm添加vue-cli

安装cnpm

由于npm的服务器在国外，网速很慢。淘宝为解决这个问题，在国内做了同步的镜像网站 http://npm.taobao.org/，我们可以安装国内镜像cnpm，以提高modules的安装速度
npm install cnpm -g

vue-cli脚手架 全局安装

cnpm install -g @vue/cli

安装yarn

使用cnpm全局安装yarn，在项目中可以直接使用yarn安装模块，比npm速度更快（这一部分可不用做，可以延续使用cnpm）
cnpm install -g yarn

2. 初始化vue+Echarts项目

创建vue项目

vue create projectname

选择默认设置

跳转到项目目录中

cd projectname

运行项目

使用yarn serve运行项目，并在浏览器中使用 http://localhost:8080 访问

cnpm添加echarts

在项目根目录下使用cnpm安装echarts
cnpm install echarts@4 --save

3. 创建第一个图形

全局引入（不推荐）

在main.js中全局引用echarts

// 引入echarts  
import echarts from 'echarts'  
Vue.prototype.$echarts = echarts

在BarChart.vue中引用创建div,用于放置柱状图，并在script标签中配置组成元素。,因为要确保BarChart挂载到页面中，所以需要在mounted函数中渲染