基本柱狀圖

基本柱圖是柱狀圖的一種，它支援自訂y軸區間和多個系列的數據配置，能夠更加智慧地展示多維的數據差異，但在大屏中占的空間較大。本文檔為您介紹基本柱圖各配置項的含義，説明您快速準確地使用基本柱圖元件

配置

• 基礎設置

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

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

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

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

• 全域

  • 坐標軸反轉：勾選後可將縱向柱狀圖切換成橫向柱狀圖

  

  • 類目軸欄位名: 類目軸是每組資料的唯一標識，需要與資料項目中的類目欄位保持一致

  

  • 背景柱條

    • 開啟/關閉：開啟背景柱條後，會以坐標軸最大值生成背景陰影

    

    • 顏色：背景柱條的顏色，支持hex、rgb以及rgba格式的色值

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

    • 邊框寬度：邊框的寬度，單位px

    • 透明度：控制背景陰影透明度，你也可以使用rgba格式色值來控制

• 畫布間距

  • 頂間距：該圖表與元件邊界頂部的距離，單位為px

  • 右間距：該圖表與元件邊界右側的距離，單位為px

  • 底間距：該圖表與元件邊界底部的距離，單位為px

  • 左間距：該圖表與元件邊界左側的距離，單位為px

• 標題

  • 顯示/隱藏：是否展示該圖表的標題

  • 標題名稱：該圖表的標題的名稱

  • 左邊距：標題離容器左側的距離

  • 上邊距：標題離容器上側的距離

  • 文本樣式

    • 字型大小：標題的字體大小

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

    • 字體：標題的字體

    • 字體粗細：標題字體的粗細

• 提示框

  • 顯示/隱藏：當滑鼠懸浮到圖表上的點時，是否展示其提示的資訊

  • 觸發類型：如何觸發提示框的展示

  • 格式：提示框的展示內容可支援自訂配置，其中{a}表示系列名稱，{b}表示類目軸的值，{c}表示數值

  

  • 背景顏色：提示框的背景顏色，支持hex、rgb以及rgba格式的色值

  • 邊框顏色：提示框邊框的顏色，支持hex、rgb以及rgba格式的色值

  • 邊框寬度：提示框邊框的寬度，單位px

  • 內邊距：提示框的內邊距，例如："5,5,5,5"，代表上右下左邊距分別為5px、5px、5px、5px

• 圖例

  • 顯示/隱藏：是否展示該表圖的圖例

  • 左間距：圖例與容器左側的距離

  • 頂間距：圖例與容器上側的距離

  • 排列方向：圖例的排列方向，可選擇水準 or 垂直進行展示

  • 圖例圖示：圖例的圖示，可選圓形、方形、三角形、菱形圖示進行展示

  • 文本樣式

    • 字型大小：圖例的字體大小

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

    • 字體：圖例的字體

    • 字體粗細：圖例的字體粗細

• X軸

  • 顯示/隱藏：是否展示該圖表的x軸

  • 位置：改變X軸的位置，可選上方 or 下方

  

  • 坐標軸名稱

    • x軸名稱：x軸的名稱

    • x軸名稱位置：x軸的名稱位置，可選起點處、居中、終點處

    • 軸線間距：x軸的名稱與軸線的距離

    • 樣式

      • 顏色：坐標軸名稱的顏色，支持hex、rgb以及rgba格式的色值

      • 字體大小：坐標軸名稱的字體大小

      • 字體粗細：坐標軸名稱的字體粗細

      • 字體：坐標軸名稱的字體

  

  • 軸線

    • 顯示/隱藏：是否展示x軸的軸線

    • 軸線樣式

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

      • 樣式：軸線可選實線 or 虛線進行展示

      • 寬度：控制軸線的粗細，單位px

  

  • 刻度值

    • 顯示/隱藏：是否展示x軸的刻度值

    • 字型大小：刻度值的字體大小

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

    • 字體：刻度值的字體

    • 字體粗細：刻度值字體的粗細

  

  • 刻度線

    • 顯示/隱藏：是否展示x軸上的刻度線

    • 向內朝向：控制刻度線的朝向

    • 對齊標籤：坐標軸刻度是否和標籤對齊

    • 刻度線樣式

      • 顏色：刻度線的顏色，支持hex、rgb以及rgba格式的色值

      • 線寬：刻度線的線寬，單位px

    

  • 格線

    • 顯示/隱藏：是否展示圖表區域中的格線

    • 格線樣式

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

      • 樣式：格線的樣式，可選實線、虛線、點進行展示

      • 線寬：格線的線寬，單位px

  

