[Bug]: 双轴图，左右轴均设为公共轴时，轴的数量和刻度展示不正确

[tomatodev]

Describe the bug / 问题描述

按道理应该只会有左右两个轴（如下图所示），但是现状却是有 3 个轴，拖动底部缩略轴，y 轴刻度会跟着发生变化

Reproduction link / 复现链接

https://stackblitz.com/edit/react-be3aue24?file=package.json,index.js,index.html

Steps to Reproduce the Bug or Issue / 重现步骤

No response

Version / 版本

Please select / 请选择

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

• Chrome
• Edge
• Firefox
• Safari (Limited support / 有限支持)
• IE (Nonsupport / 不支持)
• Others / 其他

[github-actions]

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

您好，感谢您的反馈和详细描述！针对您提出的“双轴图，左右轴均设为公共轴时，轴的数量和刻度展示不正确”问题，我们为您梳理了可能原因及解决建议：

---

一、问题分析

1. 轴数量异常

通常双轴图（Dual Axes Chart）只应显示左右各 1 个 Y 轴。如果出现 3 个轴，可能是：

• 图表配置存在多个 mark/series 且未正确共享轴（未同步或未合并轴）。
• 某些 mark/series 配置了独立的 scale，导致额外生成轴线。
• 轴配置在全局和 mark 层级重复，导致额外渲染。

2. 拖动缩略轴后刻度变化异常

• 可能因为轴的 scale 设置未同步，或启用了独立缩放，导致刻度和范围不同步。
• 当数据窗口变动时，若未正确同步 scale，Y 轴刻度会随选中数据区间动态变化。

---

二、解决建议

1. 确认轴同步与独立配置

• 如需左右两个公共轴（即 y 轴各一），应确保相关 mark/series 共享同一个 scale，除非确有需求才设置 scale.independent: true。
• 避免 mark 级别重复配置 axis。若 axis 需合并，应只在全局或主 mark 配置。

示例（伪代码，需结合实际数据结构调整）：

chart.options({
  type: 'view',
  children: [
    {
      type: 'interval',
      encode: { x: 'time', y: 'value1' }, // 左轴
      axis: { y: { position: 'left', title: '左轴' } },
    },
    {
      type: 'line',
      encode: { x: 'time', y: 'value2' }, // 右轴
      scale: { y: { independent: true } }, // 仅当右轴需独立刻度时加此项
      axis: { y: { position: 'right', title: '右轴' } },
    }
  ]
});

注意：如需公共轴，不应设置 independent: true。

2. 检查缩略轴（Scrollbar）与 Axis 配置

• 拖动缩略轴时，确保数据过滤后，左右轴的 scale 范围仍然同步。
• 可通过设置 scale 的 nice: true 或手动设置 min/max 保证刻度一致。

3. 避免多余轴的出现

• 检查是否有未使用的数据字段或冗余的 mark。
• 检查 axis 配置，保证左右轴分别只出现一次，且未出现多余的 axis 组件。

---

三、参考官方文档

• Axis 组件配置
• Scale 同步与独立
• Scrollbar 缩略轴

---

四、建议操作步骤

1. 核查所有 mark/series 的 axis、scale 配置，确认是否因 scale 独立或 axis 重复导致多余轴。
2. 拖动缩略轴时观察 axis 刻度同步情况，如异常，尝试去除 independent: true 或统一 scale 设置。
3. 如仍有问题，可简化代码&数据，只保留核心配置，逐步排查是哪一处配置导致异常。
4. 如需进一步协助，欢迎补充最小可复现 demo 或代码片段，我们会更精准定位问题。

---

示例修正（仅参考，需结合实际业务数据）：

// 假设你有两个数据源分别对应左右轴
chart.options({
  type: 'view',
  children: [
    {
      type: 'interval',
      encode: { x: 'time', y: 'value1' },
      axis: { y: { position: 'left', title: '左轴' } }, // 只配置一次左轴
    },
    {
      type: 'line',
      encode: { x: 'time', y: 'value2' },
      axis: { y: { position: 'right', title: '右轴' } }, // 只配置一次右轴
      // 若需右轴独立刻度，加 scale: { y: { independent: true } }
    }
  ]
});

---

如有更多信息，欢迎随时补充！希望这些建议对您定位和解决问题有所帮助。

---

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

[interstellarmt]

排查了一下应该不是 G2 的问题，可以在 ADC 提个 issue

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

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

