時間表盤

時間表盤是由基本儀錶盤通過配置項轉換而來，支援自訂文本圖形和多系列數據配置，能夠通過修改數據靈活地增加、刪除或修改圖形的展示效果。本文檔為您介紹基本儀錶盤各配置項的含義，説明您快速準確地使用基礎款儀錶圖元件。

配置

• 基礎設置

  • width：組件在編輯器中的寬度

  • height：組件在編輯器中的高度

  • top：組件與編輯器頂部的距離

  • left：組件與編輯器左側的距離

• 提示框

  • 顯示/隱藏：當滑鼠懸浮到圖表上的點時，是否展示其提示的資訊

  • 觸發類型：如何觸發提示框的展示

  • 格式：提示框的展示內容可支援自訂配置，其中{a}表示系列名稱、{b}表示錶盤標題、{c}錶盤資料值

  

  • 背景顏色：提示框的背景顏色，支持hex、rgb以及rgba格式的色值

  • 邊線顏色：提示框邊線的顏色，支持hex、rgb以及rgba格式的色值

  • 邊線寬度：提示框邊線的寬度，單位px

  • 內邊距：提示框的內邊距，例如："5,5,5,5"，代表上右下左邊距分別為5px、5px、5px、5px

• 自訂元素

  該配置項為一個陣列，可配置多個自訂元素，自訂的元素可以是普通文本也可以是圖片

  • 類型：選擇自訂元素的類型，可選：文本、圖片

  • 位置

    • 控制類型：位置的控制類型，可選：系統控制、手動控制

    • 系統控制

      • 橫向位置：可選居左、居中、居右

      • 縱向位置：可選上側、居中、下側

    • 手動控制

      • 左邊距：自訂元素的左邊距

      • 上邊距：自訂元素的上邊距

  • 文本

    • 文本內容：文本所要展示的內容

    • 字型大小：文本的字體大小

    • 顏色：文本的顏色，支援hex、rgb以及rgba格式的色值

    • 字體：文本的字體

    • 字體粗細：文本字體的粗細

  

  • 圖片

    • 上傳圖片：上傳本地的圖片

    • 圖片寬度：設置圖片的寬度

    • 圖片高度：設置圖片的高度

  

