eCharts how to make line bolder on hover

[Andrew Zhang <an...@gmail.com>]

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

Re: eCharts how to make line bolder on hover

[Ovilia <ov...@gmail.com>]

Hi Andrew,

I made a demo for you. If you wish to highlight the line when hovering on
the line rather than the data item, I'm afraid ECharts cannot do so now.
But I think this could be a useful feature in our next big version 5.0.

Current solution:

option = {
    xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D']
    },
    yAxis: {},
    series: [{
        type: 'line',
        data: [120, 200, 90, 40]
    }, {
        type: 'line',
        data: [20, 260, 40, 90]
    }, {
        type: 'line',
        data: [100, 20, 70, 80]
    }],
    tooltip: {
        show: true
    }
};

myChart.on('mouseover', function (params) {
    console.log(params)

    for (var i = 0; i < option.series.length; ++i) {
        option.series[i].lineStyle = {
            width: 2
        };
    }

    const series = option.series[params.seriesIndex];
    series.lineStyle = {
        width: 4
    };
    myChart.setOption(option);
});

myChart.on('mouseout', function (params) {
    for (var i = 0; i < option.series.length; ++i) {
        option.series[i].lineStyle = {
            width: 2
        };
    }
    myChart.setOption(option);
});


Thanks

Wenli


On Mon, Apr 6, 2020 at 11:59 PM Andrew Zhang <an...@gmail.com>
wrote:

> 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
>