基礎長條圖

長條圖是一種呈現離散資料之間比較的圖表。長條的長度與分類資料成比例關係。

要設定長條圖，您需要將 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 下新增一個陣列。

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 上編輯此頁面

plainheart plainheartpissang pissang