通过编程更新无法在Angle 7中看到带有echart的任何图表

Question

这是我的html

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

这里是组件

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

  }

}

这里是代码和html都可以通过angular cli很好地编译，但是在打开页面时，它什么也没有显示。

但是，当chartOption3用图例和series.data中的数据硬编码时，图形可能会显示。

 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'}
             ]
         }
     ]
 };

关于在编码以填充数据时强化代码数据为何起作用的任何想法都行不通。

P.S。我的角度环境是角度7，“ echarts”：“ ^ 4.4.0”，“ ngx-echarts”：“ ^ 4.0.1”。

Answer 1

您好，请使用ngOnChnage Hook。