javascript - 带有堆叠系列的 Echarts markLine

Question

我正在尝试使用 markLine 选项用两条线系列标记图表的顶部。这些线系列是堆叠的，但是当我尝试使用该选项type: max进行 markLine 时，顶部图形的 markLine 显示在图形下方，因为该值低于显示的值（我附上图像以使其更清晰）。

如何将 markLine 放在图表顶部？我已经看到了这个y参数，但我必须把它放在我认为不可能的像素中。

这是我对两个 markLines 的配置：

// First markLine
const markLineAhorro = {
    data: [
      {
        type: 'max',
        label: {
          position: 'middle',
          formatter: params => {
            return `Sólo tienes que invertir: ${params.value.format()} €`
          }
        },
        lineStyle: {
          color: '#212529'
        }
      },
    ]
}

// Second markLine (the one on the top)
const markLineRentabilidad = {
    data: [
      {
        type: 'max',
        label: {
          position: 'middle',
          formatter: params => {
            return `Con tu inversión obtienes: ${params.value.format()} €`
          }
        },
        lineStyle: {
          color: '#212529'
        }
      }
    ]
}

标签： javascriptreactjsecharts

Answer 1

我找到的解决方案是使用coord参数手动将起点和终点的标记设置在我想要的位置。我使用xAxis参数来设置markLine的起点和终点以及我要设置的最大值yAxis。

然后我调整value参数以显示我想要的值。

const markLineRentabilidad = {
    data: [
      [
        {
          // Use the same y coord with starting and ending point
          coord: [0, patrimonioMaximo.toString()],
          value: rentabilidad[rentabilidad.length - 1],
        },
        {
          coord: [añosGrafica.length - 1, patrimonioMaximo.toString()],
        }
      ]
    ]
  }