Hi eCharts Team,
I was just working on making a line graph with a series of data (multiple
different lines on the same graph) and wanted to make it so when I hover
over a line, the line will increase in width, and when I am not hovering
over it, the line will return to its original width.
I'm using echarts-for-react and so far am trying to use mouseover and
mouseout events, however when I do this and hover over the lines, it works
for a few seconds but then will begin to lag the page a lot.
lineOnMouseOver = (e) => {
let datasets = this.chartReference.current.props.option.series;
datasets[e.componentIndex].lineStyle.width = 2;
this.chartReference.current.rerender();
}
lineOnMouseOut = (e) => {
let datasets = this.chartReference.current.props.option.series;
datasets[e.componentIndex].lineStyle.width = 0.5;
this.chartReference.current.rerender();
}
Is there any other way to achieve this effect?
Kind regards,
Andrew Zhang
