Incubator-echarts: Treemap Blinking

[hemantITT]

Version

4.2.1

Steps to reproduce

OS: MacOS
ScreenSize: 27inch
Browser: Chrome

1) there is large number of data for TreeMap. 2) Use below similar settings. 3) Treemap is used same as demo: https://ecomfe.github.io/echarts-examples/public/editor.html?c=treemap-show-parent

{
name: 'Main',
type: 'treemap',
// width: '98%',
// height: '95%',
// left: 30,
roam: false,
visibleMin: 300,

                label: {
                    show: true,
                    color: fontColor,
                    position: 'absolute',
                    formatter: function (info) {
                        var labelData = info.data.labels;
                        var labelValueArr = [];
                        if(labelData !== undefined) {
                            Object.keys(labelData).forEach(function (label) {
                                var labelVal = '';
                                //Check lable value is not null or undefined.If undefined then keep blank.
                                if(util.nullCheck(labelData[label])) {
                                    labelVal = labelData[label];
                                }

                                if(label === 'guest') {
                                    labelValueArr.push(labelVal);
                                } else if(label === 'stand') {
                                    label = 'Location';
                                    labelValueArr.push(label   ':'   labelVal);
                                } else {
                                    labelValueArr.push(label   ':'   labelVal);
                                }
                            });
                        }
                        return labelValueArr.join('\n');
                    },
                },
                upperLabel: {
                    normal: {
                        show: true,
                        height: 30
                    }
                },
                itemStyle: {
                    normal: {
                        borderColor: '#fff'
                    }
                },
                levels: $scope.levelOption,
                data: $scope.treemapData
            }

What is expected?

Treemap should be displayed properly

What is actually happening?

Treemap result is displayed but when mouse is hovered on parent label then all the items of treemap go invisible

---

It only happens on large data

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

Have a nice day! 🍵

[hemantITT]

When mouse hovered on label :

When the treemap is loaded

[Ovilia]

Please provide a working demo as simple as possible here: https://jsfiddle.net/ovilia/n6xc4df3/

[hemantITT]

Hi could not save into above given url. I have created a new one.
https://jsfiddle.net/hemantss/uwh2543p/2/

[hemantITT]

Hi Ovilia please do you have any update for this issue.

[Ovilia]

@susiwen8 Could you help with this issue?

[susiwen8]

@Ovilia Sure, challenge accepted.

[susiwen8]

https://github.com/apache/incubator-echarts/blob/master/src/echarts.js#L1666
https://github.com/apache/incubator-echarts/blob/master/src/model/globalDefault.js#L78
https://github.com/ecomfe/zrender/blob/master/src/Painter.js#L336
Threshold value is 3000, but data count is lager than 3000, that led the zlevel of hoverlayer will be 10000, which will cover whole section, and that's why we saw 'blink'.
Obviously hoverLayerThreshold is for optimization reason, for this particular case, 3000 is not satisfied, but finally hoverLayerThreshold value need further discussion. @Ovilia @100pah

[Ovilia]

@susiwen8 Nice job for finding out the reason! Although I don't think it is wise to change progressiveThreshold to be Infinity in the source code. Even it is the correct way to fix this demo, it should be changed in user code rather than source code. @100pah Please have a look.

[100pah]

@hemantITT

As @susiwen8 said, please set

option: {
     hoverLayerThreshold: Infinity,
     series: { 
          ...
     }
}

to resolve this problem.

And the default hoverLayerThreshold of treemap will be fixed soon.

[hemantITT]

Thank you for fixing this one