BarChart 柱状图

    支持垂直/水平、堆叠、多序列以及筛选，含响应式与主题配置。

    代码演示

    堆叠柱状图
    正负柱状图
    条形图（横向）
    条形堆叠图（横向堆叠）
    带数据标签
    柱子最大宽度控制
    指标统计
    中文金额（亿元/万元/元）
    暗黑主题

    API

    BarChartProps

    属性说明类型默认值版本
    title图表标题string--
    data扁平化数据数组BarChartDataItem[]--
    width图表宽度（px），移动端自适应为 100%number | string600-
    height图表高度（px），移动端最大约 80% 屏宽（上限 400）number | string400-
    className自定义类名string--
    dataTime数据时间string--
    theme图表与容器主题；dark 时容器内嵌 Ant Design 暗色算法，工具栏/筛选与画布一致；暗色下图例色块无白边，与浅色视觉区分'dark' | 'light''light'-
    color自定义主色；正负图取数组前两位为正/负色，一位则单色string | string[]--
    showLegend是否显示图例booleantrue-
    legendPosition图例位置'top' | 'left' | 'bottom' | 'right''bottom'-
    legendAlign图例水平对齐方式'start' | 'center' | 'end''start'-
    showGrid是否显示网格线booleantrue-
    xPositionX 轴位置'top' | 'bottom''bottom'-
    yPositionY 轴位置'left' | 'right''left'-
    hiddenX是否隐藏 X 轴booleanfalse-
    hiddenY是否隐藏 Y 轴booleanfalse-
    stacked是否堆叠显示多个数据集booleanfalse-
    indexAxis轴向：'x' 垂直柱状图，'y' 水平条形图'x' | 'y''x'-
    maxBarThickness柱子最大宽度number--
    toolbarExtra头部工具条额外按钮React.ReactNode--
    renderFilterInToolbar是否将过滤器渲染到工具栏（当为 true 时，ChartFilter 会显示在工具栏右侧）booleanfalse-
    chartOptions与默认 Chart.js 选项深度合并，用于细调坐标轴、动画等Partial<ChartOptions<'bar'>>--
    statisticChartStatistic组件配置：object表示单个配置，array表示多个配置ChartStatisticConfig | ChartStatisticConfig[]--
    showDataLabels是否显示数据标签（在柱子顶部或右侧显示数值）booleanfalse-
    dataLabelFormatter数据标签格式化函数，可自定义显示格式（如添加单位、格式化数字）(params: DataLabelFormatterParams) => string--

    ChartContainerProps（继承）

    属性说明类型默认值版本
    classNames分层类名：root、toolbar、statisticContainer、filter、wrapper、chartChartClassNames--
    loading加载态booleanfalse-
    style根容器内联样式React.CSSProperties--
    styles与各层 DOM 对应的内联样式ChartStyles--
    variant容器描边变体'outline' | 'borderless'--

    BarChartDataItem

    字段说明类型默认值版本
    category分类（用于外层筛选）（必填）string--
    type数据序列名称（映射为 dataset）（必填）string--
    x横轴值（将作为 labels）（必填）number--
    y纵轴值（必填）number--
    xtitleX 轴标题（从数据中提取）string--
    ytitleY 轴标题（从数据中提取）string--
    filterLabel二级筛选标签（可选）string--

    DataLabelFormatterParams

    dataLabelFormatter 函数接收的参数对象：

    字段说明类型默认值版本
    value数据值（堆叠图中为累计总和）number--
    label对应坐标轴的标签（如 X 轴标签："Q1"、"1"等）string | number--
    datasetLabel数据集名称（如 "手机"、"电脑"等）string--
    dataIndex数据点在数组中的索引number--
    datasetIndex数据集在数组中的索引number--

    ChartStatisticConfig

    ChartStatisticConfig 继承自 ChartStatistic 组件的所有属性，详细 API 请参考 ChartStatistic 文档。

    字段说明类型默认值版本
    title指标标题string--
    tooltip鼠标悬停时显示的提示信息string--
    value显示的数值number | string | null | undefined--
    precision数值精度（小数点后位数）number--
    groupSeparator千分位分隔符string','-
    prefix数值前缀（如货币符号）string''-
    suffix数值后缀（如单位）string''-
    formatter自定义格式化函数，优先级高于其他格式化选项(value: number | string | null | undefined) => React.ReactNode--
    className自定义类名string''-
    size组件尺寸'small' | 'default' | 'large''default'-
    block是否使用块级布局（弹性占用空间，多个时平分父容器宽度）booleanfalse-
    extra右上角自定义内容（图标、按钮等）React.ReactNode--

    说明

    • chartOptions 类型中的 ChartOptions 来自 chart.js，用于在默认配置之上做增量合并。
    • stacked 为 true 时，将按 type 将数据叠加显示。
    • indexAxis='y' 时为横向条形图。
    • hiddenX 和 hiddenY 可以控制坐标轴的显示/隐藏，适用于只展示图表本身而不需要坐标轴的场景。
    • maxBarThickness 用于限制柱子的最大宽度，特别适用于数据较少时避免柱子过宽的问题。建议值：30-80
    • showDataLabels 开启时，在柱子顶部（垂直图）或右侧（横向图）显示数值标签；堆叠图中只显示累计总和。
    • dataLabelFormatter 提供完整的上下文信息（数值、轴标签、数据集名称等），可灵活自定义标签显示格式。
    • statistic 属性支持数组形式，可同时渲染多个静态数据组件，如 [{title: '总销量', value: 1200}, {title: '增长率', value: '15%'}]。