易云系統(tǒng)支持強(qiáng)大的組態(tài)功能，無(wú)論是是菜單、功能層面的組態(tài)，還是監(jiān)控點(diǎn)、數(shù)據(jù)方面的組態(tài)，易云系統(tǒng)都能勝任。 不過(guò)，近期有朋友和我們反應(yīng)，他們的數(shù)據(jù)可視化界面怎么組態(tài)都很簡(jiǎn)單、不夠炫酷，問(wèn)易小云能不能讓組態(tài)畫(huà)面“炫”起來(lái)。

用戶(hù)想要

自建結(jié)果

可見(jiàn)，大家對(duì)易云系統(tǒng)的組態(tài)功能還不太熟悉，使用時(shí)有諸多疑惑，今天我就來(lái)和大家分享一下讓組態(tài)界面“炫”起來(lái)的方法。 以上圖“用戶(hù)想要”為例，如何使用系統(tǒng)搭建出這樣一個(gè)界面呢？ 主要從四個(gè)方面進(jìn)行調(diào)整 1整體配色 2版面布局3組件屬性 4邊框線條 基本上從這四點(diǎn)入手，就能讓平凡的界面“炫~”起來(lái)。

1整體配色 要想制作一個(gè)好看的可視化圖表，配色非常關(guān)鍵，很多糟糕的圖表，往往都是配色很糟糕。 以經(jīng)驗(yàn)看來(lái)，“科技感”“高大上”的配色方案，一般是深色背景，配對(duì)比色的文字或邊框，例如：藍(lán)色和青色、藍(lán)色和粉色等。 如果您確實(shí)糾結(jié)選什么顏色，就從網(wǎng)上直接找一個(gè)“高大上”的界面，“學(xué)習(xí)”一個(gè)配色方案。 在系統(tǒng)中，我們可以點(diǎn)擊畫(huà)布屬性-選擇背景色，也可以在組件屬性中，為各組件設(shè)置顏色和背景色。

2版面布局 可視化界面切忌凌亂，否則再好的配色也無(wú)法讓界面漂亮起來(lái)，界面設(shè)計(jì)最好根據(jù)需要展示的內(nèi)容，有個(gè)提前的預(yù)案。 同樣以上面的“用戶(hù)想要”為例，他的布局是這樣的：

標(biāo)題、文字、圖表、視頻、設(shè)備等等各類(lèi)型條理分明，可以很清晰縱覽全局，我們要的也是這樣的效果：通過(guò)系統(tǒng)提供的各類(lèi)組件，將需要監(jiān)控的數(shù)據(jù)逐一安置到位：

為了簡(jiǎn)化，我們只部署了少數(shù)幾個(gè)數(shù)據(jù)，可以看出，雖然顯得整齊了點(diǎn)，但依然不夠美觀大方，我們需要做進(jìn)一步調(diào)整。 3組件屬性 每個(gè)組件都有屬性設(shè)置，例如文字大小、顏色，背景顏色，邊框大小、顏色等等，我們可以通過(guò)這些屬性設(shè)置，對(duì)場(chǎng)景進(jìn)行細(xì)節(jié)調(diào)整。 經(jīng)過(guò)一番顏色、底紋、大小等等屬性的改變，我們可以得到這樣一張圖：

4邊框線條 上面的圖和成品已經(jīng)很接近了，但是依然不夠好看，各個(gè)位置缺了些區(qū)塊的劃分，缺了點(diǎn)裝飾性的內(nèi)容，那么接下來(lái)就是最后的調(diào)整——我們來(lái)給各個(gè)位置添加點(diǎn)邊框線條吧。 目前，邊框線條尚未內(nèi)置，不過(guò)沒(méi)關(guān)系，系統(tǒng)支持自主上傳，你喜歡什么樣的邊框，就加什么樣的，隨心所以，豈不美滋滋？ 上傳方式：組件庫(kù)添加圖片-圖片屬性中進(jìn)入圖庫(kù)-點(diǎn)擊我的圖庫(kù)右上角的“+”就可以上傳啦。

添加底紋、添加邊框，再次對(duì)各模塊進(jìn)行微調(diào)，我們得到了完全體的組態(tài)圖：

忽視掉周邊的系統(tǒng)欄，做個(gè)對(duì)比，他是這樣的：

當(dāng)然這里之后幾個(gè)圖表，如果更多要展示的內(nèi)容，別忘了縮小各部分，合理安排空間，當(dāng)然，有喜歡的邊框，或者就是喜歡無(wú)邊框，都可以自己上傳。 中易云·助力企業(yè)快速上云 集成40+行業(yè)解決方案工業(yè)、農(nóng)業(yè)、電力、醫(yī)療、冷鏈、油田… 掃碼添加中易云VIP客戶(hù)經(jīng)理 即可免費(fèi)獲得所需行業(yè)物聯(lián)網(wǎng)解決方案