xieziyu / ngx-echarts

An angular (ver >= 2.x) directive for ECharts (ver >= 3.x)
https://xieziyu.github.io/ngx-echarts/
MIT License
1.11k stars 197 forks source link

There is a chart instance already initialized on the dom. #299

Open y0nd0 opened 3 years ago

y0nd0 commented 3 years ago

I just created one chart and get this warning on console:

There is a chart instance already initialized on the dom. (echarts.js:2168)

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).

image

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 like this.options = {...this.options} to trigger an update. Any idea? ...

{
    "echarts": "^5.0.2",
    "ngx-echarts": "^6.0.1",
}
kevin-objectstudio commented 3 years ago

@y0nd0 What version of angular are you on?

jtomek commented 3 years ago

Angular 12

alextroto commented 3 years ago

Same issue: Angular 12, "echarts": "^5.2.1", "ngx-echarts": "^7.0.2",

MukeshS-hexaware commented 3 years ago

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]}]}
  }
}
apoorv-2204 commented 2 years ago

?

sergioriverafl commented 1 year ago

I solved it in vue 3, implementing a different id for each graph.

rami-alloush commented 8 months ago

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>