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

 

 

   

查看更多关于angular6 引用echart第一次数据不显示解决的详细内容...