第一步：安装echarts依赖

cnpm install echarts -S

第二步：在main.js中全局引入

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

第三步：在你的组件或页面中 a.vue使用

<div id="myChart" :style="{width: '600px', height: '600px'}"></div>
 
js部分代码：
export default {
  mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
        xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
          type: "value",
          show: true,
          name: "y轴标题",
          axisLine: { // y轴轴线设置
            show: true, 
          },
    },
    series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
    }]
        });
    }
  }
}

将echarts封装成一个子组件，然后在父组件中调用

子组件内容

<template>
  <div class="container">
    <div
      :id="ids"
      :style="{ width: '500px', height: '600px', border: '1px solid #000' }"
    ></div>
  </div>
</template>

<script>
export default {
  props: ["x", "y", "ids", "type"],
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById(this.ids));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "ECharts 入门示例",   // y轴的名字
        },
        tooltip: {
          show: true, //当光标移上柱形图时是否有文本提示
        },
        xAxis: {
          type: "category",
          data: this.x,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.y,
            type: this.type,
          },
        ],
      });
    },
  },
};
</script>
<style scoped>
#a,
#b {
  float: left;
  margin: 20px 50px;
}
</style>

在父组件中调用

<template>
  <div class="container">
    <!-- x是x轴数据， y是y轴数据-->
    <!-- 折线图 -->
    <MyEcharts :x='x' :y="y" ids='a' type="line"></MyEcharts>

    <!-- 柱形图 -->
    <MyEcharts :x='x' :y="y" ids='b' type="bar"></MyEcharts>
  </div>
</template>

<script>
import MyEcharts from "../components/MyEcharts.vue"

export default {
  components:{
    MyEcharts
  },
  data(){
    return {
      x:["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      y:[150, 230, 224, 218, 135, 147, 260],
    }
  }
};
</script>

<style scoped>

</style>

常见问题

1、将echarts封装成子组件，在父组件多次调用子组件时，却只有一个图表

答：原因：多次调用子组件，但是容纳图表的div只有一个，id具有唯一性，所以只会显示一个图表

        解决办法：当在父组件多次调用子组件时，传过去不同的id名

2、在vue中引入echarts（import echarts from 'echarts'）出现的报错问题

（[Vue warn]: Error in mounted hook: "TypeError: this.$echarts is undefined"）

解决办法：将import echarts from 'echarts'换成import * as echarts from 'echarts';

3、当使用tab切换echarts组件但没有效果

解决办法：

<echarts :ids='id' :key='id'></echarts>

给echarts组件加一个:key='变量'，区分一下

原效果  切换前

原效果  切换后