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