日本熟妇hd丰满老熟妇,中文字幕一区二区三区在线不卡 ,亚洲成片在线观看,免费女同在线一区二区

進度環圖

本文介紹進度環圖全量選擇時各配置項的含義。

圖表樣式

進度環圖以旋轉柱型條的填充方式用于在數字大屏中直觀地展示工作任務的進度情況。image

樣式面板image

  • 搜索配置:單擊樣式面板右上角的搜索配置項圖標image,可在搜索配置面板中輸入您需要搜索的配置項名稱,快速定位到該配置項,系統支持模糊匹配。詳情請參見搜索配置項

    • 尺寸:包括組件的寬度和高度,單位為px。

    • 定位:包括組件的橫坐標縱坐標,單位為px。橫坐標為組件左上角距離頁面左邊界的像素距離,縱坐標為組件左上角距離頁面上邊界的像素距離。

    • 旋轉:以組件的中心為中心點,進行旋轉,單位為度(°)。

      • 手動輸入角度值,控制組件的旋轉角度。

      • 單擊image圖標,控制組件左右翻轉樣式。

      • 單擊image圖標,控制組件上下翻轉樣式。

    • 不透明度:取值范圍為0~1。為0時,圖表隱藏;為1時,圖表全部顯示。默認為1。

  • 圖形

    參數

    說明

    圖表邊距

    單擊開關圖標圖標,控制圖表邊距的顯隱。打開開關后,可配置進度環圖區域與組件上下左右四個邊界之間的距離,單位默認px。

    半徑尺寸

    設置進度環圖的內徑尺寸和外徑尺寸,單位%。

    環形顏色

    設置進度環圖存在進度時的背景色和無進度時的背景色,請參見顏色選擇器說明進行修改。

    環形描邊

    設置進度環圖的環形描邊的描邊樣式,包括描邊的線型、描邊粗細和描邊顏色。

    投影樣式

    設置進度環圖組件的平面投影樣式,包括模糊顏色、模糊半徑以及環圖圓心相對于組件邊框中心的X軸和Y軸上的偏移量。

    中心內容

    設置進度環圖的中心內容的文本樣式和圖形樣式。

    • 文本

      • 標題:設置中心內容文本的標題名稱。

      • 標題樣式:設置中心內容文本的標題的標題樣式,包括字體、文字粗細、字號和顏色。

      • 位置:設置中心內容文本相對于組件中心點的X軸偏移量和Y軸偏移量。

      • 數字:設置數字內容的前綴樣式和后綴樣式。

      • 數字樣式:設置數字內容的數字樣式,包括字體、文字粗細、字號和顏色。

      • 位置:設置數字內容文本相對于組件中心點的X軸偏移量和Y軸偏移量。

    • 圖形

      • 圖片鏈接:設置進度環圖中心的圖片鏈接。如果您需要使用遠程服務器上的圖片,請在上方的輸入框中輸入圖片的URL地址;單擊圖片輸入框下方的更改刪除,更改或刪除圖片。其他設計資產詳細功能請參見使用界面功能說明。

      • 圖片樣式:設置進度環圖中心的圖片樣式。包括圖片的寬度、高度、透明度和圓角樣式。

      • 偏移量:設置進度環圖中心的圖片相對于組件圖表邊界的水平位置、垂直位置、水平偏移量和垂直偏移量。

  • 條件:條件樣式說明。

    條件樣式:單擊右側的imageimage圖標,添加或刪除一個條件樣式。 單擊imageimage圖標配置多個條件樣式的排列樣式。單擊image圖標,即可復制當前選中條件樣式配置內容并新增一個同樣配置的條件樣式。具體的條件樣式配置說明,請參見條件樹使用說明

    進度顏色:打開開關,配置該系列條件樣式中的進度顏色;關閉開關,無法配置該系列條件下的顏色。

數據源面板image

percent:展示進度環圖相對于整個環圖的百分比,值為小數,1表示100%。

數據項配置

說明

數據源

組件的數據源中通過代碼編輯可視化編輯展示了組件所包含的數據字段。也可以修改數據類型,靈活配置組件數據。

數據映射

當您需要自定義圖表字段配置時,可以在數據映射模塊設置不同的字段映射內容,將這些字段映射到組件對應的字段上。無需修改數據源中的字段,就可以實現數據的實時匹配。也可以單擊image圖標對字段分別樣式配置。

過濾器

打開過濾器,選擇已創建的數據過濾器或新建數據過濾器,并配置數據過濾器腳本,實現數據的篩選功能。詳情請參見管理數據過濾器

數據響應結果

實時展示了組件所使用的數據。當組件數據源發生變化時,數據響應結果會對應展示最新的數據。如果系統反應延遲,您可以單擊右側的image圖標,查看數據響應結果,也可以單擊右側的image圖標,獲取組件的最新數據。您也可以單擊查看示例,查看當前組件的響應結果示例。

禁止加載態

勾選復選框,在組件更新和預覽數據看板時,將看不到組件初始化時的加載內容,去勾選則相反。默認為去勾選狀態。

