全部產品
Search
文件中心

DataV:餅圖

更新時間:Nov 19, 2024

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

圖表樣式

餅圖通過將一個圓餅按照分類的佔比劃分成多個區塊,整個圓餅代表資料的總量。餅圖廣泛的應用在各個領域,用於表示不同分類的佔比情況,通過弧度大小來對比各種分類,可以很好地協助使用者快速瞭解資料的佔比分配。image.png

樣式面板image.png

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

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

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

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

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

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

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

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

  • 圖形

    參數

    說明

    圖表邊距

    單擊開關表徵圖表徵圖,控製圖表邊距的顯隱。開啟開關後,可配置餅圖地區與組件上下左右四個邊界之間的距離,單位預設px。

    餅圖半徑

    餅圖的半徑大小值,包括內徑和外徑,單位%。

    餅圖顏色

    餅圖的顏色,請參見顏色映射器使用說明,配置不同餅圖的映射顏色樣式。

    餅圖描邊

    餅圖的描邊樣式,包括描邊線的類型、粗細值和顏色。

    說明

    當線的類型選擇虛線點線時,還可以配置線的間斷長度值和每一個間斷線之間的距離。

    餅圖發光

    餅圖的發光樣式,單擊開關表徵圖表徵圖,控制餅圖發光配置項的顯隱。

    • 發光顏色:包括跟隨扇區開關和不透明度。當關閉跟隨扇區開關後,可以單獨設定發光顏色。

    • 模糊係數:設定餅圖發光的模糊係數,範圍0~50,數值越大餅圖間的發光範圍越模糊。

    小數合并

    限制展現的切片數量,並將剩下的切片合并成一個總的切片,同時可以設定合并後的分類名。單擊開關表徵圖表徵圖可開啟或關閉小數合并 。

    中心內容

    餅圖中心的常值內容,僅在餅圖半徑的內徑大於0時顯示該欄位。單擊開關表徵圖表徵圖可開啟或關閉中心內容 。

    • 地區類型:設定中心內容地區的類型,包括文本類型圖形類型

    • 標題:設定中心內容的標題。

    • 標題文本:設定標題文本的字型樣式、文字的粗細、字型大小的大小和文本的顏色。

    • 標題位移:設定中心內容在水平方向和垂直方向的位移量,單位為px。

    • 數值格式:設定中心內容的數值顯示格式。可選預設11(整數)11.1(浮點數)11.11(浮點數)11%(百分比)11.1%(百分比)1,111(千分位)1,111.1(千分位),更多資料顯示格式請參見資料顯示格式說明

    • 內容前尾碼:設定中心內容的首碼內容和尾碼內容。

    • 內容文本:設定中心內容中內容的字型樣式、文字的粗細、字型大小的大小和文本的顏色。

    • 內容位移:設定中心內容中內容在水平方向和垂直方向的位移量,單位為px。

    • 圖片連結:設定中心內容的圖片連結,當地區類型選擇圖形類型時顯示。

    • 圖片樣式:設定中心內容的圖片寬度、高度、透明度和圓角,當地區類型選擇圖形類型時顯示。

    • 位移量:設定中心內容圖片的水平/垂直位置和水平/垂直位移量,當地區類型選擇圖形類型時顯示。

    餅表徵圖簽

    餅圖的標籤樣式,單擊開關表徵圖表徵圖,控制餅表徵圖簽配置項的顯隱。

    • 標籤格式:標籤內容的格式樣式。

      • 格式:標籤格式可選預設值或者百分比

      • 標籤欄位:標籤欄位所處的位置樣式,包括內部外部蜘蛛

      • 資料格式:設定標籤的數值格式,可選預設11(整數)11.1(浮點數)11.11(浮點數)11%(百分比)11.1%(百分比)1,111(千分位)1,111.1(千分位)。更多資料顯示格式請參見資料顯示格式說明,僅在標籤欄位選擇預設值時顯示。

    • 前尾碼:設定餅表徵圖簽的前尾碼內容。

    • 標籤引線:餅表徵圖簽的引線樣式。單擊開關表徵圖表徵圖,控制餅表徵圖簽引線配置項的顯隱。

      • 粗細:引線的粗細值,僅在標籤欄位選擇蜘蛛外部時可配置。

      • 長度:引線的長度值,單位px。僅在標籤欄位選擇蜘蛛時可配置。

    • 文本樣式:餅表徵圖簽的文本樣式,包括文本的字型樣式、文字粗細、字型大小和顏色。

    • 文本描邊:餅表徵圖簽的文本描邊樣式,包括描邊線的粗細值和顏色。

    貼圖

    扇形地區的貼圖樣式,單擊開關表徵圖表徵圖,控制貼圖配置項的顯隱。

    說明

    貼圖背景不支援漸層色。

    • 類型:貼圖的類型,包括點形線形方形圖片

    • 填充樣式:設定貼圖的填充樣式。請參見顏色選取器說明,配置貼圖的顏色樣式。

    • 描邊樣式:設定貼圖的描邊樣式。請參見顏色選取器說明,配置貼圖的顏色樣式。當類型選擇為點形正方形時顯示。

    • 額外樣式:貼圖的其他樣式,包括貼圖的圖形尺寸圖形間距線間距旋轉角度是否交錯開關。當選擇類型為圖片時,可以設定圖片地址平鋪寬度平鋪高度平鋪間距旋轉角度

  • 動畫:餅圖的動畫效果樣式。

    參數

    說明

    動畫開關

    開啟開關,可配置餅圖的動畫效果。

    動畫效果

    動畫的效果類型,系統提供多種常見的動畫效果供您選擇,包括水平生長垂直生長划動進入縮放漸入漸隱漸現,僅在開啟動畫開關後可配置。

    動畫時間長度

    組件動畫效果的期間,單位為ms,僅在開啟動畫開關後可配置。

  • 互動:餅圖組件的互動效果樣式。

    • 輪播效果:開啟輪播後,將應用提示框配置,且提示框不再通過互動觸發。單擊開關表徵圖表徵圖控制輪播效果的顯隱。

    • 中心文本互動:僅在圖形模組半徑中內徑大於0時顯示,開啟開關,中心文本互動生效;關閉開關,中心文本互動不生效。

      說明

      當中心文本互動生效時,提示框失效。

    • 提示框:在預覽或發佈頁面,滑鼠懸浮或單擊扇形時出現的提示框的樣式,單擊開關表徵圖表徵圖可開啟或關閉提示框 。

      參數

      說明

      模式

      提示框的選擇模式,可選,包括簡潔通用

      觸發方式

      提示框被觸發的方式,可選,包括懸浮點擊

      顯示位置

      提示框顯示的位置樣式,可選,包括

      標題間距

      提示框中標題之間的間距,單位px。

      標題文本

      提示框中標題文本的樣式,包括文字字型樣式、文字粗細、字型大小和顏色。

      內容顯示

      單擊右側的imageimage表徵圖,添加或刪除一個提示框內容顯示系列。 單擊imageimage表徵圖配置多個提示框內容顯示系列的排列樣式。單擊image表徵圖,即可複製當前選中提示框內容顯示系列配置內容並新增一個同樣配置的提示框內容顯示系列。

      • 欄位名:提示框內容的欄位名稱,需要和資料面板中的欄位相匹配。

      • 顯示名稱:提示框內容的顯示名稱。

      • 尾碼:提示框內容的尾碼。

      內容間距

      提示框內容文本之間的間距,單位px。

      內容文本

      提示框中內容文本的樣式,包括字型樣式、文字粗細、字型大小和顏色。

      彈框背景

      提示框的彈框背景樣式。

      • 背景邊距:提示框彈框背景在水平和垂直方向的邊距值。

      • 背景顏色:提示框的背景顏色。

      • 邊框樣式:提示框邊框的樣式,包括邊框線的類型、圓角大小、線寬大小和邊框線的顏色。

      軸指標

      提示框的軸指示線的樣式,包括軸指示線的類型、粗細值和軸指示線顏色。

      說明

      當線的類型選擇虛線點線時,還可以配置線的間斷長度值和每一個間斷線之間的距離。

    • 選中態:當餅圖被選中時候的狀態樣式,單擊開關表徵圖表徵圖可開啟或關閉選中態樣式 。

      參數

      說明

      觸發方式

      餅圖中扇形地區被選中觸發的方式,可選,包括懸浮點擊

      選中方式

      選中餅圖扇形地區的方式,可選,包括單選多選

      扇形顏色

      扇形地區被選中狀態下的顏色。

      扇形描邊

      扇形地區描邊線的樣式,包括描邊線條的類型、線條的粗細和描邊線的顏色。

      說明

      當線的類型選擇虛線點線時,還可以配置線的間斷長度值和每一個間斷線之間的距離。

  • 圖例:餅圖的圖例樣式。

    參數

    說明

    圖例開關

    開啟開關,可配置圖例樣式;關閉開關,無法配置圖例樣式。

    圖例位置

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

    文本樣式

    圖例文本的字型樣式、文字粗細、字型大小和顏色。

    分類圖例

    分類型圖例的樣式。只有當組件樣式面板中的圖形餅圖顏色映射類型配置為名詞分類時,圖例才展示成分類圖例

    • 圖例標記:圖例標記的形狀和尺寸之大小。

    • 圖例間距:不同分類圖例之間在橫向和縱向的距離。

    • 最大寬度:設定圖例的最大寬度,單位為px。

    • 允許翻頁:開啟開關,開啟圖例翻頁功能,可配置圖例數量過多需要翻頁顯示時的頁碼樣式和箭頭樣式;關閉開關,圖例內容全部展示在一頁中,無法翻頁顯示。

      • 最大行數:設定允許翻頁的最大行數,單位為行。

      • 頁碼樣式:翻頁頁碼的樣式,包括頁碼的字型、文字的粗細、字型大小的大小和顏色。

      • 箭頭樣式:翻頁樣式內箭頭的尺寸大小、箭頭預設顏色及禁用顏色。

    連續圖例

    連續圖例的樣式。只有當組件樣式面板中的圖形餅圖顏色映射類型配置為數值連續數值分區時,圖例才展示成連續圖例

    • 滑軌樣式

      • 類型:圖例滑動軌道的類型,包括矩形三角形

      • 長度:圖例滑動軌道的長度值。

      • 高度:圖例滑動軌道的高度值。

      • 背景色:圖例滑動軌道的背景顏色。

    • 滑塊樣式:圖例中滑軌上的滑塊樣式。

      • 最小值:滑塊的最小值,支援自訂輸入,也支援系統選擇自動,取資料中的最小值。

      • 最大值:滑塊的最大值,支援自訂輸入,也支援系統選擇自動,取資料中的最大值。

      • 尺寸:滑塊的尺寸大小。

      • 顏色:滑塊的顏色。

    • 標註樣式:圖例上文字標註的樣式。

      • 對齊:圖例文字標註相對於滑軌的對齊,包括頂端對齊置中對齊底端對齊

      • 間距:圖例文字標註與滑軌的距離。

  • 扇形樣式:單擊右側的imageimage表徵圖,添加或刪除一個條件樣式。 單擊imageimage表徵圖配置多個條件樣式的排列樣式。單擊image表徵圖,即可複製當前選中資料數列配置內容並新增一個同樣配置的條件樣式。具體每個系列下的條件樣式配置說明,請參見條件樹使用說明

    • 扇形顏色:開啟開關,配置該系列條件樣式中的餅圖內扇形地區的顏色;關閉開關,無法配置該系列條件下的餅圖內扇形地區的顏色。

    • 文本標註:當前條件下的文本標註樣式。

      • 常值內容:設定文本標註內容。

      • 位移:設定文本標註的水平和垂直位移,單位為px。

      • 朝向:設定文本標註相對於文本標註點的朝向,包括

      • 文本背景:設定文本標註的文本背景,包括背景的填充色、圓角半徑。

      • 文本樣式:設定文字標註的常值內容的文本樣式。

      • 文本連線:設定文本標註的文本連線樣式,包括線型、顏色、粗細和長度。

      • 文本標註點:設定文本標註點的填充顏色、半徑和需要描邊的開關。

        說明

        描邊樣式和連線樣式相同。

