Add the ability to add different colors in different segments to a single specific series

What problem does this feature solve?

There is no way to give multiple colors to a single series, The expected behavior is something similar to VisualMap, but for a single series instead of the whole chart.

What does the proposed API look like?

Add an object inside the series options to add a visualMap option on it something like

{
  visualMap: {
    ...
  }
}

Or some other way to provide the same functionality such as adding colors per series data points.

We can achieve the same functionality by splitting a single series into multiple series per colored segments, and adding a lineStyle per segment, but unfortunately this leads to a really laggy chart as it significantly increases the number of series.

Output example

We would like to generate a performant version of a graph like this, where a single line can have multiple colors per segments.

This is generated by splitting a single line series into multiple line series, each with a different lineStyle

[pissang]

Thanks for the explain. Perhaps you can try using the custom series to render these line segments.

option = {
  xAxis: {
  },
  yAxis: {},
  series: [
    {
      type: 'custom',
      renderItem: function (params, api) {
        var start = api.coord([api.value(0), api.value(1)]);
        var end = api.coord([api.value(2), api.value(3)]);

        return {
          type: 'line',
          shape: {
            x1: start[0],
            y1: start[1],
            x2: end[0],
            y2: end[1]
          },
          style: {
            lineWidth: 2,
            stroke: api.visual('color')
          }
        };
      },
      dimensions: ['x1', 'y1', 'x2', 'y2'],
      encode: {
        x: [0, 1],
        y: [2, 3]
      },
      data: [
        { value: [1, 1, 2, 3], itemStyle: { color: 'red'} },
        { value: [2, 3, 4, 5], itemStyle: { color: 'green'} },
        { value: [4, 5, 5, 10] }
      ]
    }
  ]
};

But you need to process your data a bit to give the start and end point for each segment.

[pissang]

Custom series can display thousands of data in realtime. But for more data, like more than ten thousands. It may turn on progressive rendering automatically to avoid long rendering time freeze the page.

Here is an example rendering 65k line segments in the custom series with progressive rendering. https://echarts.apache.org/examples/en/editor.html?c=custom-wind