vue 項目中使用echarts 導緻編譯變慢_在Vue項目中使用ECharts

安裝

yarn add echarts vue-echarts

引入

import echarts from 'echarts'

如用TypeScript，還需安裝

yarn add --dev @types/echarts

使用

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

<script >
  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  scoped>
  .echarts {
    width: 100%;
    height: 100%;
  }
</style>
           

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