資料來源面板image.png

欄位

說明

type

用於配置餅圖中每個圓弧區塊的類目。

value

用於配置餅圖中每個圓弧區塊的數值。

colorField

(可選)顏色映射欄位,用於設定圓弧區塊的各種顏色的映射配置樣式。

資料項目配置

說明

資料來源

組件的資料來源中通過代碼編輯可視化編輯展示了組件所包含的資料欄位。也可以修改資料類型,靈活配置組件資料。

資料對應

當您需要自訂圖表欄位配置時,可以在資料對應模組設定不同的欄位對應內容,將這些欄位對應到組件對應的欄位上。無需修改資料來源中的欄位,就可以實現資料的即時匹配。也可以單擊image表徵圖對欄位分別樣式配置。

過濾器

開啟過濾器,選擇已建立的資料過濾器或建立資料過濾器,並配置資料過濾器指令碼,實現資料的篩選功能。詳情請參見管理資料過濾器

資料響應結果

即時展示了組件所使用的資料。當組件資料來源發生變化時,資料響應結果會對應展示最新的資料。如果系統反應延遲,您可以單擊右側的image表徵圖,查看資料響應結果,也可以單擊右側的image表徵圖,擷取組件的最新資料。您也可以單擊查看樣本,查看當前組件的響應結果樣本。

