[Bug] Heatmap visualmap filtering not working - CoordSys is undefined

Version

5.3.1

Link to Minimal Reproduction

No response

Steps to Reproduce

I’m following the Cartesian Heatmap chart example (https://echarts.apache.org/examples/en/editor.html?c=heatmap-cartesian). But the filtering with the visualMap doesn’t work properly. Once I move the cursors to select the desired range, it throws this error.

Uncaught TypeError: Cannot read properties of undefined (reading 'type')
    at HeatmapView.render (HeatmapView.js?d7f5:137)
    at Task.progress (Chart.js?fc49:233)
    at Task._doProgress (task.js?d463:187)
    at Task.perform (task.js?d463:153)
    at eval (echarts.js?f2a6:1821)
    at GlobalModel.eval (Global.js?05a0:654)
    at Array.forEach (<anonymous>)
    at each (util.js?d5c9:205)
    at GlobalModel.eachSeries (Global.js?05a0:651)
    at renderSeries (echarts.js?f2a6:1809)

The source code line that breaks is the 137 in HeatmapVIew.js file.

    this._progressiveEls = null;
    this.group.removeAll();
    var coordSys = seriesModel.coordinateSystem;

   // The following check breaks because coordSys is undefined
    if (coordSys.type === 'cartesian2d' || coordSys.type === 'calendar') {
      this._renderOnCartesianAndCalendar(seriesModel, api, 0, seriesModel.getData().count());
    } else if (isGeoCoordSys(coordSys)) {
      this._renderOnGeo(coordSys, seriesModel, visualMapOfThisSeries, api);
    }

I’ve debugged the code, and when the component renders(I’m using Vue@3) on mounted, coordSys.type is cartesian2d. But once I move the visualmap cursor, that variable becomes undefined.

Current Behavior

Everything works as expected, until I use the visualmap to filter values. The chart breaks and doesn’t display values anymore.

Expected Behavior

It should apply a filter and display the values that falls within the selected range from the visualmap to the heatmap chart.

Environment

- OS: Linux
- Framework: Vue@3

Any additional comments?

No response

[plainheart]

Don’t worry. You may still use this.heatmap_chart = echarts.init() to mount the echarts instance on this. Just please don’t put it in data block to avoid making echarts instance reactive.

data() {
    return {
        // DON'T declare here!
        // heatmap_chart: null
    }
},
mounted() {
    // Mount this echarts instance on current vue instance using `this`.
    // It's a common variable and won't make the echarts instance reactive.
    this.heatmap_chart = echarts.init();
},
beforeUnmount() {
    // destroy echarts instance
    this.heatmap_chart && this.heatmap_chart.dispose();
    this.heatmap_chart = null;
}

[plainheart]

In vue data() I have a heatmap_chart variable initialized to null,

@JiahuiChen99 This is not expected. Just remove the heatmap_chart variable from vue data block.