const options = {
  encode: { x: 'xValue' },
  children: [
    {
      type: 'interval',
      data: [
        {
          xValue: '2024-11',
          yField: 'y#sys_production_hours@##index',
          yValue: 2151.77,
        },
        {
          xValue: '2024-12',
          yField: 'y#sys_production_hours@##index',
          yValue: 76973.81,
        },
        {
          xValue: '2025-01',
          yField: 'y#sys_production_hours@##index',
          yValue: 214046.69,
        },
        {
          xValue: '2025-02',
          yField: 'y#sys_production_hours@##index',
          yValue: 4602.27,
        },
        {
          xValue: '2025-03',
          yField: 'y#sys_production_hours@##index',
          yValue: 3929.33,
        },
        {
          xValue: '2025-04',
          yField: 'y#sys_production_hours@##index',
          yValue: -1495.62,
        },
        {
          xValue: '2025-05',
          yField: 'y#sys_production_hours@##index',
          yValue: 1322.5,
        },
        {
          xValue: '2025-06',
          yField: 'y#sys_production_hours@##index',
          yValue: 4675.45,
        },
        {
          xValue: '2025-07',
          yField: 'y#sys_production_hours@##index',
          yValue: 19096.28,
        },
        {
          xValue: '2025-08',
          yField: 'y#sys_production_hours@##index',
          yValue: 455,
        },
      ],
      encode: {
        y: 'yValue',
        series: 'yField',
        color: 'yField'
      },
      scale: {
        y: {
          key: 'line1',
          independent: false,
        },
      },
      axis: {
        y: {
          titleFontSize: 12,
          labelFontSize: 12,
          labelFillOpacity: 1,
          labelStrokeOpacity: 1,
          grid: true,
          gridLineDash: [4, 4],
          gridLineWidth: 1,
          gridStroke: '#e5e5e5',
          gridStrokeOpacity: 1,
          line: true,
          labelAutoRotate: false,
          labelAutoHide: true,
          labelAutoWrap: false,
        },
      },
    },
    {
      data: [
        {
          xValue: '2024-11',
          yField: 'y#sys_non_production_hours@##index',
          yValue: 0,
        },
        {
          xValue: '2024-12',
          yField: 'y#sys_non_production_hours@##index',
          yValue: 0,
        },
        {
          xValue: '2025-01',
          yField: 'y#sys_non_production_hours@##index',
          yValue: 0,
        },
        {
          xValue: '2025-02',
          yField: 'y#sys_non_production_hours@##index',
          yValue: 0,
        },
        {
          xValue: '2025-03',
          yField: 'y#sys_non_production_hours@##index',
          yValue: 0,
        },
        {
          xValue: '2025-04',
          yField: 'y#sys_non_production_hours@##index',
          yValue: 8,
        },
        {
          xValue: '2025-05',
          yField: 'y#sys_non_production_hours@##index',
          yValue: 0,
        },
        {
          xValue: '2025-06',
          yField: 'y#sys_non_production_hours@##index',
          yValue: 27.24,
        },
        {
          xValue: '2025-07',
          yField: 'y#sys_non_production_hours@##index',
          yValue: 0,
        },
        {
          xValue: '2025-08',
          yField: 'y#sys_non_production_hours@##index',
          yValue: 66,
        },
      ],
      scale: {
        y: {
          key: 'line1',
          independent: false,
        },
      },
      axis: {
        y: {
          titleFontSize: 12,
          labelFontSize: 12,
          labelFillOpacity: 1,
          labelStrokeOpacity: 1,
          grid: true,
          gridLineDash: [4, 4],
          gridLineWidth: 1,
          gridStroke: '#e5e5e5',
          gridStrokeOpacity: 1,
          line: true,
          labelAutoRotate: false,
          labelAutoHide: true,
          labelAutoWrap: false,
        },
      },
      type: 'line',
      encode: {
        y: 'yValue',
        color: 'yField',
        shape: 'line'
      },
      // point: {
      //   data: [
      //     {
      //       xValue: '2024-11',
      //       yField: 'y#sys_non_production_hours@##index',
      //       yValue: 0,
      //     },
      //     {
      //       xValue: '2024-12',
      //       yField: 'y#sys_non_production_hours@##index',
      //       yValue: 0,
      //     },
      //     {
      //       xValue: '2025-01',
      //       yField: 'y#sys_non_production_hours@##index',
      //       yValue: 0,
      //     },
      //     {
      //       xValue: '2025-02',
      //       yField: 'y#sys_non_production_hours@##index',
      //       yValue: 0,
      //     },
      //     {
      //       xValue: '2025-03',
      //       yField: 'y#sys_non_production_hours@##index',
      //       yValue: 0,
      //     },
      //     {
      //       xValue: '2025-04',
      //       yField: 'y#sys_non_production_hours@##index',
      //       yValue: 8,
      //     },
      //     {
      //       xValue: '2025-05',
      //       yField: 'y#sys_non_production_hours@##index',
      //       yValue: 0,
      //     },
      //     {
      //       xValue: '2025-06',
      //       yField: 'y#sys_non_production_hours@##index',
      //       yValue: 27.24,
      //     },
      //     {
      //       xValue: '2025-07',
      //       yField: 'y#sys_non_production_hours@##index',
      //       yValue: 0,
      //     },
      //     {
      //       xValue: '2025-08',
      //       yField: 'y#sys_non_production_hours@##index',
      //       yValue: 66,
      //     },
      //   ],
      //   scale: {
      //     y: {
      //       key: 'line1',
      //       independent: false,
      //     },
      //   },
      // },
    },
    {
      data: [
        {
          xValue: '2024-11',
          yField: 'y2#sys_productivity_rate@##index',
          yValue: 1,
        },
        {
          xValue: '2024-12',
          yField: 'y2#sys_productivity_rate@##index',
          yValue: 1,
        },
        {
          xValue: '2025-01',
          yField: 'y2#sys_productivity_rate@##index',
          yValue: 1,
        },
        {
          xValue: '2025-02',
          yField: 'y2#sys_productivity_rate@##index',
          yValue: 1,
        },
        {
          xValue: '2025-03',
          yField: 'y2#sys_productivity_rate@##index',
          yValue: 1,
        },
        {
          xValue: '2025-04',
          yField: 'y2#sys_productivity_rate@##index',
          yValue: 1.005377,
        },
        {
          xValue: '2025-05',
          yField: 'y2#sys_productivity_rate@##index',
          yValue: 1,
        },
        {
          xValue: '2025-06',
          yField: 'y2#sys_productivity_rate@##index',
          yValue: 0.994207,
        },
        {
          xValue: '2025-07',
          yField: 'y2#sys_productivity_rate@##index',
          yValue: 1,
        },
        {
          xValue: '2025-08',
          yField: 'y2#sys_productivity_rate@##index',
          yValue: 0.87332,
        },
      ],
      scale: {
        y: {
          key: 'line2',
          independent: false,
        },
      },
      axis: {
        y: {
          titleFontSize: 12,
          labelFontSize: 12,
          labelFillOpacity: 1,
          labelStrokeOpacity: 1,
          grid: true,
          gridLineDash: [4, 4],
          gridLineWidth: 1,
          gridStroke: '#e5e5e5',
          gridStrokeOpacity: 1,
          line: true,
          labelAutoRotate: false,
          labelAutoHide: true,
          labelAutoWrap: false,
          position: 'right',
        },
      },
      encode: {
        y: 'yValue',
        color: 'yField',
        shape: 'line'
      },
      type: 'line',
      // point: {
      //   data: [
      //     {
      //       xValue: '2024-11',
      //       yField: 'y2#sys_productivity_rate@##index',
      //       yValue: 1,
      //     },
      //     {
      //       xValue: '2024-12',
      //       yField: 'y2#sys_productivity_rate@##index',
      //       yValue: 1,
      //     },
      //     {
      //       xValue: '2025-01',
      //       yField: 'y2#sys_productivity_rate@##index',
      //       yValue: 1,
      //     },
      //     {
      //       xValue: '2025-02',
      //       yField: 'y2#sys_productivity_rate@##index',
      //       yValue: 1,
      //     },
      //     {
      //       xValue: '2025-03',
      //       yField: 'y2#sys_productivity_rate@##index',
      //       yValue: 1,
      //     },
      //     {
      //       xValue: '2025-04',
      //       yField: 'y2#sys_productivity_rate@##index',
      //       yValue: 1.005377,
      //     },
      //     {
      //       xValue: '2025-05',
      //       yField: 'y2#sys_productivity_rate@##index',
      //       yValue: 1,
      //     },
      //     {
      //       xValue: '2025-06',
      //       yField: 'y2#sys_productivity_rate@##index',
      //       yValue: 0.994207,
      //     },
      //     {
      //       xValue: '2025-07',
      //       yField: 'y2#sys_productivity_rate@##index',
      //       yValue: 1,
      //     },
      //     {
      //       xValue: '2025-08',
      //       yField: 'y2#sys_productivity_rate@##index',
      //       yValue: 0.87332,
      //     },
      //   ],
      //   scale: {
      //     y: {
      //       key: 'line2',
      //       independent: false,
      //     },
      //   },
      // },
    },
  ],
  scale: {
    x: {
      type: 'band',
    },
    color: {
      range: [
        '#0781c3',
        '#ff7500',
        '#83bff4',
        '#ffb86c',
        '#3fb27e',
        '#9bcc7e',
        '#f35352',
        '#ff9193',
        '#9d61c2',
        '#caaed8',
        '#8fa500',
        '#bfd000',
      ],
    },
  },
  slider: {
    x: {
      showLabel: false,
      values: [0, 0.9990043],
      handleIconCursor: 'pointer',
    },
  },
  axis: {
    x: {
      titleFontSize: 12,
      labelFontSize: 12,
      labelFillOpacity: 1,
      labelStrokeOpacity: 1,
      grid: false,
      gridLineDash: [4, 4],
      gridLineWidth: 1,
      gridStroke: '#e5e5e5',
      gridStrokeOpacity: 1,
      line: true,
      labelAutoRotate: false,
      labelAutoHide: true,
      labelAutoWrap: false,
    },
  },
  legend: false,
  interaction: {
    tooltip: {
      shared: true,
      mount: 'body',
    },
  },
};
chart.options(options)

chart.render();