基礎柱狀圖

柱狀圖是一種用於呈現離散資料之間比較的圖表。柱條的長度與分類資料成正比。

要設定柱狀圖，你需要將 series 的 type 設定為 'bar'。

[配置項]

簡單示例

我們從一個基礎的柱狀圖開始。

option = {
  xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      data: [23, 24, 18, 25, 27, 28, 25]
    }
  ]
};
線上示例

在這種情況下，x 軸是類目軸。因此，你需要為 'xAxis' 定義一些相應的值。同時，y 軸的資料型別是數值型。y 軸的範圍將由 'series' 中的 data 自動生成。

多系列柱狀圖

你可以使用一個系列（series）來表示一組相關的資料。要在同一個圖表中顯示多個系列，你需要在 series 下再新增一個數組。

option = {
  xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      data: [23, 24, 18, 25, 27, 28, 25]
    },
    {
      type: 'bar',
      data: [26, 24, 18, 22, 23, 20, 27]
    }
  ]
};
線上示例

自定義柱狀圖

樣式

透過 'series.itemStyle' 來設定柱狀圖的樣式是一個好主意。SCI 的描述

  • 柱條的顏色（'color'）；
  • 柱條的描邊顏色（'borderColor'）、寬度（'borderWidth'）、型別（'borderType'）；
  • 柱條的圓角半徑（'barBorderRadius'）；
  • 透明度（'opacity'）；
  • 陰影型別（'shadowBlur'、'shadowColor'、'shadowOffsetX'、'shadowOffsetY'）

這是一個例子

option = {
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      data: [
        10,
        22,
        28,
        {
          value: 43,
          // Specify the style for single bar
          itemStyle: {
            color: '#91cc75',
            shadowColor: '#91cc75',
            borderType: 'dashed',
            opacity: 0.5
          }
        },
        49
      ],
      itemStyle: {
        barBorderRadius: 5,
        borderWidth: 1,
        borderType: 'solid',
        borderColor: '#73c0de',
        shadowColor: '#5470c6',
        shadowBlur: 3
      }
    }
  ]
};
線上示例

在這個例子中，我們透過相應 series 的 'itemStyle' 定義了柱狀圖的樣式。完整的配置項及其用法，請查閱配置項手冊：series.itemStyle。

柱條的寬度和高度

你可以使用 barWidth 來改變柱條的寬度。例如，在下面的例子中，'barWidth' 被設定為 '20%'。這表示每個柱條的寬度是類目寬度的 20%。由於每個系列中有 5 個數據，20% 的 'barWidth' 意味著佔整個 x 軸的 4%。

option = {
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      data: [10, 22, 28, 43, 49],
      barWidth: '20%'
    }
  ]
};
線上示例

此外，barMaxWidth 限制了柱條的最大寬度。對於一些較小的值，你可以為柱條宣告一個最小高度：barMinHeight。當資料的對應高度小於該限制時，ECharts 將使用 'barMinHeight' 作為替代高度。

柱間距

有兩種柱間距。一種是同一類目下不同系列之間的間距：barGap。另一種是不同類目之間的間距：barCategoryGap。

option = {
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      data: [23, 24, 18, 25, 18],
      barGap: '20%',
      barCategoryGap: '40%'
    },
    {
      type: 'bar',
      data: [12, 14, 9, 9, 11]
    }
  ]
};
線上示例

在這個例子中，barGap 是 '20%'。這意味著同一類目下柱條之間的距離是柱條寬度的 20%。例如，如果我們設定 barCategoryGap 為 '40%'，那麼柱條兩側的間距將佔據類目寬度的 40%（與柱條寬度相比）。

通常，如果設定了 'barGap' 和 barCategoryGap，則不必明確指定 barWidth。如果需要確保在圖表很大時柱條不會太寬，可以嘗試使用 barMaxWidth 來限制柱條的最大寬度。

在同一個笛卡爾座標系中，該屬性將被多個柱狀圖系列共享。為確保它在圖表上生效，請在座標系的最後一個柱狀圖系列上設定該屬性。

為柱條新增背景色

有時你可能想改變柱條的背景色。在 ECharts v4.7.0 之後，可以透過 'showBackground' 啟用此功能，並由 'backgroundStyle'進行配置。

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(220, 220, 220, 0.8)'
      }
    }
  ]
};
線上示例

貢獻者 在 GitHub 上編輯此頁

plainheartpissang