国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

手拉手,用Vue開發(fā)動(dòng)態(tài)刷新Echarts組件

justCoding / 1843人閱讀

摘要:靜態(tài)組件開發(fā)因?yàn)楸痪幊趟枷脒@篇文章毒害太深,所以筆者開發(fā)組件也習(xí)慣從基礎(chǔ)到高級(jí)逐步迭代。靜態(tài)組件要實(shí)現(xiàn)的目的很簡(jiǎn)單,就是把圖表,渲染到頁(yè)面上。實(shí)現(xiàn)動(dòng)態(tài)刷新下一步我想大家都知道了,就是定時(shí)從后臺(tái)拉取數(shù)據(jù),然后更新父組件的就好。

從幾年前流行的jQuery插件,到現(xiàn)在React和Vue的組件,在業(yè)務(wù)需求的開發(fā)中抽象通用出通用的模塊,一直都是一個(gè)對(duì)個(gè)人技術(shù)提高非常有幫助的事情。本文從一個(gè)真實(shí)業(yè)務(wù)組件的開發(fā),來(lái)介紹封裝一個(gè)組件應(yīng)該如何從哪些方面去思考,以及在使用框架開發(fā)的今天,核心基礎(chǔ)知識(shí)的重要性。
需求背景

dashboard作為目前企業(yè)中后臺(tái)產(chǎn)品的“門面”,如何更加實(shí)時(shí)、高效、炫酷的對(duì)統(tǒng)計(jì)數(shù)據(jù)進(jìn)行展示,是值得前端開發(fā)工程師和UI設(shè)計(jì)師共同思考的一個(gè)問題。今天就從0開始,封裝一個(gè)動(dòng)態(tài)渲染數(shù)據(jù)的Echarts折線圖組件,拋磚引玉,一起來(lái)思考更多有意思的組件。

準(zhǔn)備工作 項(xiàng)目結(jié)構(gòu)搭建

因?yàn)樯a(chǎn)需要(其實(shí)是懶),所以本教程使用了 ==vue-cli==進(jìn)行了項(xiàng)目的基礎(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注冊(cè)成Vue的全局屬性

到此,準(zhǔn)備工作已經(jīng)完成了。

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

因?yàn)楸弧禦eact編程思想》這篇文章毒害太深,所以筆者開發(fā)組件也習(xí)慣從基礎(chǔ)到高級(jí)逐步迭代。

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

新建Chart.vue文件


上述文件就實(shí)現(xiàn)了將一個(gè)簡(jiǎn)單折線圖渲染到頁(yè)面的組件,怎么樣是不是很簡(jiǎn)單?最簡(jiǎn)使用方法如下:

App.vue


至此,運(yùn)行程序你應(yīng)該能看到以下效果:

第一次迭代

現(xiàn)在我們已經(jīng)有了一個(gè)基礎(chǔ)版本,讓我們來(lái)看看哪些方面做的還不盡如人意:

圖表無(wú)法根據(jù)窗口大小進(jìn)行自動(dòng)縮放,雖然設(shè)置了寬度為100%,但是只有刷新頁(yè)面圖表才會(huì)重新進(jìn)行渲染,這會(huì)讓用戶體驗(yàn)變得很差。

圖表目前無(wú)法實(shí)現(xiàn)數(shù)據(jù)自動(dòng)刷新

下面我們來(lái)實(shí)現(xiàn)這兩點(diǎn):

自動(dòng)縮放

Echarts本身是不支持自動(dòng)縮放的,但是Echarts為我們提供了resize方法。

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

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

支持?jǐn)?shù)據(jù)自動(dòng)刷新

因?yàn)镋charts是數(shù)據(jù)驅(qū)動(dòng)的,這意味著只要我們重新設(shè)置數(shù)據(jù),那么圖表就會(huì)隨之重新渲染,這是實(shí)現(xiàn)本需求的基礎(chǔ)。我們?cè)僭O(shè)想一下,如果想要支持?jǐn)?shù)據(jù)的自動(dòng)刷新,必然需要一個(gè)監(jiān)聽器能夠?qū)崟r(shí)監(jiān)聽到數(shù)據(jù)的變化然后告知Echarts重新設(shè)置數(shù)據(jù)。所幸Vue為我們提供了watcher功能,通過(guò)它我們可以很方便的實(shí)現(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 //對(duì)象內(nèi)部屬性的監(jiān)聽,關(guān)鍵。
    }
  }

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

實(shí)現(xiàn)動(dòng)態(tài)刷新

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

如果圖表要求每秒增加一個(gè)數(shù)據(jù),應(yīng)該如何進(jìn)行數(shù)據(jù)的請(qǐng)求才能達(dá)到性能與用戶體驗(yàn)的平衡?

動(dòng)態(tài)更新數(shù)據(jù)的代碼,應(yīng)該放在父組件還是子組件?

對(duì)第一個(gè)問題,每秒實(shí)時(shí)獲取服務(wù)器的數(shù)據(jù),肯定是最精確的,這就有兩種方案:

每秒向后臺(tái)請(qǐng)求一次

保持長(zhǎng)連接,后臺(tái)每秒向前端推送一次數(shù)據(jù)

