Different colors of the series line on the Y-axis in different ranges of the X-axis

[kbeatz17]

What problem does this feature solve?

My request is to have different line colors in different X axis ranges.

To explain better: I have two markareas, the line when it goes outside the markarea must be red, otherwise blue.

from xAxis [0, 11] the markArea is [120, 150] from xAxis [11, 30] the marArea is [100, 200]

So in the interval xAxis [0, 11] when the line has a value greater than 150 or less than 120 it must be red while between 120 and 150 it must be blue. In the xAxis range [11, 30] when the line has a value greater than 200 or less than 100 it must be red while between 100 and 200 it must be blue.

What does the proposed API look like?

Unfortunately there is no possibility to put in the visualMap the range of xAxis on which it must be active, but the visualMap works on the entire xAxis.

In the options there is only one visualMap (i.e. the first between 120 and 150) which is applied on the entire xAxis.

Do you have any ideas or solutions?

P.S. I tried using dimension 2 of the visualMap with an extraValue but it doesn't work. I also tried putting the color point by point but the line doesn't change the color between the two points.

option = {
  xAxis: {
    type: 'category',
    data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]
  },
  yAxis: {
    type: 'value'
  },
   visualMap: [
    {
      dimension: 1,
      pieces: [
        {
          gt: 120,
          lte: 150,
          color: '#008cff'
        }
      ],
      outOfRange: {
        color: '#ff0000'
      }
    }
  ],
  series: [
    {
      data: [50, 150, 230, 224, 218, 135, 147, 260, 50, 150, 230, 224, 218, 135, 147, 260, 50, 150, 230, 224, 218, 135, 147, 260, 50, 150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      markArea: {
        silent:true,
        data: [
          [
            {
              name: '[120,150]',
              xAxis: 0,
              yAxis: 120,
              itemStyle: {
                color: '#ffff0050'
              },
              label: {
                position: 'insideTopLeft',
                color: 'black',
                fontWidth: 'bold'
              }
            },
            {
              xAxis: 10,
              yAxis: 150
            }
          ],
          [
            {
              name: '[100,200]',
              xAxis: 10,
              yAxis: 100,
              itemStyle: {
                color: '#ffff0050'
              },
              label: {
                position: 'insideTopLeft',
                color: 'black',
                fontWidth: 'bold'
              }
            },
            {
              yAxis: 200
            }
          ]
        ]
      }
    }
  ]
};

In the image in the rectangle the line should be blue because it is inside the markArea.

These are the issues I have read and tried: https://github.com/apache/echarts/issues/19270, https://github.com/apache/echarts/issues/18629, https://github.com/apache/echarts/issues/11667, https://github.com/apache/echarts/issues/19309 They are also somehow connected to my development.

[Ovilia]

There is no easy way to do this. A hacky way would be, make the points of special data into another series and set a different color.