安裝依賴

npm install echarts -save
或
npm install echarts -S
或（使用國內(nèi)的淘寶鏡像）
cnpm install echarts -S

創(chuàng)建組件

1.在src下創(chuàng)建文件夾echarts
2.在文件夾echarts下創(chuàng)建testEchart.vue

<template>
   <div id="myChart" class="chart" :style="{width: '100%', height: '500px'}"></div>
</template>

<script>
  // vue文件中引入echarts工具
  let echarts = require('echarts/lib/echarts')
  require('echarts/lib/chart/line')
  // 以下的組件按需引入
  require('echarts/lib/component/tooltip')   // tooltip組件
  require('echarts/lib/component/title')   //  title組件
  require('echarts/lib/component/legend')  // legend組件


  export default {
    name: 'xwPassengerFlow',
    data() {
      return {
        xAxisData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], // x軸數(shù)據(jù)，可根據(jù)需求 直角坐標(biāo)系 X 軸
        yAxisData1: [120, 132, 101, 134, 90, 230, 210], // 數(shù)據(jù)1 郵件營銷
        yAxisData2: [220, 182, 191, 234, 290, 330, 310], // 數(shù)據(jù)2 聯(lián)盟廣告
        yAxisData3: [150, 232, 201, 154, 190, 330, 410], // 數(shù)據(jù)3 視頻廣告
        yAxisData4: [320, 332, 301, 334, 390, 330, 320], // 數(shù)據(jù)4 直接訪問
        yAxisData5: [820, 932, 901, 934, 1290, 1330, 1320], // 數(shù)據(jù)5 搜索引擎
      }
    },
    mounted() {
      this.loadLine();
    },
    methods: {
      loadLine() {
        let option = {
          // option 每個屬性是一類組件
          title: {
            // 圖標(biāo)題
            text: '測試折線圖堆疊'
          },
          tooltip: {
            trigger: 'axis' //提示框組件，坐標(biāo)軸觸發(fā)
          },
          //圖例組件，
          legend: {
            data: ['郵件營銷', '聯(lián)盟廣告', '視頻廣告', '直接訪問', '搜索引擎']
          },
          //直角坐標(biāo)系內(nèi)繪圖網(wǎng)格
          grid: {
            left: '3%', //grid 組件離容器左側(cè)的距離
            right: '4%',
            bottom: '3%',
            containLabel: true //grid 區(qū)域是否包含坐標(biāo)軸的刻度標(biāo)簽
          },
         // 如果有多個同類組件，那么就是個數(shù)組。例如這里有三個 X 軸。
          xAxis: {
            type: 'category',
            boundaryGap: false, //坐標(biāo)軸兩邊留白策略 默認(rèn)為 true，這時候刻度只是作為分隔線，標(biāo)簽和數(shù)據(jù)點都會在兩個刻度之間的帶(band)中間
            data: this.xAxisData // x軸數(shù)據(jù)
          },
          yAxis: {
            type: 'value'
          },
         // 這里有多個系列，也是構(gòu)成一個數(shù)組。[表示實際數(shù)據(jù)]
          series: [
            {
              name: '郵件營銷',
              type: 'line',
              stack: '總量',
              data: this.yAxisData1 // y軸數(shù)據(jù)1
            },
     {
              name: '聯(lián)盟廣告',
              type: 'line',
              stack: '總量',
              data: this.yAxisData2 // y軸數(shù)據(jù)2
            },
            {
              name: '視頻廣告',
              type: 'line',
              stack: '總量',
              data: this.yAxisData3 // y軸數(shù)據(jù)3
            },
            {
              name: '直接訪問',
              type: 'line',
              stack: '總量',
              data: this.yAxisData4 // y軸數(shù)據(jù)5
            },
            {
              name: '搜索引擎',
              type: 'line',
              stack: '總量',
              data: this.yAxisData5 // y軸數(shù)據(jù)5
            }
          ]
        }
        // 創(chuàng)建 echarts 實例。
        this.myChartOne = echarts.init(document.getElementById('myChart'))
        // 調(diào)用 setOption 將 option 輸入 echarts，然后 echarts 渲染圖表。
        this.myChartOne.setOption(option)
      },
    }
  }

</script>

<style>
</style>

以上為主要代碼，完成后引入到主頁面運行即可。
效果如下：

效果圖