資訊專欄INFORMATION COLUMN
摘要：靜態(tài)組件開發(fā)因為被編程思想這篇文章毒害太深，所以筆者開發(fā)組件也習(xí)慣從基礎(chǔ)到高級逐步迭代。靜態(tài)組件要實現(xiàn)的目的很簡單，就是把圖表，渲染到頁面上。實現(xiàn)動態(tài)刷新下一步我想大家都知道了，就是定時從后臺拉取數(shù)據(jù)，然后更新父組件的就好。
從幾年前流行的jQuery插件，到現(xiàn)在React和Vue的組件，在業(yè)務(wù)需求的開發(fā)中抽象通用出通用的模塊，一直都是一個對個人技術(shù)提高非常有幫助的事情。本文從一個真實業(yè)務(wù)組件的開發(fā)，來介紹封裝一個組件應(yīng)該如何從哪些方面去思考，以及在使用框架開發(fā)的今天，核心基礎(chǔ)知識的重要性。需求背景
dashboard作為目前企業(yè)中后臺產(chǎn)品的“門面”，如何更加實時、高效、炫酷的對統(tǒng)計數(shù)據(jù)進(jìn)行展示，是值得前端開發(fā)工程師和UI設(shè)計師共同思考的一個問題。今天就從0開始，封裝一個動態(tài)渲染數(shù)據(jù)的Echarts折線圖組件，拋磚引玉，一起來思考更多有意思的組件。
準(zhǔn)備工作 項目結(jié)構(gòu)搭建因為生產(chǎn)需要（其實是懶），所以本教程使用了 ==vue-cli==進(jìn)行了項目的基礎(chǔ)結(jié)構(gòu)搭建。
npm install -g vue-cli vue init webpack vue-charts cd vue-charts npm run dev安裝Echarts
直接使用npm進(jìn)行安裝。
npm install echarts --save引入Echarts
//在main.js加入下面兩行代碼 import echarts from "echarts" Vue.prototype.$echarts = echarts //將echarts注冊成Vue的全局屬性
到此，準(zhǔn)備工作已經(jīng)完成了。
靜態(tài)組件開發(fā)因為被《React編程思想》這篇文章毒害太深，所以筆者開發(fā)組件也習(xí)慣從基礎(chǔ)到高級逐步迭代。
靜態(tài)組件要實現(xiàn)的目的很簡單，就是把Echarts圖表，渲染到頁面上。
新建Chart.vue文件上述文件就實現(xiàn)了將一個簡單折線圖渲染到頁面的組件，怎么樣是不是很簡單？最簡使用方法如下：
App.vue至此，運行程序你應(yīng)該能看到以下效果：
現(xiàn)在我們已經(jīng)有了一個基礎(chǔ)版本，讓我們來看看哪些方面做的還不盡如人意：
圖表無法根據(jù)窗口大小進(jìn)行自動縮放，雖然設(shè)置了寬度為100%，但是只有刷新頁面圖表才會重新進(jìn)行渲染，這會讓用戶體驗變得很差。
圖表目前無法實現(xiàn)數(shù)據(jù)自動刷新
下面我們來實現(xiàn)這兩點：
自動縮放Echarts本身是不支持自動縮放的，但是Echarts為我們提供了resize方法。
//在init方法中加入下面這行代碼
window.addEventListener("resize", this.chart.resize);
只需要這一句，我們就實現(xiàn)了圖表跟隨窗口大小自適應(yīng)的需求。
支持?jǐn)?shù)據(jù)自動刷新因為Echarts是數(shù)據(jù)驅(qū)動的，這意味著只要我們重新設(shè)置數(shù)據(jù)，那么圖表就會隨之重新渲染，這是實現(xiàn)本需求的基礎(chǔ)。我們再設(shè)想一下，如果想要支持?jǐn)?shù)據(jù)的自動刷新，必然需要一個監(jiān)聽器能夠?qū)崟r監(jiān)聽到數(shù)據(jù)的變化然后告知Echarts重新設(shè)置數(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 //對象內(nèi)部屬性的監(jiān)聽，關(guān)鍵。
}
}
上面代碼就實現(xiàn)了我們對option對象中屬性變化的監(jiān)聽，一旦option中的數(shù)據(jù)有了變化，那么圖表就會重新渲染。
實現(xiàn)動態(tài)刷新下一步我想大家都知道了，就是定時從后臺拉取數(shù)據(jù)，然后更新父組件的option就好。這個地方有兩個問題需要思考一下：
如果圖表要求每秒增加一個數(shù)據(jù)，應(yīng)該如何進(jìn)行數(shù)據(jù)的請求才能達(dá)到性能與用戶體驗的平衡？
動態(tài)更新數(shù)據(jù)的代碼，應(yīng)該放在父組件還是子組件？
對第一個問題，每秒實時獲取服務(wù)器的數(shù)據(jù)，肯定是最精確的，這就有兩種方案：
每秒向后臺請求一次
保持長連接，后臺每秒向前端推送一次數(shù)據(jù)
第一種方案無疑對性能和資源產(chǎn)生了極大的浪費；除非實時性要求特別高（股票系統(tǒng)），否則不推薦這種方式；
第二種方案需要使用web Socket，但在服務(wù)端需要進(jìn)行額外的開發(fā)工作。
筆者基于項目的實際需求（實時性要求不高，且后臺生成數(shù)據(jù)也有一定的延遲性），采用了以下方案：
前端每隔一分鐘向后臺請求一次數(shù)據(jù)，且為當(dāng)前時間的上一分鐘的數(shù)據(jù)；
前端將上述數(shù)據(jù)每隔一秒向圖表set一次數(shù)據(jù)
關(guān)于第二個問題：筆者更傾向于將Chart組件設(shè)計成純組件，即只接收父組件傳遞的數(shù)據(jù)進(jìn)行變化，不在內(nèi)部進(jìn)行復(fù)雜操作；這也符合目前前端MVVM框架的最佳實踐；而且若將數(shù)據(jù)傳遞到Chart組件內(nèi)部再進(jìn)行處理，一是遇到不需要動態(tài)渲染的需求還需要對組件進(jìn)行額外處理，二是要在Chart內(nèi)部做ajax操作，這樣就導(dǎo)致Chart完全沒有了可復(fù)用性。
接下來我們修改App.vue
至此我們就實現(xiàn)了圖表動態(tài)數(shù)據(jù)加載，效果如下圖：
總結(jié)這篇教程通過一個動態(tài)圖表的開發(fā)，傳遞了以下信息：
Echarts如何與Vue結(jié)合使用
Vue組件開發(fā)、純組件與“臟”組件的區(qū)別
Vue watch的用法
let的特性
JavaScript EventLoop特性
...
大家可以根據(jù)這個列表查漏補缺。
后續(xù)優(yōu)化這個組件還有需要需要優(yōu)化的點，比如：
間隔時間應(yīng)該可配置
每分鐘從后臺獲取數(shù)據(jù)，那么圖表展示的數(shù)據(jù)將會越來越多，越來越密集，瀏覽器負(fù)擔(dān)越來越大，直到崩潰
沒有設(shè)置暫停圖表刷新的按鈕
...
期待大家自己動手，開發(fā)一個屬于自己的“完美”的Echarts動態(tài)組件！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/93581.html
摘要：最近阿里正式開源的圖表庫基于技術(shù)棧，各個圖表項皆采用了組件的形式，貼近的使用特點。相關(guān)文檔組件化阿里的圖表組件手拉手，用開發(fā)動態(tài)刷新組件文檔地址一安裝通過引入二引用成功安裝完成之后，即可使用或進(jìn)行引用。最近阿里正式開源的BizCharts圖表庫基于React技術(shù)棧，各個圖表項皆采用了組件的形式，貼近React的使用特點。同時BizCharts基于G2進(jìn)行封裝，Bizcharts也繼承了G2相...
摘要：社區(qū)的認(rèn)可目前已經(jīng)是相關(guān)最多的開源項目了，體現(xiàn)出了社區(qū)對其的認(rèn)可。監(jiān)聽事件手動維護(hù)列表這樣我們就簡單的完成了拖拽排序。 完整項目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺 系列一(基礎(chǔ)篇)系類文章二：手摸手，帶你用vue擼后臺 系列二(登錄權(quán)限篇)系類文章三：手摸手，帶你用vue擼后臺 系列三(實戰(zhàn)篇）系類文章四：手摸手，帶你用vue擼后臺 系列...
摘要：社區(qū)的認(rèn)可目前已經(jīng)是相關(guān)最多的開源項目了，體現(xiàn)出了社區(qū)對其的認(rèn)可。監(jiān)聽事件手動維護(hù)列表這樣我們就簡單的完成了拖拽排序。 完整項目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺 系列一(基礎(chǔ)篇)系類文章二：手摸手，帶你用vue擼后臺 系列二(登錄權(quán)限篇)系類文章三：手摸手，帶你用vue擼后臺 系列三(實戰(zhàn)篇）系類文章四：手摸手，帶你用vue擼后臺 系列...
摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...
閱讀 2749·2021-10-11 10:57
閱讀 1577·2021-09-26 09:55
閱讀 1316·2021-09-06 15:11
閱讀 3457·2021-08-26 14:16
閱讀 674·2019-08-30 15:54
閱讀 543·2019-08-30 12:43
閱讀 3300·2019-08-29 16:18
閱讀 2576·2019-08-23 16:14
