Vue3中Apache ECharts graph节点添加双标签的实现求助

我在Vue3项目中使用Apache ECharts的graph系列图表，目前需要为单个节点添加两个标签（或寻找替代方案），要求一个固定在节点顶部，另一个固定在底部，且不受缩放级别影响。

我制作了一个示例，其中节点顶部的红色方块完全符合需求：无论缩放级别如何变化，它都能固定在节点顶部。但我始终无法实现让黄色方块固定在节点底部的效果。

想请教：单个节点添加多个标签是否可行？有没有其他更合理的实现思路？

编辑补充：
我通过监听graphRoam事件调整标签间隔的高度，这个方法虽然不规范，但确实有效，代码如下：

function handleRoam(evt) {
  if (evt.zoom) {
    const customOptions = chart.value.getOption()
    const customOptionsData = customOptions.series[0].data

    // 我的缩放限制是最小1，最大10
    const multiplier = customOptions.series[0].zoom > 6 ? 1.2 : 2
    customOptionsData.forEach((cod) => {
      if (cod.label?.rich) {
        // 别问这个公式怎么来的，试出来的，对我管用
        cod.label.rich.space.height =
          customOptions.series[0].zoom * (15 + multiplier * customOptions.series[0].zoom)
      }
    })
    chart.value.setOption(customOptions)
  }
}

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