如何获取Y-Axis元素的X Y position实现自定义图表图例定位

以下方案按适配成本从低到高排序，优先选第一种，不需要手动维护坐标计算逻辑：

• 优先使用图表库原生的相对定位能力，跳过手动算坐标的环节
  几乎所有支持价格Y轴的图表库（金融类图表、通用可视化库），都支持将图例锚定到绘图区边界或容器边界，不需要手动获取Y轴尺寸：
  • 若要把图例放在绘图区内部，直接将图例锚点设为绘图区右上角/左上角，配置固定内边距即可。Y轴宽度随价格数值动态变化时，绘图区的边界会自动向内收缩适配，图例位置会自动跟随调整，不会出现压到Y轴或偏移的问题
  • 若要把图例放在Y轴外侧，直接将图例锚点设为图表容器的对应边角，配置和Y轴方向一致的固定偏移即可
• 需要精准控制坐标时，优先取图表实例暴露的实时布局接口，不要手动查DOM
  所有图表渲染前都会先计算所有组件（Y轴、X轴、绘图区、标题）的布局矩形信息，这些数据都存在图表实例上，渲染完成后可以直接调用接口获取，返回值是实时更新的，完全适配Y轴动态变宽/变窄的场景：
  通用的调用逻辑是取Y轴组件实例的getBoundingRect()方法，直接拿到Y轴当前的x坐标、y坐标、宽度、高度值，基于这个值算图例的放置坐标即可，不需要额外找DOM元素。
• 无公开布局API时的兜底方案
  如果用的轻量图表库没有暴露组件布局接口，可以绑定图表的渲染完成事件，每次图表重绘（包括Y轴因价格数值变化触发的宽度调整重绘）后，通过DOM选择器拿到Y轴对应的渲染元素，调用元素的getBoundingClientRect()方法拿到尺寸和位置，再减去图表容器本身的边界偏移量，换算为容器内的相对坐标，用来设置图例位置即可。

注意点：所有坐标计算逻辑不要只在页面初始化时执行一次，必须绑定到图表每次重绘完成的回调上触发，否则窗口缩放、数据更新导致Y轴尺寸变化时，图例会出现错位。
如果是纯Canvas渲染的图表（无独立Y轴DOM节点），不需要从画布反推位置，直接打印图表实例的内部属性，找layout/_layout/components字段下存储的Y轴布局元数据即可，Canvas渲染流程里必然会提前计算好各组件的布局位置存在实例上。

示例代码（通用逻辑，适配绝大多数图表库）：

// 绑定渲染完成事件，每次Y轴尺寸变化重绘后自动更新图例位置
chart.on('finished', () => {
  // 获取第一个Y轴的实时布局矩形
  const yAxisRect = chart.getModel().getComponent('yAxis', 0).node.getBoundingRect()
  // 计算图例位置：Y轴右侧留12px间距，距离容器顶部10px
  const legendPosition = {
    x: yAxisRect.x + yAxisRect.width + 12,
    y: 10
  }
  // 增量更新图例位置，不触发全量重绘
  chart.setOption({ legend: legendPosition }, { lazyUpdate: true })
})

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