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

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

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

在后臺(tái)管理系統(tǒng)中，圖表是一個(gè)很普遍的元素。目前常用的圖標(biāo)插件有 charts, Echarts, highcharts。這次將介紹 Echarts 在 Vue 項(xiàng)目中的應(yīng)用。

一、安裝插件

使用 cnpm 安裝 Echarts

cnpm install echarts -S

和之前介紹的 axios 類(lèi)似，echarts 也不能通過(guò) Vue.use() 進(jìn)行全局調(diào)用

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

import echarts from 'echarts'

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

Vue.prototype.$echarts = echarts

然后就可以全局使用了

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

二、創(chuàng)建圖表

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

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

這樣確實(shí)不夠靈活，不過(guò)我們可以用 js 來(lái)改變 width 和 height，使圖表容器能夠自適應(yīng)，具體的實(shí)現(xiàn)請(qǐng)往后看

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

三、按需引入

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

假如只需要?jiǎng)?chuàng)建一個(gè)餅圖，那么可以這么做：

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

之所以使用 require 而不是 import，是因?yàn)?require 可以直接從 node_modules 中查找，而 import 必須把路徑寫(xiě)全

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

四、適應(yīng)容器

上面說(shuō)過(guò)，圖表的容器必須固定寬高，這確實(shí)是一個(gè)比較奇特的設(shè)定

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

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

// 用于使chart自適應(yīng)高度和寬度,通過(guò)窗體高寬計(jì)算容器高寬
function resizeCharts () {
 myChart.style.width = chartBox.style.width + 'px'
 myChart.style.height = chartBox.style.height + 'px'
}
// 設(shè)置容器高寬
resizeCharts()
   
let mainChart = echarts.init(myChart)
mainChart.setOption(options)

當(dāng)頁(yè)面加載的時(shí)候，將外容器的寬高，賦給圖表容器

但這只是解決了頁(yè)面加載時(shí)的自適應(yīng)問(wèn)題

如果在頁(yè)面加載之后，仍需要圖表自適應(yīng)寬高，就需要用到 echarts 的媒體查詢

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: