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); } }
- 上一篇 »php计算最后一次,第一次字符串出现位置
- 下一篇 »第一次PHP面试题