水球圖

水球圖是常規圖表的一種，支援自訂SVG圖形展示，能夠通過自訂系列的文本或者圖片達到多種效果，用於展示單一數據的完成情況。本文檔為您介紹基礎款水球圖各配置項的含義，説明您快速準確地使用水球圖元件。

配置

• 基礎設置

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

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

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

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

• 全域

  • 形狀：水球圖的展示圖形，支援自訂SVG代碼定制化展示

  • 自訂path：如果選擇了“自訂svg”形狀，可在此處輸入自訂svg的path路徑

  

  • 圖形大小：圖形在劃定區域內的大小

  

• 輪廓

  • 顯示/隱藏：是否展示水球圖的輪廓

  • 內部間距：展示的輪廓與水球圖的間距

  

  • 輪廓樣式

    • 寬度：輪廓的寬度

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

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

    • 陰影範圍：輪廓的陰影範圍

    • 透明度：輪廓的透明度

  

• 波浪

  • 振幅：波浪的振動幅度，值越大，波浪越大

  

  • 蕩漾方向：選擇波浪蕩漾的方向，可選從左到右、從右到左

  • 波浪顏色：配合資料項目wave欄位，控制波浪的顏色

  return { 
      wave: [0.5]
  }
  

  

  • 樣式

    • 陰影顏色：波浪陰影的顏色

    • 陰影範圍：波浪陰影的範圍

    • 透明度：波浪的透明度

  • 動畫

    • 開啟：是否開啟波浪的滾動動畫

    • 動畫時長：控制波浪滾動的快慢，時間越短，波浪滾動頻率越快

• 背景

  • 背景顏色：是否展示該表圖的圖例

  

  • 邊框寬度：圖形的邊框寬度

  • 邊框顏色：圖形的邊框顏色

  

• 自訂元素

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

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

  • 位置

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

    • 系統控制

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

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

    • 手動控制

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

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

  • 文本

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

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

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

    • 字體：文本的字體

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

  

  • 圖片

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

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

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

  

數據

return [{
    graphic:[{
        text:"xxx"
    },{
        image:"https://xxx.png"
    }],
    wave:[0.5]
}]

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

• wave：波浪的數據值，可配置多條波浪，取值0-1

• graphic：自定元素集合

  • text：自訂的文本內容

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