Vue2 使用 Echarts 創(chuàng)建圖表實(shí)例代碼
在后臺(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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue中key為index和id的區(qū)別詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06
vue中使用 pinia 全局狀態(tài)管理的實(shí)現(xiàn)
本文主要介紹了vue中使用 pinia 全局狀態(tài)管理的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
這篇文章主要介紹了vue中子組件調(diào)用兄弟組件方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
VUE項(xiàng)目啟動(dòng)沒(méi)有問(wèn)題但代碼中script標(biāo)簽有藍(lán)色波浪線標(biāo)注
這篇文章主要給大家介紹了關(guān)于VUE項(xiàng)目啟動(dòng)沒(méi)有問(wèn)題但代碼中script標(biāo)簽有藍(lán)色波浪線標(biāo)注的相關(guān)資料,文中將遇到的問(wèn)題以及解決的方法介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
vue中nextTick函數(shù)和react類(lèi)似實(shí)現(xiàn)代碼
Vue 3 中的 nextTick 主要通過(guò) Promise 實(shí)現(xiàn)異步調(diào)度,返回一個(gè) Promise 對(duì)象,這篇文章主要介紹了vue中nextTick函數(shù)和react類(lèi)似實(shí)現(xiàn)代碼,需要的朋友可以參考下2024-04-04
解決Vue項(xiàng)目打包后打開(kāi)index.html頁(yè)面顯示空白以及圖片路徑錯(cuò)誤的問(wèn)題
這篇文章主要介紹了解決Vue項(xiàng)目打包后打開(kāi)index.html頁(yè)面顯示空白以及圖片路徑錯(cuò)誤的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
最近在學(xué)習(xí)vue的源碼，總結(jié)了幾種vue中父子組件傳遞數(shù)據(jù)的方法。具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
組件是vue.js最強(qiáng)大的功能之一,而組件實(shí)例的作用域是相互獨(dú)立的,這就意味著不同組件之間的數(shù)據(jù)無(wú)法相互引用,這篇文章主要給大家介紹了關(guān)于Vue3的10種組件通信方式的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
vue組件（全局，局部，動(dòng)態(tài)加載組件）
組件是Vue.js最強(qiáng)大的功能之一。組件可以擴(kuò)展HTML元素，封裝可重用的代碼。這篇文章主要介紹了vue組件（全局，局部，動(dòng)態(tài)加載組件）,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了vue.js動(dòng)態(tài)組件和插槽的使用匯總，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-05-05