基于ECharts的實(shí)驗(yàn)室人流量統(tǒng)計(jì)界面設(shè)計(jì)

林中華 林喆

如何提高實(shí)驗(yàn)室的使用率，一直是實(shí)驗(yàn)室管理者需要思考的問題，當(dāng)我們在實(shí)驗(yàn)室里安裝了帶有智能人臉識別的攝像頭后，這個(gè)問題有了解決的方案。本文通過攝像頭采集的數(shù)據(jù)，將實(shí)時(shí)的人流發(fā)送到服務(wù)端，由服務(wù)端整理再展示到實(shí)驗(yàn)室人流量統(tǒng)計(jì)系統(tǒng)中，展示的方法是各種圖標(biāo)，讓我們可以從各個(gè)維度去觀察數(shù)據(jù)，為管理者的決策提供關(guān)鍵的數(shù)據(jù)依據(jù)。

開發(fā)軟件

本系統(tǒng)基于網(wǎng)頁BS結(jié)構(gòu)開發(fā)，用戶可以不在本地安裝軟件，只需打開瀏覽器輸入網(wǎng)址，整個(gè)系統(tǒng)就會展示出來，這是目前比較流行的模式，像這樣的模式最常見的是微信小程序，用完就關(guān)閉，完全不需要安裝任何的軟件，極大減輕了系統(tǒng)的負(fù)擔(dān)。

本系統(tǒng)中，頁面會向客戶展示各個(gè)實(shí)驗(yàn)室的使用情況、時(shí)間維度，可以分開上課使用、下課使用，還可以展示整個(gè)時(shí)間段的使用情況。

1. ECharts

ECharts是一個(gè)基于JavaScript語言實(shí)現(xiàn)的開源可視化庫，可以流暢地運(yùn)行在PC和移動設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（如IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等），底層依賴矢量圖形庫ZRender提供直觀、交互豐富且可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。

本系統(tǒng)中，主要使用ECharts的制圖功能將攝像頭獲取到的數(shù)據(jù)制作成可視化視圖。

2. Vue

Vue的出現(xiàn)讓大部分前端工程師歡呼雀躍，這是之前經(jīng)歷各種繁瑣才能親身體會到的。Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其他大型框架不同的是，Vue被設(shè)計(jì)為可以自底向上逐層應(yīng)用，Vue的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。它可以使之前幾十行的代碼變成一行或者一句，因?yàn)閂ue的設(shè)計(jì)者已經(jīng)在后臺為開發(fā)者完成了其他的工作，開發(fā)者只需要專心實(shí)現(xiàn)頁面邏輯即可。

各組件介紹

1.當(dāng)前數(shù)據(jù)模塊

系統(tǒng)由當(dāng)前數(shù)據(jù)模塊、歷史數(shù)據(jù)模塊和設(shè)置模塊組成。

在當(dāng)前數(shù)據(jù)模塊中，系統(tǒng)調(diào)用了ECharts的pie型圖表，它可以顯示給定數(shù)據(jù)的比例構(gòu)成，在Vue的生命周期函數(shù)mounted中調(diào)用圖表生成函數(shù)pie（），函數(shù)首先會發(fā)送請求到后端服務(wù)器，獲取當(dāng)前攝像頭獲取到的數(shù)據(jù)。數(shù)據(jù)獲取到后，使用let myChart = echarts.init（）初始化，myChart.setOption（）進(jìn)行圖表創(chuàng)建。

實(shí)驗(yàn)室使用比例圖表中展示了實(shí)驗(yàn)室上課、自習(xí)及空置的比例，實(shí)驗(yàn)室實(shí)時(shí)人流中顯示了各個(gè)教學(xué)區(qū)的人流分布?？梢钥吹轿鍏^(qū)教室在整個(gè)時(shí)段的人流始終是大于其他區(qū)域，這就給管理者提供了直觀的數(shù)據(jù)參考。

2.設(shè)置模塊

在設(shè)置模塊中，分為2個(gè)子模塊，錄入和高級設(shè)置，主要使用CSS實(shí)現(xiàn)，用戶可以修改后端服務(wù)器地址，增加管理員和權(quán)限。

本文實(shí)現(xiàn)了一個(gè)實(shí)驗(yàn)室人流量統(tǒng)計(jì)界面開發(fā)，采用了更高效率的Vue和ECharts，開發(fā)效率大幅提高。系統(tǒng)界面為使用者的操作提供很強(qiáng)指導(dǎo)性，數(shù)據(jù)展示很直觀，內(nèi)容上覆蓋了當(dāng)前和歷史數(shù)據(jù)，每部操作都可以讓使用者清晰地知道操作結(jié)果，有利于做出更好的操作。