圖表樣式

進度條表格是由進度條和表格組成的組件，支持配置表格、表格列和翻頁器的樣式。

配置面板

• 搜索配置：單擊配置面板右上角的搜索配置，可在搜索配置面板中輸入您需要搜索的配置項名稱，快速定位到該配置項，系統(tǒng)支持模糊匹配。詳情請參見搜索資產(chǎn)配置。
• 圖表尺寸：包括組件的寬度和高度，單位為px。可單擊圖標鎖定組件的寬高比，等比例修改組件的寬高。再次單擊進行解鎖，解鎖后寬高比不受限制。
• 圖表位置：包括組件的橫坐標和縱坐標，單位為px。橫坐標為組件左上角距離頁面左邊界的像素距離，縱坐標為組件左上角距離頁面上邊界的像素距離。
• 旋轉(zhuǎn)角度：以組件的中心為中心點，進行旋轉(zhuǎn)，單位為度（°）。
  • 手動輸入角度值，控制組件的旋轉(zhuǎn)角度。
  • 拖動圖標內(nèi)的黑點，控制組件的旋轉(zhuǎn)角度。
  • 單擊圖標，控制組件左右翻轉(zhuǎn)樣式。
  • 單擊圖標，控制組件上下翻轉(zhuǎn)樣式。
• 不透明度：取值范圍為0~1。為0時，圖表隱藏；為1時，圖表全部顯示。默認為1。

• 表格

  • 輪播：輪播開關，打開后圖表進行上下輪播展示，可單擊控制是否輪播。也可以設置輪播間隔和輪播模式（全屏滾動和逐條滾動）。

  • 每頁行數(shù)：設置表格每一頁能展示的內(nèi)容（ 行數(shù) ）。

  • 文本樣式：表格文本樣式，包括文本字體樣式、文字粗細、字號和顏色。

  • 基礎樣式：表格的基礎樣式。

    參數(shù)	說明
    開啟斑馬線	打開開關，開啟斑馬線樣式；關閉開關，關閉斑馬線樣式。
    表格背景色	表格背景顏色。
    行高	表格每一行的高度。
    對齊方式	表格對齊方式，可選左對齊、居中對齊和右對齊。

  • 斑馬顏色：設置開啟斑馬線后的背景顏色，僅當開啟斑馬線時可以設置。

  • 表格邊框：表格邊框樣式，包括邊框?qū)挾群皖伾?/p>

  • 內(nèi)邊距：表格內(nèi)邊界與頂部、底部、左側(cè)和右側(cè)的距離。

  • 溢出文本：當文本溢出單元格時設置是否滾動和滾動時間。

  • 表頭：設置表格的表頭樣式，可單擊控制表頭的顯隱。

    參數(shù)	說明
    對齊方式	表頭對齊方式，可選左對齊、居中對齊和右對齊。
    文本樣式	表頭文本樣式，包括文本字體樣式、文字粗細、字號和顏色。
    排序選中樣式	在預覽和發(fā)布時，表頭部分某一列的排序按鈕被單擊選中時顯示的顏色。 說明 僅在列配置中某一列開啟了是否可排序后，才可配置排序選中樣式。
    邊框樣式	表頭部分邊框樣式，包括邊框?qū)挾群瓦吙蝾伾?/p>
    背景色	表頭部分背景色。
    行高	表頭的行高值。

  • 懸浮高亮：設置表格內(nèi)容的高亮樣式，可單擊控制序號列的顯隱。

    參數(shù)	說明
    文本樣式	設置表格文本的文本樣式，包括字體、文字粗細、字號和字體顏色。
    高亮樣式	設置表格文本的高亮樣式，包括行背景顏色、圓角、陰影X軸/Y軸偏移、陰影厚度和陰影顏色。

  • 序號列：設置表格的序號列樣式，可單擊控制序號列的顯隱。

    參數(shù)	說明
    列顯示名	序號列的字段名稱，需要與數(shù)據(jù)面板中的字段相匹配，默認匹配imgSrc字段。
    列寬	序號列的列寬占比值，數(shù)值越大寬度越大。
    文本樣式	序號列的文本樣式，包括文本字體樣式、文字粗細、字號和顏色。
    文本背景	序號列的文本背景樣式，包括背景寬度、背景高度、圓角和背景顏色。

  • 特色項：設置表格的特色項的樣式，可單擊控制序號列的顯隱。

    參數(shù)	說明
    特殊數(shù)量	選擇前N項為特殊項，單獨設置其樣式。
    選項	設置特色項展示的圖片類型或文本類型。
    圖片樣式	設置特色項的圖片寬度、高度和圓角。僅當選項為圖片時可設置。
    文本樣式	設置特色項的文本樣式，包括文本顏色和背景顏色。僅當選項為文本時可設置。
    默認圖片	設置特色項的默認展示圖片，如果您需要使用遠程服務器上的圖片，請在上方的輸入框中輸入圖片的URL地址；單擊圖片框內(nèi)的預覽，即可預覽按鈕圖片的大圖樣式；單擊圖片輸入框下方的虛線框內(nèi)的更改，更改圖片設計資產(chǎn)詳細功能請參見使用界面功能說明。如果配置頁簽和數(shù)據(jù)頁簽都配置了圖片，則優(yōu)先使用數(shù)據(jù)頁簽中的圖片配置。僅當選項為圖片時可設置。
    列字段名	此配置只在數(shù)據(jù)中增加圖片字段生效；數(shù)據(jù)中設置圖片字段優(yōu)先級高于配置中設置。
    自定義圖片	序列號可以設置為圖片，動態(tài)的圖片可以在數(shù)據(jù)中增加圖片字段。單擊右側(cè)的或圖標，添加或刪除一個圖片數(shù)據(jù)。 單擊或圖標配置多個自定義圖片數(shù)據(jù)的排列樣式。單擊圖標，即可復制當前選中圖片數(shù)據(jù)系列配置內(nèi)容并新增一個同樣配置的圖片數(shù)據(jù)系列。

