JiahuiChen99 opened a new issue #16659:
URL: https://github.com/apache/echarts/issues/16659


   ### 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.
   
   
![image](https://user-images.githubusercontent.com/37770349/157444648-d9840296-f4ba-4256-b300-c51961f3e03a.png)
   
![image](https://user-images.githubusercontent.com/37770349/157444758-9ae573d8-1792-4b6a-a6c4-a31cc13efd59.png)
   
   
   ### 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
   
   ```markdown
   - OS: Linux
   - Framework: Vue@3
   ```
   
   
   ### Any additional comments?
   
   _No response_


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: [email protected]

For queries about this service, please contact Infrastructure at:
[email protected]



---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]

Reply via email to