Vue 爬坑之路（八）—— 使用 Echarts 建立圖表

在後臺管理系統中，圖表是一個很廣泛的元素。目前經常使用的圖標插件有 charts,  Echarts, highcharts。此次將介紹 Echarts 在 Vue 項目中的應用。

 

1、安裝插件

使用 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'))

 

2、建立圖表

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

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

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

而後在 mounted 中建立圖表，具體的配置參考官方文檔，這裏再也不贅述

 

3、按需引入

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

假如只須要建立一個餅圖，那麼能夠這麼作：

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

能夠按需引入的模塊列表見 https://github.com/ecomfe/echarts/blob/master/index.js

 

4、適應容器

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

爲了解決這個問題，須要給圖表容器外面再加一個容器，而這個外容器的寬高能夠適應頁面。上面的 <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 的媒體查詢