• 翻頁器

  參數(shù)	說明
  翻頁器隱藏	打開開關，隱藏翻頁器樣式，翻頁器所有參數(shù)都無法配置；關閉開關，翻頁器樣式顯示，可配置以下參數(shù)。
  單頁隱藏	打開開關，表格只有一頁內(nèi)容時隱藏翻頁器樣式；關閉開關，翻頁器樣式一直顯示。
  通用設置	翻頁器樣式通用設置，包括翻頁器的尺寸選擇、對齊方式和前進后退樣式選擇。
  頁碼數(shù)量	翻頁器頁碼數(shù)量值。當頁數(shù)過多時，頁面上頁碼顯示的數(shù)量，更多的使用省略號（...）代替。
  省略號顏色	頁碼過多時使用的省略號顏色。
  輸入框	打開開關，開啟翻頁器輸入框。當頁數(shù)過多時，顯示跳轉(zhuǎn)至輸入框內(nèi)寫的頁碼及單擊確定按鈕進行跳轉(zhuǎn)，總頁數(shù)大于頁碼數(shù)量時候生效；關閉開關，關閉輸入框頁碼跳轉(zhuǎn)效果。
  當前頁樣式	翻頁器當前頁樣式，包括當前頁內(nèi)文字顏色和背景色。
  普通頁樣式	翻頁器普通頁樣式，包括普通其他頁內(nèi)文字顏色和背景色。
  不可用樣式	翻頁器不可用處的樣式，包括不可用樣式的文字顏色和背景色。
  邊距	翻頁器邊界與表格頂部、底部、左側(cè)和右側(cè)的距離。

