can't see any chart with echart in angular 7 by programmatically updating

Question

Here is my html

  <div echarts  class="demo-chart" #pie></div>

Here is the component

import { Component, OnInit,OnDestroy, Input, Output,ViewChild, EventEmitter,ElementRef } from '@angular/core';
import { EChartOption } from 'echarts';
import * as echarts from 'echarts';


@Component({
  selector: 'app-admin-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.css']
})
export class ChartComponent implements OnInit,OnDestroy {

  @ViewChild('pie') pie: ElementRef;
  pieEchart;

 chartOption3 = {
     tooltip: {
         trigger: 'item',
         formatter: "{a} <br/>{b}: {c} ({d}%)"
     },
     legend: {
         orient: 'vertical',
         x: 'left',
         data:[]
     },
     series: [
         {
             name:'visits',
             type:'pie',
             radius: ['50%', '70%'],
             avoidLabelOverlap: false,
             label: {
                 normal: {
                     show: false,
                     position: 'center'
                 },
                 emphasis: {
                     show: true,
                     textStyle: {
                         fontSize: '30',
                         fontWeight: 'bold'
                     }
                 }
             },
             labelLine: {
                 normal: {
                     show: false
                 }
             },
             data:[
             ]
         }
     ]
 };

  ngOnInit() {

      this.pieEchart = echarts.init(this.pie.nativeElement);

      this.chartOption3['legend']['data'] = ['abc','cde','3333','444','5555'];
      this.chartOption3['series']['name'] = 'visits';
      this.chartOption3['series']['data'] = [
          {value:335, name:'abc'},
          {value:310, name:'cde'},
          {value:234, name:'444'},
          {value:135, name:'3333'},
          {value:1548, name:'5555'}
      ];

      this.pieEchart.setOption(this.chartOption3);

  }

}

Here is the code and html both are compiled fine by angular cli, but when opening the page, it doesn't show anything.

However, when chartOption3 is hardcoded with data in legend and series.data, the graph could show up.

 chartOption3 = {
     tooltip: {
         trigger: 'item',
         formatter: "{a} <br/>{b}: {c} ({d}%)"
     },
     legend: {
         orient: 'vertical',
         x: 'left',
         data:['abc','cde','3333','444','5555']
     },
     series: [
         {
             name:'visits',
             type:'pie',
             radius: ['50%', '70%'],
             avoidLabelOverlap: false,
             label: {
                 normal: {
                     show: false,
                     position: 'center'
                 },
                 emphasis: {
                     show: true,
                     textStyle: {
                         fontSize: '30',
                         fontWeight: 'bold'
                     }
                 }
             },
             labelLine: {
                 normal: {
                     show: false
                 }
             },
             data:[
          {value:335, name:'abc'},
          {value:310, name:'cde'},
          {value:234, name:'444'},
          {value:135, name:'3333'},
          {value:1548, name:'5555'}
             ]
         }
     ]
 };

any idea why harding code data works while coding to fill the data doesn't work.

P.S. my angular environment is angular 7 and "echarts": "^4.4.0","ngx-echarts": "^4.0.1".

Answer 1

Hi use ngOnChnage Hook.

import { Component, OnInit,OnDestroy, Input, Output,ViewChild, EventEmitter,ElementRef, OnChanges } from '@angular/core';
import { EChartOption } from 'echarts';
import * as echarts from 'echarts';


@Component({
  selector: 'app-admin-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.css']
})
export class ChartComponent implements OnInit,OnDestroy, OnChanges {

  @ViewChild('pie') pie: ElementRef;
  pieEchart;

 chartOption3 = {
     tooltip: {
         trigger: 'item',
         formatter: "{a} <br/>{b}: {c} ({d}%)"
     },
     legend: {
         orient: 'vertical',
         x: 'left',
         data:[]
     },
     series: [
         {
             name:'visits',
             type:'pie',
             radius: ['50%', '70%'],
             avoidLabelOverlap: false,
             label: {
                 normal: {
                     show: false,
                     position: 'center'
                 },
                 emphasis: {
                     show: true,
                     textStyle: {
                         fontSize: '30',
                         fontWeight: 'bold'
                     }
                 }
             },
             labelLine: {
                 normal: {
                     show: false
                 }
             },
             data:[
             ]
         }
     ]
 };

  ngOnInit() {}

ngOnChanges() {

          this.pieEchart = echarts.init(this.pie.nativeElement);

          this.chartOption3['legend']['data'] = ['abc','cde','3333','444','5555'];
          this.chartOption3['series']['name'] = 'visits';
          this.chartOption3['series']['data'] = [
              {value:335, name:'abc'},
              {value:310, name:'cde'},
              {value:234, name:'444'},
              {value:135, name:'3333'},
              {value:1548, name:'5555'}
          ];

          this.pieEchart.setOption(this.chartOption3);

}


}