在後臺管理系統中，圖表是一個很普遍的元素。目前常用的圖示外掛有 charts,  Echarts, highcharts。這次將介紹 Echarts 在 Vue 專案中的應用。

一、安裝外掛

使用 cnpm 安裝 Echarts

cnpm install echarts -S

和之前介紹的 axios 類似，echarts 也不能通過 Vue.use() 進行全域性呼叫

通常是在需要使用圖表的 .vue 檔案中直接引入

import echarts from 'echarts'

也可以在 main.js 中引入，然後修改原型鏈

Vue.prototype.$echarts = echarts 
 

然後就可以全域性使用了

let myChart = this.$echarts.init(document.getElementById('myChart'))

二、建立圖表

首先需要在 HTML 中建立圖表的容器

需要注意的是，圖表的容器必須指定寬高，也就是說 width，height 不能使用百分比，只能用 px

這樣確實不夠靈活，不過我們可以用 js 來改變 width 和 height，使圖表容器能夠自適應，具體的實現請往後看

然後在 mounted 中建立圖表，具體的配置參考官方文件，這裡不再贅述

三、按需引入

上面引入的 echarts 包含了所有圖表，但有時候我們只需要一兩個基本圖表，這時候完整的 echarts 就顯得累贅

假如只需要建立一個餅圖，那麼可以這麼做：

  // 引入基本模板
  let echarts = require('echarts/lib/echarts')
  // 引入餅圖元件
  require('echarts/lib/chart/pie')
  // 引入提示框和圖例元件
  require('echarts/lib/component/tooltip')
  require('echarts/lib/component/legend')

之所以使用 require 而不是 import，是因為 require 可以直接從 node_modules 中查詢，而 import 必須把路徑寫全

四、適應容器

上面說過，圖表的容器必須固定寬高，這確實是一個比較反人類的設定

為了解決這個問題，需要給圖表容器外面再加一個容器，而這個外容器的寬高可以適應頁面。上面的 <div class="charts"> 就是這樣的外容器

let chartBox = document.getElementsByClassName('charts')[0]
let myChart = document.getElementById('myChart')

// 用於使chart自適應高度和寬度,通過窗體高寬計算容器高寬
function resizeCharts () {
  myChart.style.width = chartBox.style.width + 'px'
  myChart.style.height = chartBox.style.height + 'px'
}
// 設定容器高寬
resizeCharts()
      
let mainChart = echarts.init(myChart)
mainChart.setOption(options)

當頁面載入的時候，將外容器的寬高，賦給圖表容器

但這只是解決了頁面載入時的自適應問題

如果在頁面載入之後，仍需要圖表自適應寬高，就需要用到 echarts 的媒體查詢