[Bug] Some lines in the line chart disappear progressively

[jgoncab-arte]

Version

5.4.3

Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?c=line-stack&version=5.4.3

Steps to Reproduce

Create a chart with more than one serie, a lot of data and this options:

      type: 'line',
      emphasis: {
        focus: 'self',
        blurScope: 'global'
      },
      showAllSymbol: true,

Then move the mouse over the lines fast to change the highlighted line. After a while the lines start disappearing.

Current Behavior

The lines begin to fade except when the mouse is over them. When the mouse is not over any lines, they remain blurry.

Expected Behavior

The lines should come back when no line is highlighted.

Environment

- OS: Window 10
- Browser: Chrome 125.0.6422.60

Any additional comments?

The link does not always produce the error. The next html does: line-stack.txt I don't know the reason. I think the only difference is data.

[helgasoft]

bug confirmed - entire series line segments are not restored after emphasis blur. Only their symbols remain. Tried with blurScope: 'coordinateSystem', but result is the same. Another workaround to try is xAxis.type:'time' - that means rewriting all data as datasets.

[jgoncab-arte]

I tried it with dataset but the bug is still there: blur-error-using-dataset.txt

[helgasoft]

yes, dataset shows the same - Demo Hovering series (entering/exiting from either side) will gradually remove all lines. Disabling symbols showSymbol:false may help a little. Any refresh, like resize or legend click, will restore the lines.

My guess is blur line redrawing is interrupted when there are many line series. One workaround is to use legend instead of emphasis to show/hide line series. Of course it becomes inconvenient when many series are overlapping, like in your example.

[jgoncab-arte]

Yes, I could see the change with showSymbol: false but I wanted to use the tooltip and it doesn't work properly without the symbols (similar to this https://github.com/apache/echarts/issues/19608#issuecomment-1937838187) .

I tried with select but according to this issue it doesn't work (https://github.com/apache/echarts/issues/16545) and will never work.

Any other idea? Is there any other way to refresh the chart? I'm also using datazoom in my case, so I need the update to keep the selection.

[helgasoft]

I tried with select but according to this issue it doesn't work (#16545) and will never work.

good that you mentioned it! See my Demo Code in related #19194. Event selectchanged should successfully replace emphasis in your example. Just remove all areaStyle. Toggle lineStyle by clicking on a line symbol and mouse-out. 🥳

[jgoncab-arte]

Doesn't using setOption constantly affect performance? I would like the other series to blur and maybe I can make it work with that approach, but setOption would refresh the dataZoom selection constantly. Can I avoid this somehow?

[jgoncab-arte]

I made a test with this code:

chart.dispatchAction({type: 'select', seriesIndex: seriesIndex, dataIndex: dataIndex});
var options = chart.getOption();
for (let i = options.series.length - 1; i >= 0; i--) {
    if (i === seriesIndex) {
        options.series[i].lineStyle = {
            opacity: 1
        };
    } else {
        options.series[i].lineStyle = {
            opacity: 0.3
        };
    }
}
chart.setOption(options);

The dataZoom does not change, but the performance is really bad in my example.

[helgasoft]

I believe the best workaround is with toggle click event - Demo. Event selectchanged works only with line symbols, but not line segments - maybe a valid new Feature request. And since lines here are so dense, it's better to be able to click on both.

[jgoncab-arte]

It's not exactly the behavior I was asked to develop. Do you intend to fix this bug at some point?

[helgasoft]

Do you intend to fix this bug at some point?

Cannot speak for the developers, but suspect they have bigger fish to fry. Performance bugs could be hard or even impossible to fix. I stick to workarounds and move on.