标签：wip att 后台 interval div 需要 clear echart ring
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)
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);
}
}
标签：wip att 后台 interval div 需要 clear echart ring
原文地址：https://www.cnblogs.com/zxbky/p/10237772.html
