what is the best performing way to render a time cursor in an echarts graph? The idea is to synchronize the vertical cursor shown on one graph with another graph on the same page. While the mouse moves over one graph a vertical line is drawn. Now I'd like to have a similar line being shown at the same time location on the other graph.
I'm currently do this by sending a message with a timestamp to the other graph and add a series to the config with a markline:
{
type: 'line',
animation: false,
markLine: {
symbol: 'none',
label: {
show: false
},
lineStyle: {
type: 'solid',
color: '#000',
opacity: 1
},
data: [
{ xAxis: 0 }
]
}
}
On receiving the timestamp, the graph updates data[0].xAxis and the chart is re-rendered. With many charts being connected, it still feels sluggish and I believe that the rendering of the graph with just changing the markline series is still too expensive.
There are a few merge options wrt. the config, but I can't find one, that updates just the markline series or better just moves a line.
I was also trying 'connect', but that was connecting too much (e.g. selection, tooltip, etc.) and even slower than my current method.
There might be another option to render the line with ZRender, but I have not gone that far yet.
Any suggestions?
Cheers, klaus