Open y0nd0 opened 3 years ago
@y0nd0 What version of angular are you on?
Angular 12
Same issue: Angular 12, "echarts": "^5.2.1", "ngx-echarts": "^7.0.2",
Instead of updating the object passed to [options]
, you can define the changing data in a separate variable and pass that variable to [merge]
.
Example:
HTML:
<div echarts [options]="gaugeCommonOptions" [merge]="cpuLoadChartOptions"></div>
Component:
@Component()
export class MyComponent {
gaugeCommonOptions: EChartsOption = {
series: [
{
type: 'gauge',
}
]
}
cpuLoadChartOptions: EChartsOption = {};
plotCpuLoad(): void {
this.cpuLoadChartOptions = {series: [{data: [100]}]}
}
}
?
I solved it in vue 3, implementing a different id for each graph.
Thanks, @sergioriverafl, I was able to do the same in Angular v16, having the ID as variable that changes with each chart solved it for me.
<div
echarts
[options]="options"
class="echart"
[id]="'tankId' + tankId"
></div>
I just created one chart and get this warning on console:
I just update options. I'm on Ionic (Angular) and show this chart on page navigation. But this is not the problem. I get this warning only once or twice (directly at the same time).
If I navigate back and then forward again to the page with the chart, there is no more warning. Only the two (or sometimes only one) message you see above.
On
ngOnChanges
I reassign the chart options likethis.options = {...this.options}
to trigger an update. Any idea? ...