這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)echarts如何在Vue中使用，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),茌平企業(yè)網(wǎng)站建設(shè),茌平品牌網(wǎng)站建設(shè),網(wǎng)站定制,茌平網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,茌平網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

1. 存放在vuex中

這么大型的項(xiàng)目，vuex少不了。在前面的組件中，一次請(qǐng)求數(shù)據(jù)，然后將數(shù)據(jù)存儲(chǔ)到了vuex中，echarts組件再從vuex中獲取數(shù)據(jù)。這樣的做法可能代碼要稍微復(fù)雜點(diǎn)，但是數(shù)據(jù)存儲(chǔ)在vuex中是隨時(shí)可見的，我們也能隨時(shí)保存獲取的結(jié)果，對(duì)這些數(shù)據(jù)可以添加收藏也可以加入緩存中，下次再請(qǐng)求可以先從緩存調(diào)用。
（然而這只是我前端的想法，后臺(tái)已經(jīng)實(shí)現(xiàn)了對(duì)請(qǐng)求數(shù)據(jù)的緩存）

2. 存放在組件中，再分派到echarts組件

再對(duì)數(shù)據(jù)進(jìn)行還原的時(shí)候（我的收藏，最近瀏覽），因?yàn)椴恍枰４婊蛘呤詹財(cái)?shù)據(jù)，我就直接用一個(gè)父組件請(qǐng)求，然后再分發(fā)到echarts組件，這樣沒有經(jīng)過vuex，代碼想多要少些。

組件代碼

這是組件的html部分，可以看見top以及des是我自己添加的，bottom才是核心，也是整個(gè)echarts展示的部分，注意這里添加了ref，在script的代碼中，我們將通過這個(gè)鉤子，將DOM掛載到echarts中

首先我引入了需要的echarts組件，這個(gè)部分通過npm i echarts -S添加。

接著data部分我設(shè)置了那些將會(huì)引起變化的參數(shù)。需要注意的是，我并沒有將echarts的opt部分寫入到data中，因?yàn)檎麄€(gè)圖表是基于數(shù)據(jù)驅(qū)動(dòng)的，并且隨時(shí)會(huì)發(fā)生變化，因此我將opt設(shè)置為計(jì)算屬性computed，這樣opt將會(huì)根據(jù)我的選擇動(dòng)態(tài)變化，echarts也將動(dòng)態(tài)響應(yīng)，mychart用于接收echarts生成的圖表實(shí)例，再參數(shù)變換的時(shí)候?qū)?huì)起作用。

props部分是我接收到的參數(shù)，這個(gè)組件時(shí)基于前面我講的第二種方式——父組件獲取數(shù)據(jù)分發(fā)，data是父組件分發(fā)給echarts的數(shù)據(jù)源。

暫時(shí)忽略兩個(gè)Vue生命周期鉤子， 后面講

計(jì)算屬性中設(shè)置了兩個(gè)屬性，origin和opt，注意這個(gè)origin很重要，通過它我將opt項(xiàng)與復(fù)雜的數(shù)據(jù)解耦，無論外面的數(shù)據(jù)怎么換，opt只關(guān)心origin的值，而這個(gè)opt在兩種數(shù)據(jù)獲取的方式中是不一樣的，使用vuex的方式，origin將會(huì)直接從vuex中獲取數(shù)據(jù)。這樣一定程度上也實(shí)現(xiàn)了組件的復(fù)用。

opt就是該圖表組件的設(shè)置項(xiàng)了，這個(gè)參數(shù)按照官網(wǎng)給的配置，自己搭配即可。

接下來是methods部分，setEchart將會(huì)完成對(duì)整個(gè)圖表的初始化，通過this.$refs獲取DOM實(shí)例，再由echars生成實(shí)例并綁定在data中的mychart選項(xiàng)。

chartChange是用來響應(yīng)我自定義組件的變化的，針對(duì)選框的不同將會(huì)有不同的顯示情況。在這里是百分比和數(shù)據(jù)的切換

接著是前面忽略的生命周期部分

mounted里使用setEchart方法，初始化圖表組件，一定要在這里使用該方法，否則會(huì)找不到DOM

updated周期里是響應(yīng)參數(shù)變化的方法，首先檢測(cè)該實(shí)例有沒有生成（單頁應(yīng)用因?yàn)橛脩艨赡艽嬖诘恼`操作，很可能導(dǎo)致實(shí)例沒有生成，這里檢測(cè)是很有必要的），接著在vue中的數(shù)據(jù)發(fā)生改變時(shí)運(yùn)行chartChange方法，注意，我的選擇框是沒有綁定事件的，只是通過v-model改變了參數(shù)，然后opt動(dòng)態(tài)響應(yīng)了參數(shù)的變化。當(dāng)opt的參數(shù)變化的時(shí)候，updated中的方法就會(huì)執(zhí)行，echarts也會(huì)動(dòng)態(tài)響應(yīng)。這個(gè)就是使用基于數(shù)據(jù)驅(qū)動(dòng)vue最精巧的地方，避免了通過事件調(diào)用echartChange方法。也是vue中使用echarts核心的一環(huán)

另外還有一個(gè)就是獲取地圖參數(shù)的，并不用在官網(wǎng)里下載，提供的npm包里就有，按需引用就好了（使用官網(wǎng)的js版本會(huì)報(bào)錯(cuò)沒找到echarts）

import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/map';
import 'echarts/map/js/china.js';

style部分就沒什么好聊的了，只需要記住一點(diǎn)，必須顯式指定加載echarts 的DOM的寬度和高度

父組件對(duì)echarts組件的調(diào)用

調(diào)用組件的方法按照常規(guī)組件調(diào)用就好了，只是因?yàn)閑charts加載數(shù)據(jù)繪制需要耗費(fèi)不少時(shí)間，我們可能需要通過keep-alive保存組件在內(nèi)存中，避免切出去的時(shí)候被釋放了。另外可能一個(gè)頁面需要展示多個(gè)echarts類型組件，這里考慮使用component動(dòng)態(tài)組件

上述就是小編為大家分享的echarts如何在Vue中使用了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站名稱：echarts如何在Vue中使用-創(chuàng)新互聯(lián)
URL鏈接：http://weahome.cn/article/ceposi.html