模板學(xué)堂丨妙用Tab組件制作多屏儀表板并實(shí)現(xiàn)自動(dòng)輪播
DataEase開源數(shù)據(jù)可視化分析平臺(tái)于2022年6月正式發(fā)布模板市場(https://dataease.io/templates/)。模板市場旨在為DataEase用戶提供專業(yè)、美觀、拿來即用的儀表板模板,方便用戶根據(jù)自身的業(yè)務(wù)需求和使用場景選擇對(duì)應(yīng)的儀表板模板,并在優(yōu)質(zhì)模板的基礎(chǔ)上輕松制作自己的儀表板。
2023年2月上新模板
DataEase模板市場定期進(jìn)行模板上新。2023年2月共上新5個(gè)模板,涉及能源、測試、采購、消費(fèi)等主題,歡迎大家在DataEase模板市場下載使用。





模板技巧
本月為大家推薦的模板技巧是如何使用DataEase的選項(xiàng)卡組件(即Tab組件)實(shí)現(xiàn)多個(gè)大屏輪播的效果。
不少用戶在實(shí)際使用DataEase時(shí)都會(huì)產(chǎn)生多個(gè)大屏同時(shí)使用并展現(xiàn)的需求,而給每個(gè)大屏配置一個(gè)單獨(dú)的顯示設(shè)備并不是一個(gè)現(xiàn)實(shí)的方法,那么就需要在一個(gè)顯示設(shè)備上實(shí)現(xiàn)多個(gè)大屏輪播的效果。在DataEase開源數(shù)據(jù)可視化分析平臺(tái)上,只需要簡單的一個(gè)選項(xiàng)卡組件(即Tab組件),就可以輕松滿足用戶在大屏展示時(shí)多個(gè)儀表板并按照固定時(shí)間輪播的需求。
本次模板技巧涉及到的功能背景如下:
■?DataEase選項(xiàng)卡組件(即Tab組件)支持放入多個(gè)其他類型組件,可以在Tab組件中創(chuàng)作多個(gè)不同的儀表板;
■?通過Tab組件的輪播功能可實(shí)現(xiàn)不同Tab頁的輪播效果。
方法介紹
■?方法一:將選項(xiàng)卡組件大小設(shè)置為與儀表板大小相同,將選項(xiàng)卡作為儀表板的畫布來使用,在每個(gè)選項(xiàng)頁下完成獨(dú)立完整的儀表板的制作;
■?方法二:將選項(xiàng)卡組件大小設(shè)置為與儀表板大小相同,再將網(wǎng)頁組件放入到選項(xiàng)卡組件中,同樣將大小設(shè)置為與儀表板頁面相同大小,網(wǎng)頁組件中配置對(duì)應(yīng)已做好的儀表板公共鏈接。
操作演示
一、方法一操作過程
1. 將選項(xiàng)卡組件拖入到儀表板中;

2. 將選項(xiàng)卡組件的大小設(shè)置為與儀表板同樣大小;

3. 在每個(gè)Tab標(biāo)簽頁下的空間中放入需要的各類視圖和組件,制作完整的儀表板;

4. 開啟輪播,并配置輪播間隔時(shí)間;

5. 預(yù)覽儀表板,查看自動(dòng)輪播效果。

二、方法二操作過程
方法二需要滿足以下兩個(gè)條件才可實(shí)現(xiàn):
■?各個(gè)需要輪播的儀表板均單獨(dú)存在,且已制作完成;
■?各個(gè)儀表板在安全性控制上支持創(chuàng)建公共鏈接,即可以通過創(chuàng)建的公共鏈接進(jìn)行無密碼訪問。
1. 將選項(xiàng)卡組件拖入到儀表板中;

2. 將選項(xiàng)卡組件的大小設(shè)置為與儀表板同樣大??;

3. 在每個(gè)選項(xiàng)卡組件中放入一個(gè)網(wǎng)頁組件,也將其大小調(diào)整為屏幕大?。?/p>
4. 分別對(duì)想要統(tǒng)一輪播的儀表板創(chuàng)建公共鏈接,并配置在網(wǎng)頁組件中;



5. 開啟輪播并配置輪播間隔時(shí)間;

6. 預(yù)覽儀表板,查看自動(dòng)輪播效果。

總結(jié)
DataEase開源數(shù)據(jù)可視化分析工具中很多功能用法是具有多樣性的。以選項(xiàng)卡組件輪播功能為例,除了上述用法外,您還可以通過在不同的Tab頁下放置不同的圖片實(shí)現(xiàn)圖片輪播等效果。此外,關(guān)于實(shí)現(xiàn)大屏的輪播也有一些外部輔助的方式,例如通過Chrome瀏覽器的Revolver-Tabs插件來實(shí)現(xiàn)瀏覽器不同標(biāo)簽頁的輪播效果。
DataEase致力于和大家一起探索新的功能和效果實(shí)現(xiàn),通過持續(xù)的迭代做出更好的產(chǎn)品,滿足個(gè)人和企業(yè)用戶更為多元化的場景需求,努力實(shí)現(xiàn)“人人可用”的目標(biāo)。