How to select a line chart by clicking somewhere else than a datapoint in echarts?

Question

I am using echarts to visualize multiple line-charts. When I click exactly on a datapoint I am able to select a specific line chart. However If I click elsewhere on the line, where there in no datapoint associated, the chart in not selected. I know there is a focus feature by hovering the mouse. I want the same functionality using the click event. I am using the following method, but I am not sure how to implement it.

    myChart.getZr().on('click', params => {
        //to be implemented

     })

Here is the configuration example for the hovering effect on echarts: https://echarts.apache.org/examples/en/editor.html?c=multiple-x-axis

Answer 1

I solved this with filled-area

I put areaStyle: {} in series' option then add the following event handler like this

myChart.getZr().on('click', function (params) {
                                Object.keys(params.target).filter(key => key.includes(
                                    '__ec_inner_')).filter(key => params.target[key]
                                    .seriesIndex != undefined).forEach(key => {
                                            console.log(option.series[params.target[key]
                                                .seriesIndex].name)
                                    
                                })
                            });