简体   繁体   English

带有堆叠系列的 Echarts markLine

[英]Echarts markLine with stacked series

I'm trying to mark the top of a graph with two line series with the markLine option.我正在尝试使用 markLine 选项用两条线系列标记图表的顶部。 These line series are stacked but when I try to do a markLine with the option type: max the markLine of the top graph shows under the graph as the value is lower than what is showing (I attach an image to show it clearer).这些线系列是堆叠的,但是当我尝试使用选项type: max顶部图形的标记线显示在图形下方,因为该值低于显示的值(我附上图像以更清晰地显示)。

How can I put the markLine on top of the graph?如何将 markLine 放在图表顶部? I've seen the y parameter but I have to put it in pixels what I find impossible.我已经看到了y参数,但我必须把它放在我认为不可能的像素中。

This is my configuration of both markLines:这是我对两个 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'
        }
      }
    ]
}

在此处输入图像描述

The solution I've found is to use the coord parameter to manually set the mark for the starting and ending point exactly where I want.我找到的解决方案是使用coord参数来手动设置我想要的起点和终点的标记。 I use the xAxis parameter to set the starting and ending point of the markLine and the max value I want to set the yAxis .我使用xAxis参数来设置 markLine 的起点和终点以及我想要设置yAxis的最大值。

Then I tweak the value parameter to show the value I want.然后我调整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()],
        }
      ]
    ]
  }

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM