在很多可視化項(xiàng)目中，如果想要實(shí)現(xiàn)場景可視化大屏交互的功能，程序員們總是需要敲很多代碼，才能最終產(chǎn)出有效的交互效果，在這之中，如果出現(xiàn)個bug，那在一大串代碼中尋找這個bug?的出處，又必然是一件讓人頭疼的事情。難道就沒有一種不用敲代碼就能實(shí)現(xiàn)場景可視化大屏交互功能的辦法嗎？欸，還真有！來EasyV低代碼可視化平臺就能實(shí)現(xiàn)～

(資料圖)

一、什么是交互？

為了體諒一下，部分代碼小白，這里還是給大家介紹一下交互的概念。

交互(interactive)，在計(jì)算機(jī)中意思為，參與活動的對象，可以相互交流，雙方面互動。簡單來說，當(dāng)你在電子產(chǎn)品上點(diǎn)擊按鈕跳轉(zhuǎn)到另一個頁面時，這就發(fā)生了一次簡單的交互動作。

二、為什么需要交互？

在可視化界面的設(shè)計(jì)中，各版塊并不是獨(dú)立的，而是相輔相成。因此，在數(shù)據(jù)可視化大屏項(xiàng)目中，場景可視化大屏交互組件也就必不可少。

那么接下來本篇就帶你來看看，EasyV中如何通過不寫代碼的形式，快速實(shí)現(xiàn)場景可視化大屏交互效果！

三、如何實(shí)現(xiàn)交互？

場景可視化大屏交互也有很多種類型，以下將逐一說明：

（一）事件交互

1.自定義事件

如果您有不同的需求場景，不通過按鈕的方式去操作，您可以嘗試一下這種方法

可以由用戶選擇需要觸發(fā)的事件、定義觸發(fā)的條件以及觸發(fā)后的結(jié)果對哪些組件產(chǎn)生影響（如顯隱切換、縮放、動態(tài)修改配置）。

2.動態(tài)面板

如果您想讓自己的組件切換、頁面輪播，您不妨看看我們的動態(tài)面板

動態(tài)面板可以加入多種不同的狀態(tài)，每一個動態(tài)中可以增加多個組件，可以單獨(dú)設(shè)置自動輪播狀態(tài)或者配合選項(xiàng)卡組件來控制狀態(tài)切換。

3.引用面板

我們一個項(xiàng)目很多大屏，但能展示的大小就那么大，我怎么才能放在一起呀？我想讓多個大屏能切換頁面，這個問題不用急，我們也做了相應(yīng)的組件。

引用面板可理解為iframe的變形。iframe嵌套外部url，展示跳轉(zhuǎn)后的頁面；引用面板支持嵌到多個EasyV平臺內(nèi)部大屏，在當(dāng)前大屏展示。

ps：iframe組件用于在當(dāng)前項(xiàng)目中引用其他網(wǎng)頁，在數(shù)據(jù)中輸入指定url即可引用其他網(wǎng)頁。

引用面板跟動態(tài)面板實(shí)現(xiàn)的效果一樣，但動態(tài)面板為在一個組件內(nèi)創(chuàng)建多個大屏，通過狀態(tài)進(jìn)行切換大屏；而引用面板為一個組件引用項(xiàng)目的其他大屏進(jìn)行展示，優(yōu)點(diǎn)在于擴(kuò)展性強(qiáng)，方便后期維護(hù)，編輯路徑短。

（二）數(shù)據(jù)交互

1.回調(diào)參數(shù)

回調(diào)參數(shù)即為全局性的參數(shù)變量，用于控制組件之間參數(shù)的傳遞，可通過設(shè)置回調(diào)參數(shù)來實(shí)現(xiàn)數(shù)據(jù)驅(qū)動交互。其中，字段值即參數(shù)變量，變量名即對字段值的重命名。

選中組件，進(jìn)入「交互」配置模塊，定義回調(diào)參數(shù)

2.回調(diào)ID變量綁定

引用回調(diào)字段，并且用過濾器結(jié)合回調(diào)輕量化地處理數(shù)據(jù)。

3.千人千面

很多人會問如何實(shí)現(xiàn)不同人查看不同數(shù)據(jù)的效果？通過標(biāo)題組件進(jìn)行相應(yīng)配置，即可達(dá)到如下效果。

具體操作（詳細(xì)視頻操作可進(jìn)入易知微官網(wǎng)可視化學(xué)院-視頻中心-搜索千人千面查看）：

1.在標(biāo)題組件數(shù)據(jù)配置項(xiàng)中，確認(rèn)需要傳遞的字段名稱

2.設(shè)置標(biāo)題組件數(shù)據(jù)過濾器回調(diào)字段和需要傳遞的字段名稱一致

3.同理，基本面積圖中確認(rèn)需傳逆的字段，設(shè)置好數(shù)據(jù)過濾器

4.預(yù)覽查看效果，通過URL傳參，“#”?后輸入回調(diào)的參數(shù)和值，顯示對應(yīng)的結(jié)果

（三）終端交互

總要背著電腦包到處跑去操控大屏，真的很累，如果您有這樣的煩惱，不妨嘗試一下我們的終端交互

終端交互主要用于移動端操控發(fā)布的大屏，卸掉沉重的電腦包，提供便捷的移動遙控器功能。

1.創(chuàng)建移動端項(xiàng)目

進(jìn)入?EasyV平臺?「終端交互」模塊，創(chuàng)建移動操控端項(xiàng)目。在創(chuàng)建過程中可選擇系統(tǒng)默認(rèn)給出分辨率或根據(jù)自身移動設(shè)備分辨率進(jìn)行自定義。此處以手機(jī)端操控頁面為例，如下圖：

2.選擇組件

選擇使用選項(xiàng)卡組件（可與大屏頁面保持一致，或單獨(dú)創(chuàng)建樣式均可）；此處選擇與大屏一致，數(shù)據(jù)及樣式復(fù)用即可。如下圖：

以上內(nèi)容來源于易知微官網(wǎng)

前往易知微官網(wǎng)還可查看視頻教程，小白也能一學(xué)就會！

除了大量數(shù)字孿生可視化相關(guān)干貨，還有各樣精美模板、各行業(yè)應(yīng)用案例、最新行業(yè)喜訊……盡在易知微官網(wǎng)～

/?t=bilibili