禁止載入態

勾選複選框,在組件更新和預覽資料看板時,將看不到組件初始化時的載入內容,去勾選則相反。預設為去勾選狀態。

受控模式

勾選複選框,組件初始化狀態下不請求資料,僅通過全域變數或藍圖編輯器配置的方法發起請求資料;去勾選複選框,可以使用自動更新請求資料。預設為去勾選狀態。

自動更新請求

勾選複選框,可以手動輸入輪詢的時間頻次設定動態輪詢。清除後則不會自動更新,需要手動重新整理頁面,或通過藍圖編輯器和全域變數事件來觸發請求更新資料。

進階面板image.png

互動

說明

當資料項目改變時

開啟開關,開啟組件互動功能。當某個資料項目改變時時拋出臨時變數,預設拋出資料中的typevalue欄位。具體配置請參見組件互動配置

當圖例被點擊時

開啟開關,開啟組件互動功能。當單擊某個圖例時拋出臨時變數,預設拋出資料中的valuechecked欄位。具體配置請參見組件互動配置

藍圖互動

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

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

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

    • 事件

      事件

      說明

      當餅圖介面請求完成時

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

      當資料項目改變時

      當餅圖的圓弧區塊資料發生改變時拋出的事件,同時拋出該圓弧區塊對應的資料項目。

      當圖例被點擊時

      當單擊餅圖的圖例時拋出的事件,同時拋出該圓弧區塊對應的資料項目。

    • 動作

      動作

      說明

      匯入餅圖介面

      按組件繪製格式處理資料後,匯入組件,重新繪製。不需要重新請求服務端資料。具體資料樣本請參見畫布編輯器中組件右側配置面板資料來源頁簽的資料響應結果地區。

      請求餅圖介面

      重新請求服務端資料,上遊資料處理節點或圖層節點拋出的資料將作為參數。例如餅圖配置了API資料來源為https://api.test,傳到請求餅圖介面動作的資料為{ id: '1'},則最終請求介面為https://api.test?id=1

      高亮

      data:需要高亮的資料項目。

      • 單個高亮

        {
          type: '分類一', 
          value: 12
        }
      • 批量高亮

        [
          {
            type: '分類一', 
            value: 12
          }, 
          {
            type: '分類二', 
            value: 22
          }
        ]

      style:選中樣式。如:fillStyle、stroke、opacity等;高亮樣式不傳入時,使用預設樣式(配置中選中態的樣式)。

      參考資料樣本

      {
        "data": {},
        "style": {}
      }

      重設選擇項

      清空重設組件選擇項資料,不需要參數。

      移動

      將組件移動到指定位置,參考資料樣本。

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

      切換顯隱

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

      顯示

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

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

      隱藏

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

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

      更新群組件配置

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