基本柱状图

柱状图（或称条形图）是一种通过柱形的长度来表现数据大小的一种常用图表类型。

设置柱状图的方式，是将 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]
    }
  ]
};
live

在这个例子中，横坐标是类目型的，因此需要在 xAxis 中指定对应的值；而纵坐标是数值型的，可以根据 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]
    }
  ]
};
live

柱状图样式设置

柱条样式

柱条的样式可以通过 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,
          // 设置单个柱子的样式
          itemStyle: {
            color: '#91cc75',
            shadowColor: '#91cc75',
            borderType: 'dashed',
            opacity: 0.5
          }
        },
        49
      ],
      itemStyle: {
        barBorderRadius: 5,
        borderWidth: 1,
        borderType: 'solid',
        borderColor: '#73c0de',
        shadowColor: '#5470c6',
        shadowBlur: 3
      }
    }
  ]
};
live

在这个例子中，我们通过设置柱状图对应 series 的itemStyle，设置了柱条的样式。完整的配置项及其用法请参见配置项手册 series.itemStyle。

柱条宽度和高度

柱条宽度可以通过 barWidth 设置。比如在下面的例子中，将 barWidth 设为 '20%'，表示每个柱条的宽度就是类目宽度的 20%。由于这个例子中，每个系列有 5 个数据，20% 的类目宽度也就是整个 x 轴宽度的 4%。

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

另外，还可以设置 barMaxWidth 限制柱条的最大宽度。对于一些特别小的数据，我们也可以为柱条指定最小高度 barMinHeight，当数据对应的柱条高度小于该值时，柱条高度将采用这个最小高度。

柱条间距

柱条间距分为两种，一种是不同系列在同一类目下的距离 barWidth，另一种是类目与类目的距离 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]
    }
  ]
};
live

在这个例子中，barGap 被设为 '20%'，这意味着每个类目（比如 A）下的两个柱子之间的距离，相对于柱条宽度的百分比。而 barCategoryGap 是 '40%'，意味着柱条每侧空余的距离，相对于柱条宽度的百分比。

通常而言，设置 barGap 及 barCategoryGap 后，就不需要设置 barWidth 了，这时候的宽度会自动调整。如果有需要的话，可以设置 barMaxWidth 作为柱条宽度的上限，当图表宽度很大的时候，柱条宽度也不会太宽。

在同一坐标系上，此属性会被多个柱状图系列共享。此属性应设置于此坐标系中最后一个柱状图系列上才会生效，并且是对此坐标系中所有柱状图系列生效。

为柱条添加背景色

有时，我们希望能够为柱条添加背景色。从 ECharts 4.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)'
      }
    }
  ]
};
live

本文贡献者 在 GitHub 上编辑本页

Ovilia Oviliapissang pissang