安裝
yarn add echarts vue-echarts
引入
import echarts from 'echarts'
如用TypeScript，還需安裝yarn add --dev @types/echarts
使用

<template>
  <Echart :options="polar"/>
</template>

<script lang="ts">
  import Vue from 'vue';
  import {Component} from 'vue-property-decorator';
  import ECharts from 'vue-echarts';
  import 'echarts/lib/chart/line';

@Component({
    components: {ECharts}
  })
  export default class Chart extends Vue {
   get polar(){
      return {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line'
        }],
        tooltip: {show: true}
      }
    }
  }
</script>

<style lang="scss" scoped>
  .echarts {
    width: 100%;
    height: 100%;
  }
</style>

可得到折線圖，具體圖表樣式的修改可參考ECharts官網。

image.png