• 資料數列

  該配置項為一個陣列，可配置多個系列，編輯器將遍歷資料，使資料通過一個或多個系列配置迴圈渲染。若需要自訂某些資料為特定樣式則需要手動對資料進行排序

  • 系列名：該系列的名稱，設置後，可以提示框中進行配置展示

  

  • 時間表盤

    請注意：開啟時間表盤後，對於錶盤的某些特定配置項將不再生效，例如：錶盤最大值、錶盤起始角度、資料項目配置......

    • 啟用/關閉：是否開啟時間表盤。

    • 類型：時間表盤展示的類型，可選：星期、時、分、秒進行展示

    • 自訂時間標題：開啟時間表盤後，標題將自動展示為當前時間，你可以對其進行自訂，年份：{year}、月份：{month}、日份：{day}、小時：{hour}、分鐘：{minute}、秒：{second}

  

  • 全域

    • 錶盤最小值：錶盤中所容納數值的最小值

    • 錶盤最大值：錶盤中所容納數值的最大值

    

    • 錶盤大小：編輯器中規定區域中錶盤的大小

    

    • 錶盤起始角度：錶盤開始位置處的角度

    • 錶盤結束角度：錶盤結束位置處的角度

    

    • 錶盤分割段數：

    

    • 偏移：

      • 水準方向：水準方向的偏移距離

      • 垂直方向：垂直方向的偏移距離

  • 錶盤標題

    • 顯示/隱藏：是否展示錶盤的標題

    

    • 顏色：標題的顏色，支持hex、rgb以及rgba格式的色值

    • 字型大小：標題的字體大小

    • 字體：標題的字體

    • 字體粗細：標題的字體粗細

    • 背景顏色：標題的背景顏色，支持hex、rgb以及rgba格式的色值

    • 邊框顏色：標題的邊框顏色，支持hex、rgb以及rgba格式的色值

    • 邊框邊框：標題的邊框寬度

    • 邊框圓角：可使標題的邊框棱角變圓，值越大，邊框越接近橢圓

    

    • 陰影顏色：標題的陰影顏色，支援hex、rgb以及rgba格式的色值

    • 陰影大小：標題的陰影大小

    

    • 內邊距：標題的內邊距，例如："5,5,5,5"，代表上右下左邊距分別為5px、5px、5px、5px

    • 偏移

      • 水準偏移：控制標題在水準方向上的偏移距離

      • 上下偏移：控制標題在錘子方向上的偏移距離

    

  • 錶盤數值

    錶盤數值配置項與錶盤標題類似，相關配置可直接參照錶盤標題

    • 顯示/隱藏：是否展示錶盤的數值

    • 格式：錶盤數值的展示內容可支援自訂配置，其中{value}表示錶盤數值

    

    • 顏色：數值的顏色，支持hex、rgb以及rgba格式的色值

    • 字型大小：數值的字體大小

    • 字體：數值的字體

    • 字體粗細：數值的字體粗細

    • 背景顏色：數值的背景顏色，支持hex、rgb以及rgba格式的色值

    • 邊框顏色：數值的邊框顏色，支持hex、rgb以及rgba格式的色值

    • 邊框邊框：數值的邊框寬度

    • 邊框圓角：可使數值的邊框棱角變圓，值越大，邊框越接近橢圓

    • 陰影顏色：數值的陰影顏色，支援hex、rgb以及rgba格式的色值

    • 陰影大小：數值的陰影大小

    • 內邊距：數值的內邊距，例如："5,5,5,5"，代表上右下左邊距分別為5px、5px、5px、5px

    • 偏移

      • 水準偏移：控制標題在水準方向上的偏移距離

      • 上下偏移：控制標題在錘子方向上的偏移距離

  

  • 錶盤軸線

    • 顯示/隱藏：是否展示錶盤軸線

    

    • 樣式

      • 陰影顏色：軸線陰影顏色

      • 陰影大小：軸線陰影大小

      • 軸線寬度：軸線的寬度

      • 系列色：軸線的寬度

        儀錶盤的軸線可以被分成不同顏色的多段，end表示每段的結束位置和color表示顏色

        • 結束位置：該段軸線的寬度

        • 顏色：該段軸線的顏色

  

  • 錶盤分割線

    • 顯示/隱藏：是否展示錶盤的分割線

    • 長度：分割線的長度

    • 樣式

      • 顏色：分割線的顏色，支持hex、rgb以及rgba格式的色值

      • 寬度：分割線的寬度

      • 類型：分割線的類型，可選實線、虛線

      • 陰影顏色：分割線陰影顏色，支援hex、rgb以及rgba格式的色值

      • 陰影大小：分割線的陰影大小

  

  • 錶盤刻度線

    • 顯示/隱藏：是否展示錶盤的刻度線

    • 刻度線數量：錶盤刻度線的數量

    • 刻度線長度：錶盤刻度線的長度

    • 樣式

      • 顏色：刻度線的顏色，支持hex、rgb以及rgba格式的色值

      • 寬度：刻度線的寬度

      • 類型：刻度線的類型，可選實線、虛線

      • 陰影顏色：刻度線陰影顏色，支援hex、rgb以及rgba格式的色值

      • 陰影大小：刻度線的陰影大小

  

  • 錶盤刻度標籤

    錶盤刻度標籤配置項與錶盤標題類似，相關配置可直接參照錶盤標題

    • 顯示/隱藏：是否展示錶盤的刻度標籤

    • 標籤與刻度線間距：錶盤刻度標籤與刻度線之間的距離

    • 格式：刻度標籤的展示內容可支援自訂配置，其中{value}表示其刻度值

    • 顏色：刻度標籤的顏色，支持hex、rgb以及rgba格式的色值

    • 字型大小：刻度標籤的字體大小

    • 字體：刻度標籤的字體

    • 字體粗細：刻度標籤的字體粗細

    • 背景顏色：刻度標籤的背景顏色，支持hex、rgb以及rgba格式的色值

    • 邊框顏色：刻度標籤的邊框顏色，支持hex、rgb以及rgba格式的色值

    • 邊框邊框：刻度標籤的邊框寬度

    • 邊框圓角：可使刻度標籤的邊框棱角變圓，值越大，邊框越接近橢圓

    • 陰影顏色：刻度標籤的陰影顏色，支援hex、rgb以及rgba格式的色值

    • 陰影大小：刻度標籤的陰影大小

    • 內邊距：刻度標籤的內邊距，例如："5,5,5,5"，代表上右下左邊距分別為5px、5px、5px、5px

  

  • 錶盤指針

    • 顯示/隱藏：是否展示錶盤的指針

    • 指針長度：錶盤指針的長度

    • 指針寬度：錶盤指針的寬度

    • 樣式

      • 指針顏色：指標的顏色，支持hex、rgb以及rgba格式的色值

      • 指針邊框顏色：指標邊框的顏色，支持hex、rgb以及rgba格式的色值

      • 邊框寬度：指針的邊框寬度

      • 邊框類型：指針的邊框類型，可選實線、虛線

      • 陰影顏色：指標的陰影顏色，支援hex、rgb以及rgba格式的色值

      • 陰影大小：指標的陰影大小

      • 透明度：指針的透明度

    • 高亮

      • 指針顏色：指標的顏色，支持hex、rgb以及rgba格式的色值

      • 指針邊框顏色：指標邊框的顏色，支持hex、rgb以及rgba格式的色值

      • 邊框寬度：指針的邊框寬度

      • 邊框類型：指針的邊框類型，可選實線、虛線

      • 陰影顏色：指標的陰影顏色，支援hex、rgb以及rgba格式的色值

      • 陰影大小：指標的陰影大小

      • 透明度：指針的透明度

  

數據

return [{
    graphic:[{
        text:"OneView"
    },{
        image:"https://open.iot.10086.cn/v4/static/common/file/logo.png"
    }],
    data:[{
        value: 50, 
        name: '完成率'
    }]
}]

如果在配置項和數據項均對自訂元素進行了配置，系統會優先選擇數據項的配置

• graphic：自定元素集合

  • text：自訂的文本內容

  • image：自訂圖片的線上連結地址

• data：儀錶盤數據集合

  • value：錶盤數據值

  • name：錶盤標題名稱