基本的な棒グラフ

棒グラフは、離散データ間の比較を示すチャートです。棒の長さは、カテゴリデータに比例します。

棒グラフを設定するには、`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` の下に配列をもう1つ追加する必要があります。

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` を置換された高さとして使用します。

列間隔

列間隔には2種類があります。1つは、同じカテゴリの異なる系列間のスペースです：`barGap`。もう1つは、カテゴリ間のスペースです：`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