• Y軸

  y軸的配置與x軸基本類似，具體配置應用可參照x軸

  • 顯示/隱藏：是否展示該圖表的y軸

  • 位置：改變y軸的位置，可選左側 or 右側

  

  • 坐標軸名稱

    • y軸名稱：y軸的名稱

    • y軸名稱位置：y軸的名稱位置，可選起點處、居中、終點處

    • 軸線間距：y軸的名稱與軸線的距離

    • 樣式

      • 顏色：坐標軸名稱的顏色，支持hex、rgb以及rgba格式的色值

      • 字體大小：坐標軸名稱的字體大小

      • 字體粗細：坐標軸名稱的字體粗細

      • 字體：坐標軸名稱的字體

  • 軸線

    • 顯示/隱藏：是否展示y軸的軸線

    • 軸線樣式

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

      • 樣式：軸線可選實線 or 虛線進行展示

      • 寬度：控制軸線的粗細，單位px

  • 刻度值

    • 顯示/隱藏：是否展示y軸的刻度值

    • 字型大小：刻度值的字體大小

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

    • 字體：刻度值的字體

    • 字體粗細：刻度值字體的粗細

  • 刻度線

    • 顯示/隱藏：是否展示x軸上的刻度線

    • 向內朝向：控制刻度線的朝向

    • 對齊標籤：坐標軸刻度是否和標籤對齊

    • 刻度線樣式

      • 顏色：刻度線的顏色，支持hex、rgb以及rgba格式的色值

      • 線寬：刻度線的線寬，單位px

  • 格線

    • 顯示/隱藏：是否展示圖表區域中的格線(按照x軸的刻度進行劃分)

    • 格線樣式

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

      • 樣式：格線的樣式，可選實線、虛線、點進行展示

      • 線寬：格線的線寬，單位px

• 數據軸縮放

  • 開啟/關閉：開啟資料軸縮放後，可自由控制所展示的資料項目，一般適用於資料項目較為密集的場景

  

  • 縮放類型：提供滾動縮放和手動縮放兩種縮放方式

    • 縮放類型：通過滑鼠滾動對資料項目進行縮放，通過滑鼠點擊移動切換資料項目的展示

    • 手動縮放：在元件底部提供一個縮放軸進行縮放控制

  

  • 手動縮放軸設置：如果你選擇了手動縮放這種方式，則可以對底部的縮放軸樣式進行配置

    • 顯示/隱藏：是否展示縮放軸，不建議對其隱藏，如果將其隱藏，將無法控制資料項目的切換

    • 高度：縮放軸的高度

    • 底部距離：縮放軸與底部的距離，單位px

    • 開始位置：資料範圍的起始位置，單位百分比

    • 結束位置：資料範圍的結束位置，單位百分比

    • 背景顏色：縮放軸的背景顏色，支持hex、rgb以及rgba格式的色值

    • 邊框顏色：縮放軸的邊框顏色，支持hex、rgb以及rgba格式的色值

    • 滑塊填充顏色：縮放軸中間滑塊的顏色，支持hex、rgb以及rgba格式的色值

• 資料數列

  該配置項為一個陣列，可配置多個系列，編輯器將遍歷資料，使資料通過一個或多個系列配置迴圈渲染。若需要自訂某些資料為特定樣式則需要手動對資料進行排序

  • 列欄位名：與資料配置中的欄位一致，控制圖表一組資料的展示

  • 系列名：通過系列名，可自訂圖例的名稱

  

  • 標籤

    • 顯示/隱藏：是否展示此系列下圖表的標籤

    • 位置：控制標籤展示的位置，提供外置頂部、內置居中、內置頂部三種位置展示

    • 字型大小：標籤的字體大小

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

    • 字體：標籤的字體

    • 字體粗細：標籤字體的粗細

  

  • 柱條樣式

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

    • 柱條邊框顏色：柱條的顏色，支持hex、rgb以及rgba格式的色值

    • 柱條邊框線寬：柱條邊框的寬度，單位px

    • 圓角半徑：用圓弧替換四個角，數值越大，圓弧越明顯

  

數據

return [{
    x: '指標1',
    y1: 220,
    max: 300
}, ......]

• x：類目軸自訂欄位元，需要與全域配置項中的類目軸欄位名一致

• y：數據軸自訂欄位元，需要與每個序列配置項中的列欄位元名一致

• max：背景柱條最大值，預設取數據中的最大值，也可自行設置