Echarts組件如何在Vue中使用？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

專注于為中小企業(yè)提供成都做網(wǎng)站、成都網(wǎng)站建設服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)如東免費做網(wǎng)站提供優(yōu)質的服務。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了成百上千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設實現(xiàn)規(guī)模擴充和轉變。

項目結構搭建

npm install -g vue-cli
vue init webpack vue-charts
cd vue-charts
npm run dev

安裝Echarts

直接使用npm進行安裝。

npm install Echarts --save

引入Echarts

//在main.js加入下面兩行代碼
import echarts from 'echarts'
Vue.prototype.$echarts = echarts //將echarts注冊成Vue的全局屬性

到此，準備工作已經(jīng)完成了。

靜態(tài)組件開發(fā)

因為被《React編程思想》這篇文章毒害太深，所以筆者開發(fā)組件也習慣從基礎到高級逐步迭代。

靜態(tài)組件要實現(xiàn)的目的很簡單，就是把Echarts圖表，渲染到頁面上。

新建Chart.vue文件

上述文件就實現(xiàn)了將一個簡單折線圖渲染到頁面的組件，怎么樣是不是很簡單？最簡使用方法如下：

App.vue

至此，運行程序你應該能看到以下效果：

 

第一次迭代

現(xiàn)在我們已經(jīng)有了一個基礎版本，讓我們來看看哪些方面做的還不盡如人意：

1. 圖表無法根據(jù)窗口大小進行自動縮放，雖然設置了寬度為100%，但是只有刷新頁面圖表才會重新進行渲染，這會讓用戶體驗變得很差。

2. 圖表目前無法實現(xiàn)數(shù)據(jù)自動刷新

下面我們來實現(xiàn)這兩點：

自動縮放

Echarts本身是不支持自動縮放的，但是Echarts為我們提供了resize方法。

//在init方法中加入下面這行代碼
window.addEventListener("resize", this.chart.resize);

只需要這一句，我們就實現(xiàn)了圖表跟隨窗口大小自適應的需求。

支持數(shù)據(jù)自動刷新

因為Echarts是數(shù)據(jù)驅動的，這意味著只要我們重新設置數(shù)據(jù)，那么圖表就會隨之重新渲染，這是實現(xiàn)本需求的基礎。我們再設想一下，如果想要支持數(shù)據(jù)的自動刷新，必然需要一個監(jiān)聽器能夠實時監(jiān)聽到數(shù)據(jù)的變化然后告知Echarts重新設置數(shù)據(jù)。所幸Vue為我們提供了==watcher==功能，通過它我們可以很方便的實現(xiàn)上述功能：

//在Chart.vue中加入watch
 watch: {
  //觀察option的變化
  option: {
   handler(newVal, oldVal) {
    if (this.chart) {
     if (newVal) {
      this.chart.setOption(newVal);
     } else {
      this.chart.setOption(oldVal);
     }
    } else {
      this.init();
    }
   },
   deep: true //對象內部屬性的監(jiān)聽，關鍵。
  }
 }

上面代碼就實現(xiàn)了我們對option對象中屬性變化的監(jiān)聽，一旦option中的數(shù)據(jù)有了變化，那么圖表就會重新渲染。

實現(xiàn)動態(tài)刷新

下一步我想大家都知道了，就是定時從后臺拉取數(shù)據(jù)，然后更新父組件的option就好。這個地方有兩個問題需要思考一下：

1. 如果圖表要求每秒增加一個數(shù)據(jù)，應該如何進行數(shù)據(jù)的請求才能達到性能與用戶體驗的平衡？

2. 動態(tài)更新數(shù)據(jù)的代碼，應該放在父組件還是子組件？

對第一個問題，每秒實時獲取服務器的數(shù)據(jù)，肯定是最精確的，這就有兩種方案：

• 每秒向后臺請求一次

• 保持長連接，后臺每秒向前端推送一次數(shù)據(jù)

第一種方案無疑對性能和資源產(chǎn)生了極大的浪費；除非實時性要求特別高（股票系統(tǒng)），否則不推薦這種方式；

第二種方案需要使用web Socket，但在服務端需要進行額外的開發(fā)工作。

筆者基于項目的實際需求（實時性要求不高，且后臺生成數(shù)據(jù)也有一定的延遲性），采用了以下方案：

1. 前端每隔一分鐘向后臺請求一次數(shù)據(jù)，且為當前時間的上一分鐘的數(shù)據(jù)；

2. 前端將上述數(shù)據(jù)每隔一秒向圖表set一次數(shù)據(jù)

關于第二個問題：筆者更傾向于將Chart組件設計成純組件，即只接收父組件傳遞的數(shù)據(jù)進行變化，不在內部進行復雜操作；這也符合目前前端MVVM框架的最佳實踐；而且若將數(shù)據(jù)傳遞到Chart組件內部再進行處理，一是遇到不需要動態(tài)渲染的需求還需要對組件進行額外處理，二是要在Chart內部做ajax操作，這樣就導致Chart完全沒有了可復用性。

接下來我們修改App.vue

至此我們就實現(xiàn)了圖表動態(tài)數(shù)據(jù)加載，效果如下圖：

 

看完上述內容，你們掌握Echarts組件如何在Vue中使用的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司行業(yè)資訊頻道，感謝各位的閱讀！

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

標題名稱：Echarts組件如何在Vue中使用-創(chuàng)新互聯(lián)
標題URL：http://weahome.cn/article/shsgc.html