本文介紹索引值表格組件的圖表樣式和各配置項的含義。
圖表樣式
索引值表格是表格組件的一種,支援以索引值的形式自訂表格格內容,能夠將資料資訊以表格的形式清晰地展示在可視化應用上,僅支援兩列資料的展示,且無法新增列。
配置面板

搜尋配置:單擊配置面板右上方的搜尋配置,可在搜尋配置面板中輸入您需要搜尋的配置項名稱,快速定位到該配置項,系統支援模糊比對。詳情請參見搜尋資產配置。
- 圖表尺寸:包括組件的寬度和高度,單位為px。可單擊
表徵圖鎖定組件的寬高比,等比例修改組件的寬高。再次單擊進行解鎖,解鎖後寬高比不受限制。 - 圖表位置:包括組件的橫座標和縱座標,單位為px。橫座標為組件左上方距離頁面左邊界的像素距離,縱座標為組件左上方距離頁面上邊界的像素距離。
- 旋轉角度:以組件的中心為中心點,進行旋轉,單位為度(°)。
- 手動輸入角度值,控制組件的旋轉角度。
- 拖動
表徵圖內的黑點,控制組件的旋轉角度。 - 單擊
表徵圖,控制組件左右翻轉樣式。 - 單擊
表徵圖,控制組件上下翻轉樣式。
- 不透明度:取值範圍為0~1。為0時,圖表隱藏;為1時,圖表全部顯示。預設為1。
表格
參數
說明
自適應
開啟開關,表格會自適應組件大小,合理分布。

關閉開關,表格顯示原始大小。

邊框線
表格外側邊框線的樣式。
線條寬度:邊框線的粗細。
線條顏色:邊框線的顏色,請參見顏色選取器說明進行修改。
文本樣式
表格中所有文本的字型系列,預設為微軟雅黑。
儲存格:儲存格的間距值。
參數
說明
左右間距
儲存格中的文本與儲存格左右邊界的距離,取值範圍為0~50,單位為px。
上下間距
儲存格中的文本與儲存格上下邊界的距離。當開啟自適應配置項,且表格不溢出時,此配置項僅對錶頭生效,其餘行會自適應高度,取值範圍為0~50,單位為px。
表頭

首行為表頭:開啟開關,表格的第一行作為表頭,且可以配置表頭的文本樣式。若不需要配置表頭,可關閉此配置項,且需要刪掉資料中的label和value欄位。關閉開關,表格無表頭樣式。
文本樣式:僅在開啟首行為表頭配置項後顯示。
參數
說明
字型顏色
表頭文本的顏色。
字型大小
表頭文本的大小,取值範圍為0~100。
字型粗細
表頭文本的字型粗細。
背景顏色:表頭的背景顏色,僅在開啟首行為表頭配置項後顯示。
列
寬度百分比%:第一列占表格寬度的百分比值。
分割線
參數
說明
線條寬度
兩列之間分割線的粗細。
線條顏色
兩列之間分割線的顏色。
第一列
參數
說明
文本樣式
第一列文本的顏色、字型大小和字型粗細。
背景顏色
第一列的背景顏色。
對齊
第一列文本的對齊,可選:靠左對齊、靠右對齊和置中對齊。
第二列:參見第一列配置第二列樣式。
行
分割線
參數
說明
線條寬度
不同行之間分割線的粗細。
線條顏色
不同行之間分割線的顏色。
是否區分奇偶行

開啟開關,系統會自動區分奇偶行,並且可以配置奇數行和偶數行的背景顏色。
參數
說明
奇數行背景色
表格中奇數行的背景顏色。
偶數行背景色
表格中偶數行的背景顏色。
關閉開關,系統不區分奇偶行,全部顯示為列的背景顏色。
資料面板
目前索引值表格組件僅支援兩列,不支援新增列。
您可以通過配置資料來增加索引值表格的行數。

配置欄位說明
欄位 | 說明 |
| (可選) 第一列表頭的內容。 |
| (可選) 第二列表頭的內容。 說明 只有在表頭配置項中開啟首行為表頭選項後, |
表的主體資料格式為{"第一列key":"第二列的value值",……},其他資料可自訂,以實際資料內容順序分布在表格相應行列中。
互動面板
此組件沒有互動事件。
藍圖編輯器互動配置
- 在畫布編輯器頁面,按右鍵組件,選擇匯出到藍圖編輯器。
- 單擊頁面左上方的
表徵圖。 在藍圖編輯器配置頁面,單擊匯入節點欄內的索引值表格組件,在畫布中可以看到如下圖所示的索引值表格的藍圖編輯器配置參數。

事件
事件
說明
當資料介面請求完成時
資料介面請求返回並經過過濾器處理後拋出的事件,同時拋出處理後的JSON格式的資料。具體資料樣本請參見畫布編輯器中組件右側配置面板資料頁簽的資料響應結果地區。
當資料介面請求失敗時
資料介面請求失敗時(請求失敗的情況可能是:網路問題或介面報錯等)返回並經過過濾器處理後拋出的事件,同時拋出處理後的JSON格式的資料。具體資料樣本請參見畫布編輯器中組件右側配置面板資料頁簽的資料響應結果地區。
動作
動作
說明
請求資料介面
重新請求服務端資料,上遊資料處理節點或圖層節點拋出的資料將作為參數。例如索引值表格配置了API資料來源為
https://api.test,傳到請求資料介面動作的資料為{ id: '1'},則最終請求介面為https://api.test?id=1。匯入資料介面
按組件繪製格式處理資料後,匯入組件,重新繪製。不需要重新請求服務端資料。具體資料樣本請參見畫布編輯器中組件右側配置面板資料頁簽的資料響應結果地區。
更新群組件配置
動態更新組件的樣式配置。需要先在組件的配置面板中,單擊複製配置到剪貼簿,擷取組件配置資料。再根據需要在藍圖編輯器配置頁面的資料處理節點中更改對應樣式的欄位值。
顯示
顯示組件,參考資料樣本如下。
return { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" };隱藏
隱藏組件,參考資料樣本如下。
return { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" };切換顯隱狀態
切換組件顯示或者隱藏,參考資料樣本如下。
return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } };移動
將組件移動到指定位置,參考資料樣本如下。
return { // 移動方式。絕對位置:to,相對定位:by。預設值:to。 "positionType": "to", // 指定位置。x座標,y座標。 "attr": { "x": 0, "y": 0 }, // 動畫方式。 "animation": { "enable": false, // 動畫延時。 "animationDuration": 1000, // 動畫曲線。可選值為:linear|easeInOutQuad|easeInOutExpo。 "animationEasing": "linear" } };