柱状图 Bar

效果

在线预览

在线模拟尺寸:

基本柱图

{
  data: [
    { city: '北京', gdp: 41610 },
    { city: '上海', gdp: 44652 },
    { city: '深圳', gdp: 32387 }
  ],
  series: [{ type: 'bar', xField: 'city', yField: 'gdp' }]
}

分组柱图

多个 bar 系列自动并排分组显示。

{
  data: [
    { quarter: 'Q1', sales: 120, cost: 80 },
    { quarter: 'Q2', sales: 200, cost: 110 }
  ],
  series: [
    { type: 'bar', xField: 'quarter', yField: 'sales' },
    { type: 'bar', xField: 'quarter', yField: 'cost' }
  ]
}

堆叠柱图

series: [
  { type: 'bar', xField: 'quarter', yField: 'sales', barMode: 'stack' },
  { type: 'bar', xField: 'quarter', yField: 'cost', barMode: 'stack' }
]

百分比堆叠

series: [
  { type: 'bar', xField: 'quarter', yField: 'sales', barMode: 'percentStack' },
  { type: 'bar', xField: 'quarter', yField: 'cost', barMode: 'percentStack' }
]

条形图（横向）

通过 coord.transposed 转置坐标系。

{
  coord: { transposed: true },
  series: [{ type: 'bar', xField: 'city', yField: 'gdp' }]
}

渐变色柱图

series: [{
  type: 'bar',
  xField: 'city',
  yField: 'gdp',
  gradient: ['0deg', '#3b82f6 0', '#8b5cf6 100']
}]

系列配置项

属性	类型	默认值	说明
type	string	-	固定 'bar'
xField	string	-	类目字段
yField	string	-	数值字段
color	string	自动	柱体颜色
barWidthRatio	number	0.62	柱宽占比 0.2~1
barRadius	number	4	圆角半径
barMode	string	'group'	'group' / 'stack' / 'percentStack'
gradient	string[]	-	渐变色数组
label	ChartLabelOptions	-	数据标签