受控模式

勾選復選框,組件初始化狀態下不請求數據,僅通過全局變量或藍圖編輯器配置的方法發起請求數據;去勾選復選框,可以使用自動更新請求數據。默認為去勾選狀態。

自動更新請求

勾選復選框,可以手動輸入輪詢的時間頻次設置動態輪詢。清除后則不會自動更新,需要手動刷新頁面,或通過藍圖編輯器和全局變量事件來觸發請求更新數據。

高級面板

此組件沒有關聯全局變量。

藍圖交互

  1. 單擊頁面左上角的image圖標,進入藍圖頁面。

  2. 圖層節點頁簽下,添加當前組件至主畫布中。

  3. 查看藍圖配置參數。image.png

    • 事件

      事件

      說明

      當接口描述請求完成時

      數據接口請求返回并經過過濾器處理后拋出的事件,同時拋出處理后的JSON格式的數據。具體數據示例請參見畫布編輯器中組件右側配置面板數據源頁簽的數據響應結果區域。

    • 動作

      動作

      說明

      導入接口描述

      按組件繪制格式處理數據后,導入組件,重新繪制。不需要重新請求服務端數據。具體數據示例請參見畫布編輯器中組件右側配置面板數據源頁簽的數據響應結果區域。

      請求接口描述

      重新請求服務端數據,上游數據處理節點或圖層節點拋出的數據將作為參數。例如進度環圖配置了API數據源為https://api.test,傳到請求接口描述動作的數據為{ id: '1'},則最終請求接口為https://api.test?id=1。

      移動

      將組件移動到指定位置,參考數據示例。

      {      
            // 移動方式。絕對定位:to,相對定位:by。默認值:to。
              "positionType": "to",
            // 指定位置。x坐標,y坐標。
            "attr": {
              "x": 0,
              "y": 0
            },
            // 動畫方式。
            "animation": {
              "enable": false,
              // 動畫延時,單位ms。
              "animationDuration": 1000,
              // 動畫曲線??蛇x值為:linear|easeInOutQuad|easeInOutExpo。
              "animationEasing": "linear"
            }
          }

      切換顯隱

      切換組件顯示或者隱藏,不需要參數。

      顯示

      顯示組件,參考數據示例。

      {
        "animationType": "",//動畫方式,可選值:fade,不填無動畫。
        "animationDuration": 1000,//動畫延遲,單位ms。
        "animationEasing": ""http://動畫曲線
      }

      隱藏

      隱藏組件,參考數據示例。

      {
        "animationType": "",//動畫方式,可選值:fade,不填無動畫。
        "animationDuration": 1000,//動畫延遲,單位ms。
        "animationEasing": ""http://動畫曲線
      }

      更新組件配置

      動態更新組件的樣式配置。需要先在組件的樣式面板中,單擊復制配置到剪貼板,獲取組件配置數據。再根據需要在藍圖編輯器配置頁面的數據處理節點中更改對應樣式的字段值。

案例演示

本案例通過多個進度環圖組件展示一個項目中三個功能的同步研發進度和截止時間。

  1. 登錄DataV控制臺。

  2. 工作臺頁面,選擇任一數據看板,單擊編輯,進入畫布編輯器。

  3. 在上方工具欄單擊搜索,輸入進度環圖,單擊添加到畫布中。image

  4. 重復上述操作,再次添加2個進度環圖組件、1個玉玨圖組件和1個倒計時組件。

  5. 單擊玉玨圖,選擇數據源面板,修改靜態數據。

    [
      {
        "r": "多頻調制功能",
        "t": 0.86,
        "colorField": 100
      },
      {
        "r": "藍牙傳輸功能",
        "t": 0.64,
        "colorField": 200
      },
      {
        "r": "掩碼分發功能",
        "t": 0.49,
        "colorField": 300
      }
    ]
  6. 單擊進度環圖,修改圖形 > 中心內容 > 文本下的標題為多頻調制功能,修改組件名稱為進度環圖-1。重復操作完成其他2個進度環圖中心內容文本和名稱的設置。image

  7. 單擊倒計時組件,選擇數據源面板,修改靜態數據。

    [
      {
        "endTime": "2023-06-20 00:00:00"
      }
    ]
  8. 單擊image圖標,切換至藍圖中。

  9. 圖層節點頁簽下,拖拽除倒計時外其他所有組件到主畫布中。

  10. 單擊邏輯節點頁簽,添加序列執行節點到主畫布中,并連接組件。image

  11. 配置序列執行節點處理方法。

    //進度環圖-1
    return [{
      "percent": data[0].t
    }]
    //進度環圖-2
    return [{
      "percent": data[1].t
    }]
    //進度環圖-3
    return [{
      "percent": data[2].t
    }]
  12. 單擊頁面右上角的預覽。查看展示結果。image

  13. (可選)調整全部組件樣式和位置,添加其他裝飾組件,使得數字大屏更加飽滿。image