You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2022/03/09 12:51:29 UTC
[GitHub] [echarts] JiahuiChen99 opened a new issue #16659: [Bug] Heatmap visualmap filtering not working - CoordSys is undefined
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.
### 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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] plainheart edited a comment on issue #16659: [Bug] Heatmap visualmap filtering not working - CoordSys is undefined
Posted by GitBox <gi...@apache.org>.
plainheart edited a comment on issue #16659:
URL: https://github.com/apache/echarts/issues/16659#issuecomment-1064006630
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.
```js
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;
}
```
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] plainheart edited a comment on issue #16659: [Bug] Heatmap visualmap filtering not working - CoordSys is undefined
Posted by GitBox <gi...@apache.org>.
plainheart edited a comment on issue #16659:
URL: https://github.com/apache/echarts/issues/16659#issuecomment-1064006630
Don't worry. You may still use `this.heatmap_chart = echarts.init()` to mount the echarts instance to `this`. Just please don't put it in `data` block to avoid making echarts instance reactive.
```js
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;
}
```
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] plainheart commented on issue #16659: [Bug] Heatmap visualmap filtering not working - CoordSys is undefined
Posted by GitBox <gi...@apache.org>.
plainheart commented on issue #16659:
URL: https://github.com/apache/echarts/issues/16659#issuecomment-1064006630
Don't worry. You may still use `this.heatmap_chart = echarts.init()` to mount the echarts instance to `this`. Just please don't put it in `data` block to avoid making echarts instance reactive.
```vue
data() {
return {
// DON'T declare here!
// heatmap_chart: null
}
},
mounted() {
// Mount this echarts instance on current vue instance using `this`
this.heatmap_chart = echarts.init();
},
beforeUnmount() {
// destroy echarts instance
this.heatmap_chart && this.heatmap_chart.dispose();
}
```
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] JiahuiChen99 commented on issue #16659: [Bug] Heatmap visualmap filtering not working - CoordSys is undefined
Posted by GitBox <gi...@apache.org>.
JiahuiChen99 commented on issue #16659:
URL: https://github.com/apache/echarts/issues/16659#issuecomment-1063867908
I'm using a common variable. In vue data() I have a heatmap_chart variable initialized to null, and on component mounted() event I create the chart and assign it to the variable. It doesn't work :woman_shrugging:
```
mounted() {
let heatmapDom = document.getElementById('chart');
this.heatmap_chart = echarts.init(heatmapDom);
this.heatmap.setOption(data);
}
```
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] echarts-bot[bot] commented on issue #16659: [Bug]
Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on issue #16659:
URL: https://github.com/apache/echarts/issues/16659#issuecomment-1062889211
I'm sorry to close this issue for it lacks the necessary title. Please provide **a _descriptive_ and as _concise_ as possible title to describe your problems or requests** and then the maintainers or I will reopen this issue.
Every good bug report or feature request starts with a title. Your issue title is a critical element as it's the first thing maintainers see.
A good issue title makes it easier for maintainers to understand what the issue is, easily locate it, and know what steps they'll need to take to fix it.
Moreover, it's better to include keywords, as this makes it easier to find the issue self and similar issues in searches.
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] plainheart edited a comment on issue #16659: [Bug] Heatmap visualmap filtering not working - CoordSys is undefined
Posted by GitBox <gi...@apache.org>.
plainheart edited a comment on issue #16659:
URL: https://github.com/apache/echarts/issues/16659#issuecomment-1064006630
Don't worry. You may still use `this.heatmap_chart = echarts.init()` to mount the echarts instance to `this`. Just please don't put it in `data` block to avoid making echarts instance reactive.
```js
data() {
return {
// DON'T declare here!
// heatmap_chart: null
}
},
mounted() {
// Mount this echarts instance on current vue instance using `this`. It won't make the echarts instance reactive.
this.heatmap_chart = echarts.init();
},
beforeUnmount() {
// destroy echarts instance
this.heatmap_chart && this.heatmap_chart.dispose();
}
```
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] isuye commented on issue #16659: [Bug] Heatmap visualmap filtering not working - CoordSys is undefined
Posted by GitBox <gi...@apache.org>.
isuye commented on issue #16659:
URL: https://github.com/apache/echarts/issues/16659#issuecomment-1063646777
我把const chart =ref(null)
改为
let chart = null就行了欸
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] JiahuiChen99 closed issue #16659: [Bug] Heatmap visualmap filtering not working - CoordSys is undefined
Posted by GitBox <gi...@apache.org>.
JiahuiChen99 closed issue #16659:
URL: https://github.com/apache/echarts/issues/16659
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] JiahuiChen99 commented on issue #16659: [Bug] Heatmap visualmap filtering not working - CoordSys is undefined
Posted by GitBox <gi...@apache.org>.
JiahuiChen99 commented on issue #16659:
URL: https://github.com/apache/echarts/issues/16659#issuecomment-1063997017
> > 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.
Declaring the chart in the mounted scope, like this, seems to work.
```
mounted(){
let heatmap_chart = echarts.init();
}
```
But, how am I supposed to reference the chart later in the beforeUnmount block, so that I can dispose it? And what's the reason why, what I did before the doesn't work?
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] plainheart commented on issue #16659: [Bug] Heatmap visualmap filtering not working - CoordSys is undefined
Posted by GitBox <gi...@apache.org>.
plainheart commented on issue #16659:
URL: https://github.com/apache/echarts/issues/16659#issuecomment-1063980378
> 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.
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] plainheart edited a comment on issue #16659: [Bug] Heatmap visualmap filtering not working - CoordSys is undefined
Posted by GitBox <gi...@apache.org>.
plainheart edited a comment on issue #16659:
URL: https://github.com/apache/echarts/issues/16659#issuecomment-1064006630
Don't worry. You may still use `this.heatmap_chart = echarts.init()` to mount the echarts instance to `this`. Just please don't put it in `data` block to avoid making echarts instance reactive.
```js
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 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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] echarts-bot[bot] closed issue #16659: [Bug]
Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] closed issue #16659:
URL: https://github.com/apache/echarts/issues/16659
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] plainheart commented on issue #16659: [Bug] Heatmap visualmap filtering not working - CoordSys is undefined
Posted by GitBox <gi...@apache.org>.
plainheart commented on issue #16659:
URL: https://github.com/apache/echarts/issues/16659#issuecomment-1063641149
Check if you are using `ref` or `reactive` to make echarts instance reactive. If so, try to use `shallowRef` or `shallowReactive` or a common variable instead.
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] plainheart commented on issue #16659: [Bug] Heatmap visualmap filtering not working - CoordSys is undefined
Posted by GitBox <gi...@apache.org>.
plainheart commented on issue #16659:
URL: https://github.com/apache/echarts/issues/16659#issuecomment-1064013813
BTW, please refer to the [Vue documentation](https://vuejs.org/api/reactivity-advanced.html#markraw) for the reason.
> Some values simply should not be made reactive, for example a complex 3rd party class instance, or a Vue component object.
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] JiahuiChen99 commented on issue #16659: [Bug] Heatmap visualmap filtering not working - CoordSys is undefined
Posted by GitBox <gi...@apache.org>.
JiahuiChen99 commented on issue #16659:
URL: https://github.com/apache/echarts/issues/16659#issuecomment-1064010622
Thank you @plainheart for the explanation! It does work now :100:
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] plainheart edited a comment on issue #16659: [Bug] Heatmap visualmap filtering not working - CoordSys is undefined
Posted by GitBox <gi...@apache.org>.
plainheart edited a comment on issue #16659:
URL: https://github.com/apache/echarts/issues/16659#issuecomment-1064006630
Don't worry. You may still use `this.heatmap_chart = echarts.init()` to mount the echarts instance to `this`. Just please don't put it in `data` block to avoid making echarts instance reactive.
```js
data() {
return {
// DON'T declare here!
// heatmap_chart: null
}
},
mounted() {
// Mount this echarts instance on current vue instance using `this`. It won' make the echarts instance reactive.
this.heatmap_chart = echarts.init();
},
beforeUnmount() {
// destroy echarts instance
this.heatmap_chart && this.heatmap_chart.dispose();
}
```
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] JiahuiChen99 edited a comment on issue #16659: [Bug] Heatmap visualmap filtering not working - CoordSys is undefined
Posted by GitBox <gi...@apache.org>.
JiahuiChen99 edited a comment on issue #16659:
URL: https://github.com/apache/echarts/issues/16659#issuecomment-1063867908
I'm using a common variable. In vue data() I have a heatmap_chart variable initialized to null, and on component mounted() event I create the chart and assign it to the variable. It doesn't work :thinking:
```
mounted() {
let heatmapDom = document.getElementById('chart');
this.heatmap_chart = echarts.init(heatmapDom);
this.heatmap.setOption(data);
}
```
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org