柱狀圖：核心設置、樣式與佈局

在資料視覺化與報表領域中，柱狀圖（一種垂直條形圖）是用於比較單一或多個指標上離散類別的主要工具。與適合長文本標籤的水平條形圖不同，垂直柱狀圖利用高度差異立即傳達數量、增長與差異。無論您是顯示季度銷售數據、伺服器 CPU 使用率的波動，還是按渠道劃分的網路流量，柱狀圖都能為基於類別的指標提供清晰的視覺標準。

垂直柱狀圖的運作原理

在 Apache ECharts 中，水平條形圖與垂直柱狀圖均依賴於'bar'系列類型。創造柱狀圖的關鍵因素是將類別標籤放置在水平軸（xAxis）上，同時將垂直軸（yAxis）設定為數值。圖表引擎會讀取資料陣列，並根據數值比例動態調整每個垂直柱的長度。

1. 基礎設置

要建立基本的柱狀圖，請定義以類別為基礎的 X 軸，並將您的資料集對應到一個具有type: 'bar':

ECharts 在 VPasCode 中編輯 ECharts
ECharts Edit ECharts in VPasCode 
option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'bar',
            data: [120, 200, 150, 80, 70, 110, 130]
        }
    ]
};
Edit ECharts in VPasCode
在 VPasCode 中編輯 ECharts

 

進階結構技術

在建立儀表板時，簡單的單系列圖表通常不夠用。ECharts 提供了清晰的語法選項，用於管理多系列比較、自訂維度與佈局間距。

多系列比較

要並排比較多個資料集（例如年度間收入），請在series陣列中加入多個物件。佈局引擎會根據 X 軸上的每個類別將相關的柱狀圖分組：

ECharts 在 VPasCode 中編輯 ECharts
ECharts Edit ECharts in VPasCode 
option = {
    xAxis: {
        type: 'category',
        data: ['Q1', 'Q2', 'Q3', 'Q4']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '2025年收入',
            type: 'bar',
            data: [320, 332, 301, 334]
        },
        {
            name: '2026年收入',
            type: 'bar',
            data: [220, 182, 191, 234]
        }
    ]
};
Edit ECharts in VPasCode
在 VPasCode 中編輯 ECharts

 

自訂柱狀圖樣式與個別強調

您可以將全域樣式套用至整個系列，或直接針對特定資料點進行設定。這對於強調關鍵事件、異常值或特定目標特別有用。

  • 顏色：設定填滿顏色（十六進位、RGB 或線性漸層）。
  • 圓角半徑：為柱狀圖添加圓角（例如，[5, 5, 0, 0] 用於頂部角落）。
  • 透明度：調整柱狀圖的透明度。
  • 陰影模糊 & 陰影顏色：為柱狀圖添加立體感與陰影效果。
ECharts 在 VPasCode 中編輯 ECharts
ECharts Edit ECharts in VPasCode 
option = {
    xAxis: {
        type: 'category',
        data: ['直接', '電子郵件', '廣告網絡', '影片廣告', '搜尋']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'bar',
            data: [
                320,
                332,
                {
                    value: 401,
                    // 強調單一高峰柱狀圖
                    itemStyle: {
                        color: '#ee6666',
                        borderRadius: [6, 6, 0, 0]
                    }
                },
                334,
                390
            ],
            itemStyle: {
                color: '#5470c6',
                borderRadius: [4, 4, 0, 0]
            }
        }
    ]
};
Edit ECharts in VPasCode
在 VPasCode 中編輯 ECharts

 

微調佈局與尺寸

柱狀圖的尺寸與間距會顯著影響可讀性，特別是在響應式螢幕或密集儀表板上顯示圖表時。

1. 控制寬度與限制

預設情況下，柱狀圖的寬度會根據圖表容器動態縮放。您可以使用尺寸屬性來控制這些比例：

  • 柱寬：使用固定像素或類別寬度的百分比來定義柱狀圖寬度（例如，'30%').
  • 最大柱寬：設定寬度上限，以避免柱狀圖在寬螢幕顯示時過度拉伸。
  • barMinHeight: 強制設定最小像素高度，以確保接近零的值仍可點擊且可見。

2. 柱狀圖間距與背景軌道

為讓您的柱狀圖呈現現代化儀表板外觀，請調整內部間距或啟用全高背景軌道：

ECharts 在 VPasCode 中編輯 ECharts
ECharts Edit ECharts in VPasCode 
option = {
    xAxis: {
        type: 'category',
        data: ['週一', '週二', '週三', '週四', '週五']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'bar',
            data: [120, 200, 150, 80, 70],
            barWidth: '40%',
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.15)',
                borderRadius: [4, 4, 0, 0]
            }
        }
    ]
};
Edit ECharts in VPasCode
在 VPasCode 中編輯 ECharts

 

戰略最佳實務

  • 保持間距均衡： 避免設定 barWidth 過寬（超過 60%），以免視覺佈局顯得擁擠。
  • 水平與垂直的選擇： 當分類標籤較短時（例如：月份、季度、代碼），請使用柱狀圖。若您的標籤為長篇描述或姓名，建議將分類資料轉至 yAxis 以製作水平柱狀圖。
  • 零基線完整性： 始終保持數值軸從零開始（0）。在柱狀圖中截斷底部刻度會扭曲高度比例，並誤導觀看者。
返回頂端