1. 导入echarts

1. 在终端输入
   cnpm install echarts --save
2. 在main.js中引入

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

2.封装echarts组件

1. 新建组件echats.vue
2. 首先应该明确Echarts图形必须满足四项刚性条件才可以绘制：
   准备一个具有宽高的容器（container）；
   每次绘制之前需要初始化（init）；
   必须设置配置，否则无从绘制（option）；
   改变数据时必须传入改变的数据，否则监听不到新数据（setOption）；

• 1.容器
  注意，容器的宽高可以通过v-bind绑定样式的参数styleObj来设置（父组件引用时传递过来），使得应用echats组件时可以自由地设置宽高

<template>
  <div id="myChart" :style="styleObj" ref="chart">
  </div>
</template>

• 2.初始化+配置
  由于初始化需要获取到容器dom，所以需要在mouted生命周期里面初始化

mounted () {
    //  因为需要拿到容器，所以要挂载之后
     this.init()
 },
 methods: {
     init(){
         let chart = this.$eCharts.init(this.$refs.chart)
         let option = {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          }, //X轴
          yAxis: { type: 'value' }, //Y轴
          series: [
            {
              data: [120, 200, 150, 80, 70, 110, 130],
              type: 'bar',
            }] //配置项
         }
        chart.setOption(option)
 }
}

3.父组件引用测试：