"this.__layers is null" error clicking on a chart that has a legend or toolbox

[dsargent]

Version

5.4.1

Link to Minimal Reproduction

No response

Steps to Reproduce

I don't have a minimal reproducible sample as this is proprietary corporate code, but my use case is pretty simple:

1) Create a 3D surface plot 2) Add a toolbox or legend of any kind 3) Add an onClick event like this: onEvents={{click: onChartClick}} as a property of the EChart. My particular onClick event updates some fields on the page that generate a re-render 4) When you click on the chart, boom -- exception down in zrender. The null pointer is happening on the this.__layers part of this code from canvas/Painter.js in zrender:

  CanvasPainter.prototype.eachOtherLayer = function (cb, context) {
        var zlevelList = this._zlevelList;
        for (var i = 0; i < zlevelList.length; i++) {
            var z = zlevelList[i];
            var layer = this._layers[z];   // <---- boom! this.__layers is null
            if (!layer.__builtin__) {
                cb.call(context, layer, z);
            }
        }
    };

If I remove the legend and toolbox, everything is fine. Adding either of those causes the exception to happen when clicking on the chart.

I've tried googling, searching your issues and doc, searching zrender's issues and doc, and even asking chatGPT. The latter suggested adding a z property to the series, which I tried but it didn't help.

Thanks for any suggestions.

Current Behavior

Crashes with an exception when handling onClick

Expected Behavior

Correctly handles onClick without crashing

Environment

- OS: Tested on Ubuntu and MacOS
- Browser: Same on Chrome & Firefox
- Framework: ReactJS/Typescript, using echarts-for-react to wrap ECharts.

Any additional comments?

No response

[helgasoft]

not-a-bug Minimal Reproduction code is actually "pretty simple" to build from official example. Demo Code - does it "boom"? No.
Maybe crash is due to ReactJS overhead.

disclaimer

opinions expressed in this post are strictly personal, as ECharts user, not a developer

[dsargent]

But the onClick in the sample isn't doing any re-rendering, just logging to the console. Maybe that's the difference. Or it could indeed be something in the React machinery or the echarts_for_react library that's causing it. But whatever the cause, the error is happening down in zrender, and only happens when adding either a legend or toolbox to the chart.

[helgasoft]

But the onClick in the sample isn't doing any re-rendering...

you could modify it to include whatever is needed for the crash

error is happening down in zrender

zrender has its own repo, but without Minimal Reproduction Code I doubt they will be able to help.

[echarts-bot[bot]]

@dsargent Please provide a demo for the issue either with Official Editor, CodePen, CodeSandbox or JSFiddle.

[dsargent]

Thanks for the quick responses. I am new to the whole of front-end development (many years backend dev) so even something that might seem simple like coming up with a minimal JS example is non-trivial for me -- I'm only somewhat familiar with Typescript. Working on a simple example using the links provided above.

[dsargent]

I don't have bandwidth to create a reproducible demo and we found a workaround by doing things in a different way, so feel free to close.