[Feat]: axis dual

[lxfu1]

Describe the feature / 功能描述

支持双层坐标轴的配置。

Are you willing to contribute? / 是否愿意参与贡献？

❌ No / 否

[github-actions]

@lxfu1 您好！以下是关于您问题的自动回复：

感谢您的建议！

🎯 功能需求分析

您希望 G2 支持“双层坐标轴”的配置（即 dual axis，常用于展示两组不同度量/单位的数据）。目前 G2 v5 的坐标轴系统支持灵活的 x/y 轴自定义，但原生并不直接提供“双Y轴”或“双X轴”API（如右侧 Y 轴），但可以通过多 View（分层）或组合 mark 的方式实现类似效果。

💡 推荐实现方式

方案一：多 View 分层实现双轴

可以通过创建多个 view，每个 view 绑定不同的数据和坐标轴。例如：

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'view',
  children: [
    // 主Y轴数据
    {
      type: 'interval',
      data: data1,
      encode: { x: 'date', y: 'value1' },
      axis: {
        y: { position: 'left', title: '主指标', grid: true },
      },
    },
    // 次Y轴数据（右侧）
    {
      type: 'line',
      data: data2,
      encode: { x: 'date', y: 'value2' },
      axis: {
        y: { position: 'right', title: '辅助指标', grid: false },
      },
    },
  ],
});
chart.render();

• axis.y.position: 'left' 或 'right' 可分别设置主/副 Y 轴。
• 这样可以实现两组 Y 轴分别展示、定制样式和标题。

方案二：自定义坐标轴样式和格式

G2 支持丰富的坐标轴定制，您可以为每个 mark 或 view 单独配置 axis 属性，定制 label、tick、grid 等：

axis: {
  y: {
    title: 'Y轴标题',
    labelFormatter: (d) => `${d}单位`,
    grid: true,
    tickCount: 5,
  },
  y1: {
    position: 'right',
    title: '右侧Y轴',
    labelFill: '#f50',
    grid: false,
  },
}

📖 参考文档

• G2 坐标轴配置文档（官方）
• 多 View 组合用法

✅ 总结

• 当前 G2 已支持通过多 view 或多 mark 的方式配置双轴。
• 如有更复杂的需求（如轴同步、联动缩放等），建议进一步描述具体场景，便于社区提供更精准方案。
• 如果需要详细代码范例或遇到具体实现问题，欢迎随时补充说明！

感谢您的反馈和建议！

---

此回复由 AI 助手自动生成。如有任何问题，我们的团队会尽快跟进。