第一種方案無(wú)疑對(duì)性能和資源產(chǎn)生了極大的浪費(fèi);除非實(shí)時(shí)性要求特別高(股票系統(tǒng)),否則不推薦這種方式;

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

筆者基于項(xiàng)目的實(shí)際需求(實(shí)時(shí)性要求不高,且后臺(tái)生成數(shù)據(jù)也有一定的延遲性),采用了以下方案:

前端每隔一分鐘向后臺(tái)請(qǐng)求一次數(shù)據(jù),且為當(dāng)前時(shí)間的上一分鐘的數(shù)據(jù);

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

關(guān)于第二個(gè)問題:筆者更傾向于將Chart組件設(shè)計(jì)成純組件,即只接收父組件傳遞的數(shù)據(jù)進(jìn)行變化,不在內(nèi)部進(jìn)行復(fù)雜操作;這也符合目前前端MVVM框架的最佳實(shí)踐;而且若將數(shù)據(jù)傳遞到Chart組件內(nèi)部再進(jìn)行處理,一是遇到不需要?jiǎng)討B(tài)渲染的需求還需要對(duì)組件進(jìn)行額外處理,二是要在Chart內(nèi)部做ajax操作,這樣就導(dǎo)致Chart完全沒有了可復(fù)用性。

接下來(lái)我們修改App.vue








至此我們就實(shí)現(xiàn)了圖表動(dòng)態(tài)數(shù)據(jù)加載,效果如下圖:

總結(jié)

這篇教程通過(guò)一個(gè)動(dòng)態(tài)圖表的開發(fā),傳遞了以下信息:

Echarts如何與Vue結(jié)合使用

Vue組件開發(fā)、純組件與“臟”組件的區(qū)別

Vue watch的用法

let的特性

JavaScript EventLoop特性

...

大家可以根據(jù)這個(gè)列表查漏補(bǔ)缺。

后續(xù)優(yōu)化

這個(gè)組件還有需要需要優(yōu)化的點(diǎn),比如:

間隔時(shí)間應(yīng)該可配置

每分鐘從后臺(tái)獲取數(shù)據(jù),那么圖表展示的數(shù)據(jù)將會(huì)越來(lái)越多,越來(lái)越密集,瀏覽器負(fù)擔(dān)越來(lái)越大,直到崩潰

沒有設(shè)置暫停圖表刷新的按鈕

...

期待大家自己動(dòng)手,開發(fā)一個(gè)屬于自己的“完美”的Echarts動(dòng)態(tài)組件!

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/93581.html

相關(guān)文章

  • 三大圖表庫(kù):ECharts 、 BizCharts 和 G2,該如何選擇?

    摘要:最近阿里正式開源的圖表庫(kù)基于技術(shù)棧,各個(gè)圖表項(xiàng)皆采用了組件的形式,貼近的使用特點(diǎn)。相關(guān)文檔組件化阿里的圖表組件手拉手,用開發(fā)動(dòng)態(tài)刷新組件文檔地址一安裝通過(guò)引入二引用成功安裝完成之后,即可使用或進(jìn)行引用。最近阿里正式開源的BizCharts圖表庫(kù)基于React技術(shù)棧,各個(gè)圖表項(xiàng)皆采用了組件的形式,貼近React的使用特點(diǎn)。同時(shí)BizCharts基于G2進(jìn)行封裝,Bizcharts也繼承了G2相...

    draveness 評(píng)論0 收藏0
  • 手摸手,帶你vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇)

    摘要:社區(qū)的認(rèn)可目前已經(jīng)是相關(guān)最多的開源項(xiàng)目了,體現(xiàn)出了社區(qū)對(duì)其的認(rèn)可。監(jiān)聽事件手動(dòng)維護(hù)列表這樣我們就簡(jiǎn)單的完成了拖拽排序。 完整項(xiàng)目地址:vue-element-admin 系類文章一:手摸手,帶你用vue擼后臺(tái) 系列一(基礎(chǔ)篇)系類文章二:手摸手,帶你用vue擼后臺(tái) 系列二(登錄權(quán)限篇)系類文章三:手摸手,帶你用vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇)系類文章四:手摸手,帶你用vue擼后臺(tái) 系列...

    Channe 評(píng)論0 收藏0
  • 手摸手,帶你vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇)

    摘要:社區(qū)的認(rèn)可目前已經(jīng)是相關(guān)最多的開源項(xiàng)目了,體現(xiàn)出了社區(qū)對(duì)其的認(rèn)可。監(jiān)聽事件手動(dòng)維護(hù)列表這樣我們就簡(jiǎn)單的完成了拖拽排序。 完整項(xiàng)目地址:vue-element-admin 系類文章一:手摸手,帶你用vue擼后臺(tái) 系列一(基礎(chǔ)篇)系類文章二:手摸手,帶你用vue擼后臺(tái) 系列二(登錄權(quán)限篇)系類文章三:手摸手,帶你用vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇)系類文章四:手摸手,帶你用vue擼后臺(tái) 系列...

    zgbgx 評(píng)論0 收藏0
  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要:五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語(yǔ)。葉上初陽(yáng)乾宿雨,水面清圓,一一風(fēng)荷舉。家住吳門,久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟,夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源;定時(shí)更新,歡迎 Star 一下。 蘇...

    sutaking 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<