npm install echarts --save

yarn add echarts --save  強烈推薦

cnpm install echarts --save

2、新建js檔案-->myEhcarts.js　

// myEhcarts.js
// 引入 echarts 核心模組，核心模組提供了 echarts 使用必須要的介面。
import * as echarts from 'echarts/core'

// 引入圖表型別，圖表字尾都為 Chart
import { BarChart, LineChart, PieChart, ScatterChart } from 'echarts/charts'

//
 
 引入提示框，標題，直角座標系等元件，元件字尾都為 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components'
// 標籤自動佈局，全域性過渡動畫等特性
import { LabelLayout, UniversalTransition } from 'echarts/features'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必須的一步
 

import { SVGRenderer } from 'echarts/renderers'

// 將以上引入的元件使用use()方法註冊
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DatasetComponent,
  TransformComponent,
  LabelLayout,
  UniversalTransition,
  BarChart,
  LineChart,
  PieChart,
  ScatterChart,
  SVGRenderer
])

 
// 匯出
export default echarts

3、main.js引入建立的myEhcarts.js

// 引入echarts
import echarts from "./echarts/echarts";
 
// 掛載到vue例項中
Vue.prototype.$echarts = echarts
 
使用時 ：  this.$echarts

4、案例

<template>
  <div>
　　{{ $t('dashboard.analysis.week') }} //國際化
    <div id="main"></div>
    <div id="mayChar"></div>
  </div>

</template>

<script>
export default {
  data () {
    return {}
  },
  methods: {
    // 基本柱形圖
    change () {
      const chartBox = this.$echarts.init(document.getElementById('main'))
      const option = {
        xAxis: {
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {},
        series: [
          {
            type: 'bar',
            data: [23, 24, 18, 25, 27, 28, 25]
          }
        ]
      }
      chartBox.setOption(option)
      // 根據頁面大小自動響應圖表大小
      window.addEventListener('resize', function () {
        chartBox.resize()
      })
    },
    // 折線圖
    changetype () {
      // 獲取元件例項
      const machart = this.$echarts.init(document.getElementById('mayChar'))
      // 設定配置項
      const option = {
        xAxis: {
          data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {},
        series: [
          {
            data: [10, 22, 28, 43, 49],
            type: 'line',
            stack: 'x'
          },
          {
            data: [5, 4, 3, 5, 10],
            type: 'line',
            stack: 'x'
          }
        ]
      }
      // 複製
      machart.setOption(option)
      // 根據頁面大小自動響應圖表大小
      window.addEventListener('resize', function () {
        machart.resize()
      })
    }
  },
  mounted () {
    this.change()
    this.changetype()
  }
}
</script>

<style lang="less" scoped>
#main {
  min-width: 31.25rem;
  min-height: 31.25rem;
  // max-height: 500px;
}
#mayChar {
  max-height: 500px;
  // max-height: 400px;
  height: 500px;
}
</style>

 效果：