• 表格列

  單擊右側(cè)的或圖標，添加或刪除一個列配置。 單擊或圖標配置多個列配置的排列樣式。單擊圖標，即可復制當前選中列配置內(nèi)容并新增一個同樣配置的列。

  • 列字段名：列字段名，需要與數(shù)據(jù)中的字段匹配。

  • 列顯示名：表頭顯示列名稱，需要與數(shù)據(jù)中的字段匹配。

  • 列寬：列寬的值，當值為0時，列寬為自適應列寬，當內(nèi)容寬度超出列寬設置時為保證內(nèi)容準確展示使用內(nèi)容寬度。

  • 排序：打開開關，當前列的表頭處顯示排序按鈕，單擊表頭排序按鈕即可選擇表格內(nèi)數(shù)據(jù)的排序樣式；關閉開關，當前列表頭無排序按鈕，無法單擊當前列排序表格數(shù)據(jù)。

  • 文本樣式：設置表格文本的文本樣式，包括字體樣式、顏色、字號和字體粗細。

  • 對齊方式：打開開關，可以單獨調(diào)整每一列的對齊方式，包括左對齊、居中對齊和右對齊；關閉開關，無法調(diào)整每一列的對齊方式。

  • 數(shù)據(jù)類型：設置表格中當前列的數(shù)據(jù)類型，包括但不限于數(shù)值型、類目型、時間型、圖片、趨勢圖和進度圖。

  • 顯示格式：當選擇數(shù)值型或時間型時，設置當前列的數(shù)據(jù)展示格式。

  • 圖片：當選擇圖片時，設置當前列的數(shù)據(jù)展示格式。

  • 指標趨勢：單擊可開啟指標趨勢樣式。

    說明

    當前列數(shù)據(jù)類型選擇趨勢圖時才可設置。

    參數(shù)	說明
    圖標	指標趨勢圖標樣式，可選五種圖標樣式和設置圖標大小。單擊可開啟圖標樣式。
    趨勢顏色	上升、持平和下降三種趨勢的顏色。
    是否同步文字顏色	打開開關，開啟圖標顏色與數(shù)值文字顏色同步；關閉開關，顏色不同步。
    指標設置	設置指標基礎值和數(shù)字后綴樣式。
    千分位	千分位分隔符符號。單擊可開啟千分位樣式。 說明 當輸入多個千分位符號時，默認只取第一位符號作為數(shù)據(jù)的千分位分隔符號，數(shù)字不可作為千分位分隔符號使用。
    顯示	打開開關，在指標趨勢樣式中不合法的數(shù)據(jù)可以顯示；關閉開關，在指標趨勢樣式中出現(xiàn)的不合法數(shù)據(jù)無法顯示。 說明 如果所有數(shù)據(jù)均為合法數(shù)據(jù)則忽略此項配置。

  • 進度圖：單擊可開啟進度圖樣式。進度圖的值應該設置為number數(shù)據(jù)類型。

    說明

    當前列數(shù)據(jù)類型選擇進度圖時才可設置。

    參數(shù)	說明
    進度圖形態(tài)	進度圖形態(tài)樣式，可選環(huán)形和條形。
    樣式	進度圖的進度顏色、背景色和進度條尺寸。
    數(shù)值信息	數(shù)值的精度位數(shù)、后綴樣式、字體、文字粗細、字號和顏色。單擊可開啟數(shù)值信息樣式。

• 高級配置

  • 選擇列：單擊控制表格最左側(cè)選擇列樣式的顯隱。

    參數(shù)	說明
    默認選中	選擇列默認選中的行數(shù)，可自定義輸入行數(shù)內(nèi)容并使用“,”分隔。
    按鈕尺寸	選擇列按鈕的寬度和高度值。
    選中鉤子	選擇列選中鉤子的顏色和鉤子大小。
    按鈕背景色	選擇列按鈕的背景顏色。

  • 操作列：單擊控制表格最右側(cè)操作列樣式的顯隱。

    參數(shù)	說明
    列顯示名	操作列的表頭顯示名。
    列寬占比	操作列列寬的占比值，單位為px。
    文本樣式	操作列的文本樣式，包括文本字體樣式、文字粗細、字號和顏色。
    懸停樣式	鼠標懸停在操作列字體上時的文本樣式，包括文本字體樣式、文字粗細、字號和顏色。
    間隔	操作列內(nèi)多個選項按鈕之間的間隔值和操作列每一行的上下間隔值。
    按鈕	操作列內(nèi)按鈕的寬度值、高度值、背景色和圓角角度值。
    按鈕懸停	操作列內(nèi)按鈕在鼠標懸停時的背景色和按鈕文本顏色。
    列配置	操作列內(nèi)多個列操作配置內(nèi)容。 單擊右側(cè)的或圖標，添加或刪除一個列配置。 單擊或圖標配置多個列配置的排列樣式。單擊圖標，即可復制當前選中列配置內(nèi)容并新增一個同樣配置的列。 內(nèi)容類型：操作內(nèi)容的類型，可選按鈕或文本。 操作名稱：可自定義操作名稱內(nèi)容。 操作類型：可自定義操作類型內(nèi)容，默認為edit。

  • 超鏈接配置：設置表格的超鏈接配置樣式，可單擊控制超鏈接配置的顯隱。

    參數(shù)	說明
    超鏈接字段名	超鏈接字段名稱，需要在數(shù)據(jù)面板中的設置超鏈接link字段。對表格某一行設置超鏈接后，單擊這一行內(nèi)任意位置即可跳轉(zhuǎn)到超鏈接。
    新窗口中打開	打開開關，跳轉(zhuǎn)超鏈接時會新開一個網(wǎng)頁窗口；關閉開關，超鏈接在原先網(wǎng)頁跳轉(zhuǎn)。

  • 虛擬滾動：設置表格的虛擬滾動，可單擊控制虛擬滾動的顯隱。

    內(nèi)容區(qū)域高度：表格內(nèi)容展示區(qū)域的高度值，當表格數(shù)據(jù)內(nèi)容高度大于內(nèi)容區(qū)域高度時，在內(nèi)容區(qū)域會出現(xiàn)滾動條。

    邊框樣式：設置虛擬滾動時的邊框?qū)挾群瓦吙蝾伾?/p>

    說明

    請確保數(shù)據(jù)的ID值唯一。

