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

public echartsIntance;  // 獲取ECharts實例  

 onChartInit(ec) {     
 this.echartsIntance = ec;
 }

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