cnpm i echarts --save

第二步:使用ecahrt

src/main.js
import echarts from 'echarts'
Vue.prototype.$echarts=echarts

解釋：

    在main.js中引入echarts， 然後賦值到Vue的原型上面，在頁面就可以使用this.$echarts獲取到了

第三步:例項效果和程式碼

<template>
  <div class="content-box">
    <!-- vue的ref可以通過this.$refs.獲取到DOM節點 -->
    <!-- echart容器div必須設定高度，否則不顯示 -->
    <div ref="echart" style="height:300px;"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$nextTick(() => {
      this.initEchart();
    });
  },
  methods:{
    initEchart(){
      //獲取DOM節點並初始化
      let chart = this.$echarts.init(this.$refs.echart);
      //編寫echart引數
      let option = {
        xAxis : [
          {
            type : 'category',
            boundaryGap : false,
            data : ['週一','週二','週三','週四','週五','週六','週日']
          }
        ],
        yAxis : [
          {
            type : 'value'
          }
        ],
        series : [
          {
            name:'郵件營銷',
            type:'line',
            stack: '總量',
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:[120, 132, 101, 134, 90, 230, 210]
          },
          {
            name:'聯盟廣告',
            type:'line',
            stack: '總量',
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:[220, 182, 191, 234, 290, 330, 310]
          },
        ]
      };
      //設定圖表的引數
      chart.setOption(option);
    }
  }
}
</script>