反饋已提交
網絡繁忙
適用場景:安裝了「FineVis資料視覺化」插件的使用者,可參考本文了解 FineVis 的相關功能。
元件新增內容樣式設定,詳情請參見 2.1 節
適配行動端
下拉樹元件在範本預覽時,可下拉選擇選項,透過參數聯動其他組件。效果如下圖所示:
注:不支援行動端。
組件動畫請參見:FVS組件動畫 。
組件樣式請參見:FVS組件樣式屬性 。元件名稱在「內容」中設定。
下拉樹元件可設定的內容如下圖所示:
各設定項的詳細介紹如下表所示:
支援已有參數的綁定,也可以直接輸入新值以建立新的參數
定義下拉樹實際值與顯示值,有 3 種構建方式:自動構建、普通分層構建、極速分層構建
詳情請參見:樹元件構建方式
開啟多選:勾選後,可選擇下拉樹的多個選項;不勾選,只可選擇下拉樹的一個選項。預設不勾選
勾選後,是否勾選「結果只傳回葉子節點」,會影響勾選父節點時是否自動選擇子節點
勾選時,勾選父節點時自動勾選所有子節點;勾選子節點時,父節點有色塊填充
不勾選時,勾選父節點時不自動勾選子節點;勾選子節點時,父節點無色塊填充
非同步展開樹節點:節點載入邏輯,會影響效能,預設勾選
勾選後,展開選項時只載入父節點的資料,所有子節點預設不展開,適用於資料量大的情況
不勾選,展開選項時所有子節點一次性展開,適用於資料量小的情況
結果只傳回葉子節點:下拉樹是一種有層次結構的元件,每個最末端的葉子節點都有其完整的層次路徑。預設只傳回下拉樹的葉子節點
如選擇北京,回傳值為:北京
勾選後,如選擇北京,回傳值為:華北,北京,北京
陣列:回傳值類型為陣列型,例如:勾選三個值,回傳值為:["值 1","值 2","值 3"]
字串:回傳值類型為字串,需要定義分隔符、開始符和結束符,即將勾選的多個值根據分隔符連接成一個字串。符號支援手動輸入,或直接選擇
例如:分隔符定義為逗號,起始符和結束符均定義為單引號,回傳值為 '值1,值2,值3'
1)自訂字串:可直接輸入正文
例如:要選中北京,寫「華北,北京,北京」,子父節點用 , 隔開
若開啟了多選,要寫多個值時,例如選中北京和上海,寫「華北,北京,北京;華東,上海,上海」,子父節點用 , 隔開,值之間用 ; 隔開
2)欄位:可選擇資料集中欄位,若欄位值符合多個值寫法,且開啟了多選,則預設值會多選
3)公式:點選右側 fx 輸入公式,例如獲取「表格1」組件 A1 儲存格的值 =表格1~A1,或者 =[[1,11,111],[1,11,112]]
空值校驗:是否允許元件為空值。預設勾選
勾選後,允許元件為空值;
不勾選,可設定校驗提示文字,範本預覽時若元件為空,則顯示提示文字。
自訂值校驗:是否允許使用者輸入不包含在下拉選單選項中的值
勾選後,下拉樹選擇值時,使用者可以直接輸入值,實現模糊搜尋
不勾選,當輸入值不包含在下拉選項中時,下拉樹會自動清除輸入值
字元樣式:支援對元件中顯示的文字進行樣式設定,例如字體、字號、顏色等
元件圖示的大小也同樣受到影響,如下圖所示:
注1:對下拉選項中的字體無效,下拉選項字元樣式可通過 FVS範本樣式 改變
注2:修改字元顏色後,再設置 FVS範本樣式 ,字元顏色會跟隨主題變化,需重新設定
注3:元件圖示的顏色可以在範本主題樣式中設定
點選「交互>新增事件」,可新增 JavaScript 事件實現更多效果。下拉樹元件支援「初始化後事件」和「編輯結束事件」。如下圖所示:
點選具體的某一個事件,會彈出 JavaScript 事件設定框。如下圖所示:
注:關於 FVS 支援的 JavaScript 可參考文檔 FVS支援的JSAPI場景 。
點選設計器左上角「檔案>建立視覺化看板」,建立一張空白看板,可自訂名稱和尺寸。如下圖所示:
本例使用 極速分層構建 方式。
建立資料集 ds1,SQL 語句為:SELECT 貨主地區,貨主省份,貨主城市 FROM S訂單 where 貨主城市!='' ,作為下拉樹元件的資料字典使用。
建立資料集 ds2:SELECT * FROM S訂單 ${if(len(area)=0,"","where 貨主城市 = '" + area + "'")} 。
步驟如下圖所示:
點選組件區「元件>下拉樹」,將其新增到畫布中,將綁定參數設定為「area」,即 ds2 中設定的資料集參數。如下圖所示:
1)開啟「選項值來源」設定框,構建方式預設為「極速分層構建」,點選加號新增層次。如下圖所示:
2)選擇每層對應的值,並且設定相應的依賴層次和依賴欄位,分別如下圖所示:
點選組件區「文字>表格」,將其新增到畫布,點選「編輯組件」進入表格編輯介面。如下圖所示:
將對應欄位拖入儲存格即可,可自行調整儲存格式。如下圖所示:
點選「傳回視覺化看板」傳回畫布。
點選右上角「儲存」,點選「預覽」,效果如下圖所示:
預覽方式請參考 FVS行動端預覽 ,效果如下圖所示:
點選下載範本:FVS下拉樹元件範例.fvs
滑鼠選中內容,快速回饋問題
滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。
不再提示
10s後關閉
反馈已提交
网络繁忙