带有堆叠系列的 Echarts markLine答案

【问题标题】：Echarts markLine with stacked series带有堆叠系列的 Echarts markLine
【发布时间】：2019-10-21 15:41:35
【问题描述】：

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

如何将 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'
        }
      }
    ]
}

【问题讨论】：

您找到解决方案了吗？如果是，请分享
@mac 我已经发布了我找到的解决方案，如果不清楚，请告诉我:)

标签： javascript reactjs echarts

【解决方案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()],
        }
      ]
    ]
  }

【讨论】：