Vue2 使用 Echarts 創(chuàng)建圖表實例代碼

更新時間：2017年05月18日 14:17:29 作者：Generon

本篇文章主要介紹了Vue2 使用 Echarts 創(chuàng)建圖表實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下

在后臺管理系統(tǒng)中，圖表是一個很普遍的元素。目前常用的圖標插件有 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'))

二、創(chuàng)建圖表

首先需要在 HTML 中創(chuàng)建圖表的容器

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

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

然后在 mounted 中創(chuàng)建圖表，具體的配置參考官方文檔，這里不再贅述

三、按需引入

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

假如只需要創(chuàng)建一個餅圖，那么可以這么做：

 // 引入基本模板
 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 的媒體查詢

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

您可能感興趣的文章: