基本柱状图

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

设置柱状图的方式,是将 seriestype 设为 '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);
  • 阴影(shadowBlurshadowColorshadowOffsetXshadowOffsetY)。
option = {
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {},
  series: [
    {
      data: [10, 22, 28, 43, 49],
      type: 'bar',
      stack: 'x'
    },
    {
      data: [5, 4, 3, 5, 10],
      type: 'bar',
      stack: 'x'
    }
  ]
};
live

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

柱条宽度和高度

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

option = {
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {},
  series: [
    {
      data: [10, 22, 28, 43, 49],
      type: 'bar',
      stack: 'x'
    },
    {
      data: [5, 4, 3, 5, 10],
      type: 'bar',
      stack: 'x'
    }
  ]
};
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%',意味着柱条每侧空余的距离,相对于柱条宽度的百分比。

通常而言,设置 barGapbarCategoryGap 后,就不需要设置 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