• 條件：條件樣式說明。條件樣式：單擊右側(cè)的或圖標，添加或刪除一個條件樣式。 單擊或圖標配置多個條件樣式的排列樣式。單擊圖標，即可復制當前選中條件樣式配置并新增一個同樣配置的條件樣式。具體配置請參見條件樹使用說明。

  • 選定范圍：設置單元格或整行的樣式。

  • 文本：設置表格中單元格或整行的文本樣式，包括文本字體樣式、文字粗細、字號和顏色。

  • 背景顏色：設置表格中單元格或整行的背景顏色。

  • 行高：當選定范圍為整行時，設置表格的行高，單位px。

  • 數(shù)據(jù)類型：設置表格中單元格或整行的數(shù)據(jù)類型，包括趨勢圖和進度圖。

    • 趨勢圖：設置趨勢圖的圖標大小、字體、文字粗細和字號。

    • 進度圖：設置進度圖的條形顏色、背景色、字體、文字粗細、字號和顏色。

數(shù)據(jù)面板

配置字段說明

表 1. 配置項說明

配置項	說明
受控模式	打開開關，資產(chǎn)初始化狀態(tài)下不請求數(shù)據(jù)，僅通過回調(diào)ID或藍圖編輯器配置的方法發(fā)起請求數(shù)據(jù)；關閉開關，可以使用自動更新請求數(shù)據(jù)。開關默認為關閉狀態(tài)。
自動更新請求	選中后可以設置動態(tài)輪詢，還可以手動輸入輪詢的時間頻次。取消選中后則不會自動更新，需要手動刷新頁面，或通過藍圖編輯器和回調(diào)ID事件來觸發(fā)請求更新數(shù)據(jù)。
數(shù)據(jù)源	單擊配置數(shù)據(jù)源，可在設置數(shù)據(jù)源面板中修改數(shù)據(jù)源類型和數(shù)據(jù)查詢代碼、預覽數(shù)據(jù)源返回結果以及查看數(shù)據(jù)響應結果，詳情請參見配置資產(chǎn)數(shù)據(jù)。
數(shù)據(jù)過濾器	數(shù)據(jù)過濾器提供數(shù)據(jù)結構轉(zhuǎn)換、篩選和一些簡單的計算功能。單擊添加過濾器，可在設置數(shù)據(jù)源面板配置數(shù)據(jù)過濾器腳本，詳情請參見過濾器使用說明。
數(shù)據(jù)響應結果	展示數(shù)據(jù)請求的響應結果。當數(shù)據(jù)源發(fā)生改變時，可單擊右側(cè)的圖標，實時查看數(shù)據(jù)響應結果。

交互面板

藍圖編輯器交互配置

1. 在畫布編輯器頁面，右鍵單擊組件，選擇導出到藍圖編輯器。
2. 單擊頁面左上角的圖標。

