嘿，这个需求在Ant Design Charts里很好实现！核心就是用它专门的DualAxes（双轴）组件，把折线和柱状图整合到同一个容器里，自动共用X轴，同时给左右Y轴设置不同的数据范围来适配你的两组数据。下面是具体的实现思路和代码示例：

核心实现步骤 #

• 配置双Y轴：通过yAxis数组分别定义左右两个Y轴的位置、数据范围、名称，让左侧对应折线的700-800区间，右侧对应柱状的8-10区间。
• 绑定系列数据：分别创建折线和柱状两个系列，各自绑定对应的Y轴数据字段，确保数据和轴匹配。
• 共用X轴：只需要指定一个xField（时间维度），两个系列会自动对齐这个X轴。

完整代码示例 #

import React from 'react';
import { DualAxes } from '@ant-design/charts';

const MixedChart = () => {
  // 模拟你的时间维度数据，替换成实际业务数据即可
  const chartData = [
    { time: '1月1日', lineValue: 720, barValue: 8.5 },
    { time: '1月2日', lineValue: 755, barValue: 9.1 },
    { time: '1月3日', lineValue: 782, barValue: 8.7 },
    { time: '1月4日', lineValue: 768, barValue: 9.6 },
    { time: '1月5日', lineValue: 790, barValue: 9.0 },
  ];

  const config = {
    // 共用的X轴字段（时间）
    xField: 'time',
    // 两个Y轴对应的数据字段
    yField: ['lineValue', 'barValue'],
    // 配置左右两个Y轴
    yAxis: [
      {
        name: '折线数据',
        position: 'left',
        min: 700, // 锁定折线数据的最小值
        max: 800, // 锁定折线数据的最大值
        label: {
          formatter: (value) => `${value}`, // 自定义轴标签显示
        },
      },
      {
        name: '柱状数据',
        position: 'right',
        min: 8, // 锁定柱状数据的最小值
        max: 10, // 锁定柱状数据的最大值
        label: {
          formatter: (value) => `${value}`,
        },
      },
    ],
    // 定义两个图表系列：折线 + 柱状
    series: [
      {
        type: 'line',
        yField: 'lineValue',
        smooth: true, // 可选：让折线更平滑
        color: '#1890ff', // 折线颜色
        lineStyle: {
          lineWidth: 2, // 折线粗细
        },
      },
      {
        type: 'column',
        yField: 'barValue',
        color: '#2fc25b', // 柱状颜色
        columnStyle: {
          radius: [4, 4, 0, 0], // 可选：给柱状图加圆角
        },
      },
    ],
    // 自定义tooltip，让鼠标悬浮时同时显示两组数据
    tooltip: {
      formatter: (datum) => ({
        name: datum.time,
        value: [
          { name: '折线数据', value: datum.lineValue },
          { name: '柱状数据', value: datum.barValue },
        ],
      }),
    },
    // 图例配置，放在顶部方便查看
    legend: {
      position: 'top',
    },
  };

  return <DualAxes {...config} />;
};

export default MixedChart;

额外注意事项 #

• DualAxes是Ant Design Charts专门为双轴场景封装的组件，比手动拼接两个独立图表更省心，自动处理X轴对齐、响应式适配等问题。
• 如果你的数据范围不是固定的，也可以去掉min和max配置，让组件自动计算合适的轴范围，不过固定范围能让图表展示更稳定。
• 可以根据需求自定义系列样式，比如折线的标记点、柱状图的宽度，只需要在对应的series配置里添加marker或调整columnStyle即可。

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