這期內容當中小編將會給大家帶來有關echarts如何在Vue中使用，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創新互聯公司是一家集網站建設,茌平企業網站建設,茌平品牌網站建設,網站定制,茌平網站建設報價,網絡營銷,網絡優化,茌平網站推廣為一體的創新建站企業，幫助傳統企業提升企業形象加強企業競爭力。可充分滿足這一群體相比中小企業更為豐富、高端、多元的互聯網需求。同時我們時刻保持專業、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們為更多的企業打造出實用型網站。

1. 存放在vuex中

這么大型的項目，vuex少不了。在前面的組件中，一次請求數據，然后將數據存儲到了vuex中，echarts組件再從vuex中獲取數據。這樣的做法可能代碼要稍微復雜點，但是數據存儲在vuex中是隨時可見的，我們也能隨時保存獲取的結果，對這些數據可以添加收藏也可以加入緩存中，下次再請求可以先從緩存調用。
（然而這只是我前端的想法，后臺已經實現了對請求數據的緩存）

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

再對數據進行還原的時候（我的收藏，最近瀏覽），因為不需要保存或者收藏數據，我就直接用一個父組件請求，然后再分發到echarts組件，這樣沒有經過vuex，代碼想多要少些。

組件代碼

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

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

接著data部分我設置了那些將會引起變化的參數。需要注意的是，我并沒有將echarts的opt部分寫入到data中，因為整個圖表是基于數據驅動的，并且隨時會發生變化，因此我將opt設置為計算屬性computed，這樣opt將會根據我的選擇動態變化，echarts也將動態響應，mychart用于接收echarts生成的圖表實例，再參數變換的時候將會起作用。

props部分是我接收到的參數，這個組件時基于前面我講的第二種方式——父組件獲取數據分發，data是父組件分發給echarts的數據源。

暫時忽略兩個Vue生命周期鉤子， 后面講

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

opt就是該圖表組件的設置項了，這個參數按照官網給的配置，自己搭配即可。

接下來是methods部分，setEchart將會完成對整個圖表的初始化，通過this.$refs獲取DOM實例，再由echars生成實例并綁定在data中的mychart選項。

chartChange是用來響應我自定義組件的變化的，針對選框的不同將會有不同的顯示情況。在這里是百分比和數據的切換

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

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

updated周期里是響應參數變化的方法，首先檢測該實例有沒有生成（單頁應用因為用戶可能存在的誤操作，很可能導致實例沒有生成，這里檢測是很有必要的），接著在vue中的數據發生改變時運行chartChange方法，注意，我的選擇框是沒有綁定事件的，只是通過v-model改變了參數，然后opt動態響應了參數的變化。當opt的參數變化的時候，updated中的方法就會執行，echarts也會動態響應。這個就是使用基于數據驅動vue最精巧的地方，避免了通過事件調用echartChange方法。也是vue中使用echarts核心的一環

另外還有一個就是獲取地圖參數的，并不用在官網里下載，提供的npm包里就有，按需引用就好了（使用官網的js版本會報錯沒找到echarts）

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

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

父組件對echarts組件的調用

調用組件的方法按照常規組件調用就好了，只是因為echarts加載數據繪制需要耗費不少時間，我們可能需要通過keep-alive保存組件在內存中，避免切出去的時候被釋放了。另外可能一個頁面需要展示多個echarts類型組件，這里考慮使用component動態組件

上述就是小編為大家分享的echarts如何在Vue中使用了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注創新互聯網站建設公司行業資訊頻道。

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

本文標題：echarts如何在Vue中使用-創新互聯
當前URL：http://m.jcarcd.cn/article/ceposi.html