Recharts能否实现同图共存垂直/水平柱形并叠加背景散点图

完全可以实现，不需要依赖额外插件，基于Recharts原生的组合图表能力即可完成，核心实现路径如下：

基础容器选择 #

• 统一使用ComposedChart作为最外层图表容器，不要单独使用BarChart/ScatterChart这类单图容器，ComposedChart原生支持多类型图形、多组坐标轴、自定义层级混合渲染，是这类复杂混合图表的唯一基础载体。

正交双柱形配置 #

两类柱形不需要合并数据集，分别给对应Bar组件传独立的data属性即可，核心是通过layout属性和坐标轴绑定区分方向：

• 左侧起始的水平柱形：给对应Bar组件设置layout="vertical"，绑定左侧的类目型Y轴（type="category"），数值映射到数值型X轴（type="number"）。
• 底部起始的垂直柱形：给对应Bar组件保持默认的layout="horizontal"即可，绑定底部的类目型X轴（type="category"），数值映射到数值型Y轴（type="number"）。
• 如果两类柱形的类目维度完全不重合，可以给两类柱分别配置独立的坐标轴，不需要做类目对齐，多余的坐标轴设置hide={true}隐藏刻度即可，只保留左侧、底部的参考轴做视觉展示，避免刻度互相干扰。

背景层散点实现 #

• 散点使用Scatter组件承载，JSX中把Scatter组件写在所有Bar组件之前即可：Recharts默认按JSX编写顺序渲染，先写的组件层级更低，会被后写的组件覆盖，自然就会落在背景层，不需要额外修改样式z-index。
• 散点直接复用柱形绑定的数值轴即可，不需要额外新增坐标轴，如果散点的数值范围和柱形差异较大，可以给散点绑定独立的隐藏数值轴，单独配置domain范围避免图形被拉伸变形。

常见踩坑提示 #

• 最常见的柱形不显示问题，基本都是坐标轴类型和layout属性不匹配导致的：垂直布局（水平柱）要求Y轴为类目型、X轴为数值型；水平布局（垂直柱）要求X轴为类目型、Y轴为数值型，配置时优先检查这组匹配规则。
• 不需要强行把三类数据（水平柱、垂直柱、散点）合并成同一个数组，每个图形组件可以独立接收自己的dataprops，Recharts会根据绑定的axisId自动完成位置映射。

最小实现代码参考 #

import { ComposedChart, XAxis, YAxis, Bar, Scatter, CartesianGrid, Tooltip } from 'recharts';

// 水平柱数据集
const horizontalBarData = [
  { category: '分类1', value: 120 },
  { category: '分类2', value: 90 },
  { category: '分类3', value: 150 }
];
// 垂直柱数据集
const verticalBarData = [
  { period: 'Q1', value: 210 },
  { period: 'Q2', value: 330 },
  { period: 'Q3', value: 180 }
];
// 背景散点数据集
const bgScatterData = [
  { x: 60, y: 70, size: 20 },
  { x: 120, y: 180, size: 35 },
  { x: 180, y: 260, size: 28 }
];

export default function MixedChart() {
  return (
    <ComposedChart width={700} height={450} margin={{ top: 20, right: 30, bottom: 20, left: 30 }}>
      <CartesianGrid strokeDasharray="3 3" />
      {/* 背景散点：写在最前，层级最低 */}
      <Scatter 
        data={bgScatterData} 
        fill="#e5e7eb" 
        xAxisId="value-x" 
        yAxisId="value-y"
      />
      {/* 公共数值轴，隐藏刻度仅做位置映射 */}
      <XAxis id="value-x" type="number" domain={[0, 'auto']} hide />
      <YAxis id="value-y" type="number" domain={[0, 'auto']} hide />
      {/* 视觉展示用的底部类目轴（垂直柱用）、左侧类目轴（水平柱用） */}
      <XAxis id="v-bar-x" type="category" dataKey="period" position="bottom" />
      <YAxis id="h-bar-y" type="category" dataKey="category" position="left" />
      {/* 水平柱 */}
      <Bar
        data={horizontalBarData}
        dataKey="value"
        layout="vertical"
        fill="#2563eb"
        xAxisId="value-x"
        yAxisId="h-bar-y"
        barSize={24}
      />
      {/* 垂直柱 */}
      <Bar
        data={verticalBarData}
        dataKey="value"
        fill="#10b981"
        xAxisId="v-bar-x"
        yAxisId="value-y"
        barSize={24}
      />
      <Tooltip />
    </ComposedChart>
  );
}

内容的提问来源于stack exchange，提问作者dsldsl