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