vue-admin-template 新手學習（八）Echarts圖表

安裝依賴   npm install echarts --save

在main.js全局引入

import echarts from 'echarts'

Vue.prototype.$eacharts = echarts

準備echarts容器

<template>
  <div class="chart-container">
    <chart height="100%" width="100%" />
  </div>
</template>

 

在mounted生命週期函數中實例化對象 確保dom元素已經掛載到頁面

  mounted() {
    this.initChart()
  }

在methods 定義一個方法

initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
      const xData = (function() {
        const data = []
        for (let i = 1; i < 13; i++) {
          data.push(i + 'month')
        }
        return data
      }())
      this.chart.setOption({

        //設置title legend grid series xAxis yAxis tooltip dataZoom 。。。
      })
  }
}