返回数据分析
📊 基础图表

柱状图 Column Chart

用于比较不同类别之间的数值大小，是最常用的数据可视化图表

@ant-design/charts Column 分类对比
适用场景
各地区销售额对比
月度/季度数据对比
产品销量排行
部门业绩对比
年度趋势对比
预算vs实际对比
2024年Q4 各地区销售额对比
Basic Column
数据源: ERP系统, 销售指标表 数据周期: 2024年12月
筛选
万元
按地区
销售额
悬停查看标注
柱体规范
颜色#5B8FF9
宽度比例0.5
圆角[4,4,0,0]
数据标签
位置top
字号11px
坐标轴配置
X轴标签11px
Y轴标签11px
网格线[4,4]虚线
padding[40,12,30,20]
合计： 18,250 万元 平均： 3,042 万元 最高： 华东 3,650 万元
Chart Configuration 
const config = {
    data: basicData,
    xField: 'region',
    yField: 'value',
    padding: [40, 12, 30, 20], // 减少左侧和底部padding，让柱状图紧贴Y轴和X轴
    color: '#5B8FF9',
    columnWidthRatio: 0.5,
    columnStyle: { radius: [4, 4, 0, 0] },
    xAxis: {
        label: {
            autoRotate: false,
            rotate: 0,
            style: { fontSize: 11, fill: '#1D1D1F', textAlign: 'center' },
        },
        line: { style: { stroke: '#E8E8ED' } },
        tickLine: null,
    },
    yAxis: {
        label: { 
            style: { fontSize: 11, fill: '#1D1D1F' }, 
            formatter: (v) => v.toLocaleString() 
        },
        grid: { line: { style: { stroke: '#E8E8ED', lineDash: [4, 4] } } },
        line: null,
        tickLine: null,
    },
    label: { 
        position: 'top', 
        offset: 8, 
        style: { fill: '#1D1D1F', fontSize: 11 } 
    },
    legend: false,
};
尺寸规范
参数值说明
padding[40, 12, 30, 20]图表内边距 [上, 右, 下, 左]
容器高度240px标准图表高度
columnWidthRatio0.5柱体宽度占比
坐标轴配置
参数X轴值Y轴值
label.fontSize11px11px
label.fill#1D1D1F#1D1D1F
line.stroke#E8E8EDnull
grid.linenull#E8E8ED [4,4]
代码示例
const config = { data, xField: 'region', yField: 'value', padding: [40, 12, 30, 20], color: '#5B8FF9', columnWidthRatio: 0.5, columnStyle: { radius: [4, 4, 0, 0] }, label: { position: 'top', style: { fontSize: 11 } }, };
常见变体
带数据标签
With Label
Chart Configuration
const config = {
    data: basicData,
    xField: 'region',
    yField: 'value',
    padding: [40, 12, 30, 20], // 减少左侧和底部padding，让柱状图紧贴Y轴和X轴
    color: '#5AD8A6',
    columnWidthRatio: 0.5,
    columnStyle: { radius: [4, 4, 0, 0] },
    label: { 
        position: 'top', 
        offset: 6, 
        style: { fill: '#1D1D1F', fontSize: 11 } 
    },
    xAxis: { label: { style: { fontSize: 11, fill: '#1D1D1F' } } },
    yAxis: { 
        label: { style: { fontSize: 11, fill: '#1D1D1F' } }, 
        grid: { line: { style: { stroke: '#E8E8ED', lineDash: [4, 4] } } } 
    },
};
分组柱状图
Grouped
Chart Configuration
const config = {
    data: groupedData,
    xField: 'region',
    yField: 'value',
    seriesField: 'type',
    isGroup: true,
    padding: [40, 12, 30, 20], // 减少左侧和底部padding，让柱状图紧贴Y轴和X轴
    color: ['#5B8FF9', '#5AD8A6'],
    columnWidthRatio: 0.6,
    columnStyle: { radius: [3, 3, 0, 0] },
    xAxis: { label: { style: { fontSize: 11, fill: '#1D1D1F' } } },
    yAxis: { 
        label: { style: { fontSize: 11, fill: '#1D1D1F' } }, 
        grid: { line: { style: { stroke: '#E8E8ED', lineDash: [4, 4] } } } 
    },
    legend: {
        position: 'top-right',
        itemSpacing: 20,
        itemName: {
            style: { fontSize: 12, fill: '#1D1D1F' },
        },
        marker: {
            symbol: 'circle',
            style: { r: 5 },
        },
    },
};