Bars start flickering when emphasis is set after resize window

[borodovisin]

Version

4.7.0

Reproduction link

https://youtu.be/_0w9kIjcuUU

Steps to reproduce

Use this option object:

option = {
    "yAxis": [{
        "type": "category",
        "show": true,
        "data": ["Virginia", "Minnesota", "Michigan", "Texas", "Maryland", "Ohio", "Connecticut", "Tennessee", "Wisconsin", "Pennsylvania", "Colorado", "Georgia", "Massachusetts", "Louisiana", "Illinois", "Florida", "New Jersey", "California", "Washington", "New York"],
    }],
    "xAxis": [{
        "type": "value",
        "show": true,
    }],
    "series": [{
        "type": "bar",
        "data": [{
            "name": "Virginia",
            "value": 77,
        }, {
            "name": "Minnesota",
            "value": 77
        }, {
            "name": "Michigan",
            "value": 80
        }, {
            "name": "Texas",
            "value": 84
        }, {
            "name": "Maryland",
            "value": 85
        }, {
            "name": "Ohio",
            "value": 86
        }, {
            "name": "Connecticut",
            "value": 96
        }, {
            "name": "Tennessee",
            "value": 98
        }, {
            "name": "Wisconsin",
            "value": 106
        }, {
            "name": "Pennsylvania",
            "value": 133
        }, {
            "name": "Colorado",
            "value": 183
        }, {
            "name": "Georgia",
            "value": 196
        }, {
            "name": "Massachusetts",
            "value": 256
        }, {
            "name": "Louisiana",
            "value": 280
        }, {
            "name": "Illinois",
            "value": 288
        }, {
            "name": "Florida",
            "value": 328
        }, {
            "name": "New Jersey",
            "value": 417
        }, {
            "name": "California",
            "value": 892
        }, {
            "name": "Washington",
            "value": 1187
        }, {
            "name": "New York",
            "value": 2382
        }],
        "itemStyle": {
            "color": "#0095b7"
        },
        "emphasis": {
            "itemStyle": {
                "barBorderColor": "#03051e",
                "barBorderWidth": 1
            }
        }
    }]
}

After echarts render the instance, move the mouse over some bars, resize the window and move again the mouse over the bars items.

What is expected?

Not flickering the bars when emphasis is set inside series

What is actually happening?

After create the echarts instance and resize the window the bars start flickering. See the vide example here

[echarts-bot[bot]]

Hi! We've received your issue and please be patient to get responded. 🎉 The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to [email protected]. Please attach the issue link if it's a technical questions.

If you are interested in the project, you may also subscribe our mail list.

Have a nice day! 🍵

[echarts-bot[bot]]

@borodovisin Please provide a demo for the issue either with https://jsfiddle.net/ovilia/n6xc4df3/ or https://gallery.echartsjs.com/editor.html.

[alex2wong]

Please， better provide demo in jsfiddle or https://gallery.echartsjs.com/editor.html.

[borodovisin]

Here the jsfiddle sample: https://jsfiddle.net/btdmxvor/. But there is a little hard to recreate, the window container has to resize to see the issue. In the official documentation website taking any example and using the object I provided is very easy to recreate. After echarts instance renders move the mouse over a few bars and resize the whole browser tab and move again the mouse over the chart bars. I think is something with the emphasis borderWidth or barBorderWidth option. When the mouse enters the borderWidth the mouseout event is dispatch and because that we'll see that flickering there. I change to use the borderShadow option and the flickering disappears.

[100pah]

Indeed it is a bug. To reproduce it, resize the chart to make bar very thin, and hover the bars, and then resize the chart back.

[pissang]

Seems can't be reproduced in 5.0. Moved to the 5.0 milestone.

[github-actions[bot]]

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

[github-actions[bot]]

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!