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

 public echartsIntance;  // 获取ECharts实例  

  onChartInit(ec) {
this.echartsIntance = ec;
} 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第一次数据不显示解决的更多相关文章

  1. easyui datagrid 没数据时显示滚动条的解决方法

    今天解决了一个bug,因为datagrid有多列,可是当没有数据的时候,后面的列无法通过滚动条拉动来显示,比较麻烦,而需求要求没有数据也要拉动滚动条查看后面有什么列,一开始在网上找了一些资料,发现都不 ...

  2. JMeter 查看结果树监听器响应数据中文显示乱码解决方法

    查看结果树监听器响应数据中文显示乱码解决方法 by:授客 QQ:1033553122   问题描述 使用监听器-查看结果树(View Results Tree Listener)过程中发现,响应数据面 ...

  3. mysql导入导出数据中文乱码解决方法小结(1、navicat导入问题已解决,创建连接后修改连接属性,选择高级->将使用Mysql字符集复选框去掉,下拉框选择GBK->导入sql文件OK;2、phpmyadmin显示乱码的问题也解决,两步:1.将sql文件以utf8的字符集编码另存,2.将文件中sql语句中的字段字符集编码改成utf8,导入OK)

    当向 MySQL 数据库插入一条带有中文的数据形如 insert into employee values(null,'张三','female','1995-10-08','2015-11-12',' ...

  4. spring jpa 实体互相引用返回restful数据循环引用报错的问题

    spring jpa 实体互相引用返回restful数据循环引用报错的问题 Java实体里两个对象有关联关系,互相引用,比如,在一对多的关联关系里 Problem对象,引用了标签列表ProblemLa ...

  5. ECstore报表不显示解决

    最近研究ECSTORE发现后台报表显示空白,Google了一下发现N多统一的做法,直接往表里插几条数据.呵呵,更深入一点 1.要显示报表功能首先要确保已经配置好contab的定时任务,定时任务能够执行 ...

  6. .NET 并行(多核)编程系列之七 共享数据问题和解决概述

    原文:.NET 并行(多核)编程系列之七 共享数据问题和解决概述 .NET 并行(多核)编程系列之七 共享数据问题和解决概述 前言:之前的文章介绍了了并行编程的一些基础的知识,从本篇开始,将会讲述并行 ...

  7. Fullcalendar改版后发布到IIS或者tomcat里面前端加载数据不显示的问题

    问题如题:Fullcalendar改版后发布到IIS或者tomcat里面前端加载数据不显示的问题 解决办法:通过火狐浏览器工具发现是时间格式不对的原因,需要将时间格式修改为:yyyy-MM--DD   ...

  8. 引用EChart和Bootstrap

    1.怎么引用Echart 下载之后,写一个html,里面这样写 <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  9. 使用 Qt 获取 UDP 数据并显示成图片(2)

    本文首发于 BriFuture 的 个人博客 在我的前一篇文章 使用 Qt 获取 UDP 数据并显示成图片 中,我讲了如何用 Python 模拟发送数据,如何在 Qt 中高效的接收 UDP 数据包并将 ...

随机推荐

  1. loj.ac:#10024. 「一本通 1.3 练习 3」质数方阵

    CSDN的博客 友键 题目描述 质数方阵是一个\(5×5\)的方阵,每行.每列.两条对角线上的数字可以看作是五位的素数.方格中的行按照从左到右的顺序组成一个素数,而列按照从上到下的顺序.两条对角线也是 ...

  2. 配置合适的Visual Studio 2017 开发环境(其它版本的也适用)

    1.VS 安装完成后,可以重新配置合适的开发环境 第一步: 第二步: 第三步: 第四步:选择合适自己的开发环境 这里我选择常规,具体的可以看窗口右边的说明

  3. 装B命令行,常用Windows命令

    winver检查Windows版本 dxdiag检查DirectX信息 gpedit.msc 组策略   regedit.exe 注册表 Msconfig.exe 系统配置实用程序  lusrmgr. ...

  4. python 在内网windows环境下pip三方包

    我没用过Linux环境. 一般情况下,内网安装三方包,只需要在pypi找到对应python版本(2.7,3.6,...),系统位数(32位,64位)的whl包,cmd命令行cd进入相关目录,pip i ...

  5. if -----if else语句

    if语句是用来进行判断的,其使用格式如下: 单分支 if 判断的条件: 满足条件后要执行的代码 双分支 if 条件: 满足条件执行代码 else: if条件不满足就走这段 这里必须要插入这个缩进的知识 ...

  6. JS之工厂模式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 【转载】IL指令集

    转载自:http://www.cnblogs.com/knowledgesea/p/5461040.html 名称 说明 Add 将两个值相加并将结果推送到计算堆栈上. Add.Ovf 将两个整数相加 ...

  8. nim读写注册表的小例子

    nim读写注册表的小例子 2018年5月7日 15:11:58 codegay 贴一个nim读写注册表的例子,虽然简单,但是nim官方没有写windows注册表相关的文档, 我贴的例子兴许能帮大家省点 ...

  9. Fiddler抓取https的设置

    在抓取https的设置中,出现了The root certificate could not be located; 需要下载并安装证书生成器,勾选Capture HTTPS traffic.

  10. Hadoop 搭建集群的步骤

    1.安装jdk,配置环境变量 root@localhost java]# vi /etc/profile 在profile中添加如下内容: #set java environmentexport  J ...