3. 在藍圖編輯器配置頁面，單擊導入節(jié)點欄內(nèi)的進度條表格組件，在畫布中可以看到如下圖所示的進度條表格的藍圖編輯器配置參數(shù)。

   • 事件

     事件	說明
     當數(shù)據(jù)接口請求完成時	數(shù)據(jù)接口請求返回并經(jīng)過過濾器處理后拋出的事件，同時拋出處理后的JSON格式的數(shù)據(jù)。具體數(shù)據(jù)示例請參見畫布編輯器中組件右側(cè)配置面板數(shù)據(jù)頁簽的數(shù)據(jù)響應結果區(qū)域。
     當數(shù)據(jù)接口請求失敗時	數(shù)據(jù)接口請求失敗時（請求失敗的情況可能是：網(wǎng)絡問題或接口報錯等）返回并經(jīng)過過濾器處理后拋出的事件，同時拋出處理后的JSON格式的數(shù)據(jù)。具體數(shù)據(jù)示例請參見畫布編輯器中組件右側(cè)配置面板數(shù)據(jù)頁簽的數(shù)據(jù)響應結果區(qū)域。
     當點擊單行時	當單擊進度條表格的某一個行時拋出當前行的數(shù)據(jù)。
     當點擊分頁時	當單擊進度條表格的某一個分頁時拋出當前頁的數(shù)據(jù)。
     當點擊排序時	當單擊進度條表格的某一個排序按鍵時拋出當前排序的數(shù)據(jù)。
     當點擊多選時	當單擊進度條表格的選擇列中的多選項時拋出當前多選項的數(shù)據(jù)。
     當點擊操作項時	當單擊進度條表格的某一個操作項按鍵時拋出當前操作項的數(shù)據(jù)。

   • 動作

     動作	說明
     請求數(shù)據(jù)接口	重新請求服務端數(shù)據(jù)，上游數(shù)據(jù)處理節(jié)點或圖層節(jié)點拋出的數(shù)據(jù)將作為參數(shù)。例如進度條表格配置了API數(shù)據(jù)源為https://api.test，傳到請求數(shù)據(jù)接口動作的數(shù)據(jù)為{ id: '1'}，則最終請求接口為https://api.test?id=1。
     導入數(shù)據(jù)接口	按組件繪制格式處理數(shù)據(jù)后，導入組件，重新繪制。不需要重新請求服務端數(shù)據(jù)。具體數(shù)據(jù)示例請參見畫布編輯器中組件右側(cè)配置面板數(shù)據(jù)頁簽的數(shù)據(jù)響應結果區(qū)域。
     跳轉(zhuǎn)至	將組件頁面跳轉(zhuǎn)至某一頁，默認從0開始跳轉(zhuǎn)。參考數(shù)據(jù)示例如下。 return { "current":1 //如跳轉(zhuǎn)至第四頁，{current：3} }
     高亮表格行	設置表格行高亮對應的元素。參考數(shù)據(jù)示例如下。 return { "data": { id:3, //需要高亮的數(shù)據(jù)。 name:'張三' }, "style": { color:'#ff0', //高亮數(shù)據(jù)的樣式。 background:'#f00' } }
     取消行高亮	取消表格行高亮對應的元素。
     清空高亮	清空組件所有高亮效果，不需要參數(shù)。
     打開選擇列	打開進度條表格的選擇列對應數(shù)據(jù)內(nèi)容。
     關閉選擇列	關閉隱藏進度條表格的選擇列對應數(shù)據(jù)內(nèi)容。
     打開操作列	打開進度條表格的操作列對應數(shù)據(jù)內(nèi)容。
     關閉操作列	關閉隱藏進度條表格的操作列對應數(shù)據(jù)內(nèi)容。
     設置選中值	設置選中值的參數(shù)內(nèi)容，參考數(shù)據(jù)示例如下。 return { "value": 1 }
     更新組件配置	動態(tài)更新組件的樣式配置。需要先在組件的配置面板中，單擊復制配置到剪貼板，獲取組件配置數(shù)據(jù)。再根據(jù)需要在藍圖編輯器配置頁面的數(shù)據(jù)處理節(jié)點中更改對應樣式的字段值。
     顯示	顯示組件，參考數(shù)據(jù)示例如下。 return { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" };
     隱藏	隱藏組件，參考數(shù)據(jù)示例如下。 return { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" };
     切換顯隱狀態(tài)	切換組件顯示或者隱藏，參考數(shù)據(jù)示例如下。 return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } };
     移動	將組件移動到指定位置，參考數(shù)據(jù)示例如下。 return { // 移動方式。絕對定位：to，相對定位：by。默認值：to。 "positionType": "to", // 指定位置。x坐標，y坐標。 "attr": { "x": 0, "y": 0 }, // 動畫方式。 "animation": { "enable": false, // 動畫延時。 "animationDuration": 1000, // 動畫曲線。可選值為：linear|easeInOutQuad|easeInOutExpo。 "animationEasing": "linear" } };