Angular使用Echarts动态数据不刷新

在Angular项目中使用Echarts来实现图表的过程中，从服务端请求回来数据，赋值之后，页面图表却不刷新，数据没问题，原因是

数据拿到时页面已经渲染了，因此没有显示。

解决方式是：
数据拿到时使用setOption再次渲染

具体实现代码如下：

   
地域分布
   





import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Service } from '../service';
import { NzMessageService } from 'ng-zorro-antd';

@Component({
  selector: '',
  templateUrl: 'a.component.html',
  styleUrls: ['a.component.less']
})
export class OverviewComponent implements OnInit {
  @ViewChild('regionCharts', {static: false}) regionCharts: any;

  zone = {
    tooltip: {
    trigger: 'item',
    formatter: '{a} 
{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    right: '15%',
    top: '40%',
    data: []
  },
  series: [
    {
        name: 'aa',
        type: 'pie',
        radius: ['50%', '70%'],
        center: ['30%', '50%'],
        avoidLabelOverlap: false,
        label: {
            normal: {
                show: false,
                position: 'center'
            },
            emphasis: {
                show: true,
                textStyle: {
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            }
        },
        labelLine: {
            normal: {
                show: false
            }
        },
        data: []
      }
    ]
  };

  constructor(private service: Service, private message: NzMessageService) { }

  ngOnInit() {
    // 地域
    this.service.getChart().subscribe(
      (res: any) => {
        res.chart.map((item: any) => {
          this.zone.series[0].data.push(
            {value: item.value, name: item.key}
          )
          this.assetZone.legend.data.push(item.key)
        })
        this.regionCharts.chartInstance.setOption(this.zone);
      },
      error => {
        this.message.error(error)
      }
    )
}