全部產品
Search
文件中心

DataV:指標佔比餅圖

更新時間:Jun 19, 2024

本文介紹指標佔比餅圖的圖表樣式和配置面板的功能。

圖表樣式

指標佔比餅圖是餅圖的一種,能夠展示當前指標占預期目標的百分比值或當前指標的實際數值,但不支援同時展示指標值和目標值,適用於展示當前指標的完成情況,同時也不支援多系列資料配置。

image

配置面板image

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

  • 圖表尺寸:包括組件的寬度和高度,單位為px。可單擊鎖定長寬比按鍵表徵圖鎖定組件的寬高比,等比例修改組件的寬高。再次單擊進行解鎖,解鎖後寬高比不受限制。
  • 圖表位置:包括組件的橫座標縱座標,單位為px。橫座標為組件左上方距離頁面左邊界的像素距離,縱座標為組件左上方距離頁面上邊界的像素距離。
  • 旋轉角度:以組件的中心為中心點,進行旋轉,單位為度(°)。
    • 手動輸入角度值,控制組件的旋轉角度。
    • 拖動圓圈旋轉控製圖標表徵圖內的黑點,控制組件的旋轉角度。
    • 單擊左右翻轉表徵圖表徵圖,控制組件左右翻轉樣式。
    • 單擊上下翻轉表徵圖表徵圖,控制組件上下翻轉樣式。
  • 不透明度:取值範圍為0~1。為0時,圖表隱藏;為1時,圖表全部顯示。預設為1
  • 字型:餅圖中所有文本的字型系列,預設為微軟雅黑

  • 邊距

    參數

    說明

    頂部

    餅圖與組件上邊界的距離。

    底部

    餅圖與組件下邊界的距離。

    左側

    餅圖與組件左邊界的距離。

    右側

    餅圖與組件右邊界的距離。

  • 數值:餅圖中數值的樣式,可單擊開關表徵圖表徵圖控制數值的顯隱。image

    參數

    說明

    字型大小

    數值的大小。

    顏色

    數值的顏色。

    字型粗細

    數值文本的粗細。

    小數點位元

    數值顯示的小數點位元。

    真實數值

    開啟開關,顯示資料中的具體值;關閉開關,顯示資料所佔的百分比值。

  • 扇形:餅圖中扇形的樣式。image

    參數

    說明

    標題

    餅圖下方顯示的文字標題。

    顏色

    標題的顏色,請參見顏色選取器說明進行修改。

    背景色

    指標扇形下方的背景環的顏色。

    越界顏色

    越界環的顏色,當進度大於目標時,會顯示一圈越界環。越界顏色樣式

    內半徑

    扇形的半徑,取值範圍為0~1,若該值太小,會覆蓋內環。內半徑面板

  • 內環:內環的樣式,一般為整個圓環。內環面板

    參數

    說明

    顏色

    內環顏色。

    內半徑

    內環內半徑的尺寸比例,取值範圍為0~1。

    外半徑

    內環外半徑的尺寸比例,取值範圍為0~1。

  • 極軸:極座標軸的樣式。極軸面板

    網路線:極座標軸網路線的樣式,可單擊開關表徵圖表徵圖控制網路線的顯隱。

    顏色:極座標軸網路線的顏色。

  • 角度軸角度軸面板

    角度位移:指標的扇形起始位移角度,預設為auto,表示位移值為0。

  • 圖例:圖表的圖例樣式,可單擊眼睛表徵圖表徵圖控製圖例的顯隱。圖例面板

    • 文本:圖例的文本樣式。

      參數

      說明

      字型大小

      圖例文本的大小。

      顏色

      圖例文本的顏色。

      字型粗細

      圖例文本字型的粗細。

    • 布局

      • 間距:圖例的間距樣式。

        參數

        說明

        左右間距

        相鄰圖例之間左右兩側的距離,僅當有多個系列時該配置項才有效。

        上下間隔

        圖例與組件上下邊界的距離。

      • 位置:圖例相對於組件起始座標的位置,可選頂部置中頂部居左頂部居右底部置中底部居左底部居右

  • 動畫:餅圖的動畫效果樣式,可單擊眼睛表徵圖表徵圖控制動畫效果的開啟或關閉。動畫面板

    參數

    說明

    初始動畫時間長度

    組件第一次渲染動畫的時間長度,單位為ms。

    緩動效果

    動畫的緩動效果,系統提供多種常見的動畫緩動效果供您選擇。

    更新動畫時間長度

    組件資料更新時的動畫時間長度,單位為ms。

    更新時是否從之前位置開始

    開啟開關,組件有資料更新的時候,從上一個資料的位置開始;關閉開關,組件有資料更新的時候,從0的位置開始。

資料面板image

配置欄位說明

欄位

說明

aims

預期的目標值。

actual

實際的進度值,在可視化應用上展示為扇形(實際)占餅圖(目標)的百分比。

actualText

(可選)實際文案,即圖例的常值內容。對應配置面板中的扇形 > 標題配置項,系統優先使用資料中的配置。

互動面板

此組件沒有互動事件。

藍圖編輯器互動配置

  1. 在畫布編輯器頁面,按右鍵組件,選擇匯出到藍圖編輯器
  2. 單擊頁面左上方的藍圖表徵圖表徵圖。
  3. 在藍圖編輯器配置頁面,單擊匯入節點欄內的指標佔比餅圖組件,在畫布中可以看到如下圖所示的指標佔比餅圖的藍圖編輯器配置參數。指標佔比餅圖藍圖編輯器面板

    • 事件

      事件

      說明

      當指標佔比餅圖介面請求完成時

      資料介面請求返回並經過過濾器處理後拋出的事件,同時拋出處理後的JSON格式的資料。具體資料樣本請參見畫布編輯器中組件右側配置面板資料頁簽的資料響應結果地區。

      當指標佔比餅圖介面請求失敗時

      資料介面請求失敗時(請求失敗的情況可能是:網路問題或介面報錯等)返回並經過過濾器處理後拋出的事件,同時拋出處理後的JSON格式的資料。具體資料樣本請參見畫布編輯器中組件右側配置面板資料頁簽的資料響應結果地區。

    • 動作

      動作

      說明

      請求指標佔比餅圖介面

      重新請求服務端資料,上遊資料處理節點或圖層節點拋出的資料將作為參數。例如指標佔比餅圖配置了API資料來源為http://api.test,傳到請求指標佔比餅圖介面動作的資料為{ id: '1'},則最終請求介面為http://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"
            }
          }