angular6 引用echart第一次数据不显示解决

1 使用promise从后台返回数据后，页面仍是比数据更快的加载出来，致使echart图页面加载的时候不显示问题

 1.1 html

<div  echarts [options]="downOption" (chartInit)="onChartInit($event)" ></div>

    在须要用到的echar图上加入 (chartInit)      初始化的时候建立一个 ECharts 实例，返回 echartsInstance  也就是($event)，不能在单个容器上初始化多个 ECharts 实例。

    (chartClick)="chartClick($event)"              点击的时候建立一个 ECharts实例，返回 echartsInstance  也就是($event)

   注意： 在引用多个echart事，更新视图须要用多个setOption，来设置不一样的echart,不然只有重构的echart显示，其他都不显示

  1.2 ts

1 public echartsIntance; // 获取ECharts实例 2 
3  onChartInit(ec) { 4  this.echartsIntance = ec; 5  } 6 
7 this.echartsIntance.setOption(this.downOption);   // 更新echart视图

   从初始化的方法取到echart实例，从实例身上取到更新echart视图的方法setOption

 

扩展  十秒获取一次数据更新到echart视图上

 // 生命钩子函数，组件初始化的时候调用 ngOnInit() { // 计时器十秒获取一下数据 this.timer=setInterval(()=>{ this.flowDataList(this.flowid,this.flowip); // 十秒请求接口数据 this.echartsIntance.setOption(this.downOption); // 更新下行流量echart视图 this.echartsIntance_two.setOption(this.upOption); // 更新上行流量echart视图 },5000) } //销毁组件时清除定时器 ngOnDestroy() { if (this.timer) { clearInterval(this.timer); } }