Issue
I'm trying to update a template when a pie chart slice is clicked.
This is the template.
<h1>{{slice && slice.name}}</h1>
<h1>{{slice && slice.value}}</h1>
Here's a demo. https://stackblitz.com/edit/stackblitz-starters-p8bxjx?file=src%2Fmain.ts,src%2Fecharts.component.ts
When one of the pie chart segments is clicked it emits an object containing the name
and value
of the segment that was clicked.
The main
component receives this via the listener onPieSelect
and sets the slice
property on the main
component like this:
onPieSelect(e: any) {
console.log('slice clicked', e);
this.slice = e;
}
We can see that the object is being received via the log, however the template is not being updated.
Any ideas?
Solution
echarts spawn events outside of angular, and thus, char events don't trigger change detection.
to fix that wrap the handler into an ngzone run
ngZone = inject(NgZone);
...
onChartInit(echarts: any) {
let self = this;
this.echartsIntance = echarts;
this.echartsIntance.on('click', (event: any) => {
this.ngZone.run(() => {
// Print name in console
console.log('Event Name', event.name);
console.log('Event Value', event.value);
console.log('Event Value', event.color.colorStops[0].color);
const pieData: any = { name: event.name, value: event.value };
self.onPieSliceSelect.emit(pieData);
})
});
}
Answered By - Andrei
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.