在后臺管理系統中，圖表是一個很普遍的元素。目前常用的圖標插件有 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 必須把路徑寫全

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

 四、適應容器

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

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。