基础柱状图

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

要设置柱状图，您需要将 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