Angular使用Echarts动态数据不刷新

最新推荐文章于 2022-05-10 14:56:16 发布

Delicia_Lani

最新推荐文章于 2022-05-10 14:56:16 发布

阅读量1.3k

点赞数

分类专栏： Angular

本文链接：https://blog.csdn.net/qq_29918313/article/details/106283447

版权

在Angular应用中使用Echarts，遇到动态数据无法更新图表的问题。原因是数据获取后，页面已渲染完成。解决方法是在数据变更时调用Echarts的setOption方法重新渲染图表。

摘要由CSDN通过智能技术生成

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

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

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

具体实现代码如下：

<div class="asset-chart border-card">
   <div class="title">地域分布</div>
   <div chart #regionCharts='chartEle' [options]="assetZone"></div>
</div>



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',