基础柱状图

柱状图是一种展示离散数据之间比较的图表。柱子的长度与分类数据成比例。

要设置柱状图，你需要将 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' 来设置柱状图的样式是一个好主意。样式配置项说明：

  • 柱条颜色 ('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