全部產品
Search
文件中心

DataV:表徵圖

更新時間:Feb 25, 2025

本文介紹表徵圖全量選擇時各配置項的含義。

圖表樣式

表徵圖是媒體組件的一種,可以為各個行業的資料看板添加多種類型的表徵圖元素,能夠使資料看板展示更加美觀。

樣式面板

  • 搜尋配置:單擊樣式面板右上方的搜尋配置項表徵圖image,可在搜尋配置面板中輸入您需要搜尋的配置項名稱,快速定位到該配置項,系統支援模糊比對。詳情請參見搜尋配置項

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

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

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

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

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

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

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

  • 表徵圖資源:表徵圖資源的類型,可選通用行業自訂

    參數

    說明

    通用

    • 單擊表徵圖類型右側,在表徵圖庫下拉式清單內選擇某個表徵圖。

    • 單擊表徵圖類型中的表徵圖,在表徵圖庫下拉式清單內選擇某個表徵圖。

    • 單擊表徵圖類型中的表徵圖或者雙擊表徵圖類型表徵圖右側的文字地區,在橫線上自訂輸入表徵圖的名字,即可快速從下拉框表徵圖庫內搜尋對應的表徵圖並選中使用該表徵圖。

    行業

    單擊下方交通醫學工業三個行業配置項中的任意一個選項。針對不同行業配置項,選擇對應的表徵圖類型表徵圖類型具體選擇操作方法,請參見上方通用類型的配置方法。

    自訂

    您可以在下方表徵圖類型右側輸入框內輸入表徵圖對應的Unicode字型檔,即可在DataV中使用該自訂表徵圖;也可參見上方通用類型的配置方法,選擇下拉式清單內的某個已有的表徵圖資源。

  • 表徵圖樣式:表徵圖的樣式。

    顏色

    表徵圖的顏色,請參見顏色選取器說明進行修改。

    邊距

    表徵圖與組件四邊的距離百分比值,單位為%,取值範圍為-100~100。數值設定越小,表徵圖顯示越大,數值小到一定數值後表徵圖會超出組件外框大小;數值大到一定值,表徵圖會小到消失看不見。

  • 背景樣式:表徵圖的背景樣式 ,單擊眼睛表徵圖表徵圖控制背景的顯隱。

    參數

    說明

    背景色

    表徵圖的背景顏色,請參見顏色選取器說明進行修改。

    背景圓角

    表徵圖背景框的圓角大小,單位為px。數值為0的時候沒有圓角,背景框為方形,設定值越大,背景框圓角弧度值越大。

    邊框粗細

    背景邊框的粗細。

    邊框類型

    背景邊框的類型,可選實線虛線點線

    邊框顏色

    背景邊框的顏色,請參見顏色選取器說明進行修改。

  • 旋轉動畫:開啟開關,表徵圖開啟繞中心點順時針旋轉的動畫樣式;關閉開關,表徵圖無法旋轉。

  • 超連結配置:點擊表徵圖地區可跳轉至設定的超連結,也可以設定在新開視窗開啟。

  • 手勢游標:設定表徵圖的手勢游標 ,單擊眼睛表徵圖表徵圖控制游標的顯隱。

資料來源面板

該組件不需要配置資料。

進階面板

互動事件

說明

當點擊時

開啟開關,開啟組件互動功能。當單擊表徵圖時,會觸發資料請求,拋出臨時變數,動態載入當前表徵圖的資料。預設拋出資料中的urltype值,具體配置請參見組件互動配置

當滑鼠移入時

開啟開關,開啟組件互動功能。當滑鼠移入到表徵圖位置時,會觸發資料請求,拋出臨時變數,動態載入當前表徵圖的資料。預設拋出資料中的urltype值,具體配置請參見組件互動配置

當滑鼠移出時

開啟開關,開啟組件互動功能。當滑鼠從表徵圖位置移出時,會觸發資料請求,拋出臨時變數,動態載入當前表徵圖的資料。預設拋出資料中的urltype值,具體配置請參見組件互動配置

藍圖互動

  1. 單擊頁面左上方的image表徵圖,進入藍圖頁面。

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

  3. 查看藍圖配置參數。

    • 事件

      事件

      說明

      當點擊時

      當單擊表徵圖時拋出的事件,同時拋出該表徵圖對應的資料項目。

      當滑鼠移入時

      當滑鼠移動到表徵圖位置時拋出的事件,同時拋出該表徵圖對應的資料項目。

      當滑鼠移出時

      當滑鼠從表徵圖位置處移出時拋出的事件,同時拋出該表徵圖對應的資料項目。

    • 動作

      動作

      說明

      請求介面描述

      重新請求服務端資料,上遊資料處理節點或圖層節點拋出的資料將作為參數。例如輪播列表配置了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,
              // 動畫延時。
              "animationDuration": 1000,
              // 動畫曲線。可選值為:linear|easeInOutQuad|easeInOutExpo。
              "animationEasing": "linear"
            }
          }

      切換顯隱

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

      顯示

      顯示組件,參考資料樣本。

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

      隱藏

      隱藏組件,參考資料樣本。

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

      更新群組件配置

      動態更新組件的樣式配置。需要先在組件的樣式面板中,單擊複製配置到剪貼簿,擷取組件配置資料。再根據需要在藍圖編輯器配置頁面的資料處理節點中更改對應樣式的欄位值。