angular中使用echart遇到的获取容器高度异常的问题记录https://blog.csdn.net/shunfa888/article/details/79840631

转载 2018年04月15日 12:23:31

问题

  在使用echart去创建图表时,发现图表只占了容器的一个角落,如图,并没有充满容器。

  第一反应是容器元素的样式有问题,于是我把容器的宽高都改为px指定的(之前是百分比设定的,查询资料发现说echart容器宽高要明确指定),修改之后,还是和上面一样的展示,依旧有问题。

定位

  于是我想是不是渲染图表时,获取到的容器元素的高度有问题,代码中我是在ngAfterViewInit()生命周期中渲染的图表,先打印出元素高度看看

  ngAfterViewInit() {
    console.log(document.getElementById('usertotal').clientHeight);
    this.initChart('usertotal');
  }

  发现元素此时的高度为27,果然有问题

  于是打印出各个生命周期中获取的元素高度,再第二次ContentChecked之后才会获取都正确的高度,但是ContentChecked在每次内容变更检测之后都会调用,用来初始化地图肯定不合适

解决

  在ngAfterViewInit中延时再初始化地图,加入延时之后,发现获取到了预期的高度

  其实setTimeOut设置的延时为 0 ,只是将获取高度放在了事件队列中,等主线程的任务执行完了再获取高度,此时就获得到了正确的高度,肯定可以正确初始化地图


https://card.weibo.com/article/v3/editor#/history/186963
https://card.weibo.com/article/v3/editor#/history/186608
https://card.weibo.com/article/v3/editor#/history/186424
https://card.weibo.com/article/v3/editor#/history/185801
https://card.weibo.com/article/v3/editor#/history/185781
https://card.weibo.com/article/v3/editor#/history/185463
https://card.weibo.com/article/v3/editor#/history/174288
https://card.weibo.com/article/v3/editor#/history/174119
https://card.weibo.com/article/v3/editor#/history/173561
https://card.weibo.com/article/v3/editor#/history/173336
https://card.weibo.com/article/v3/editor#/history/173082
https://card.weibo.com/article/v3/editor#/history/184630
https://card.weibo.com/article/v3/editor#/history/183057
https://card.weibo.com/article/v3/editor#/history/184940
https://card.weibo.com/article/v3/editor#/history/186882
https://card.weibo.com/article/v3/editor#/history/186884
https://card.weibo.com/article/v3/editor#/history/186966
https://card.weibo.com/article/v3/editor#/history/187201
https://card.weibo.com/article/v3/editor#/history/187391
https://card.weibo.com/article/v3/editor#/history/174940
https://card.weibo.com/article/v3/editor#/history/187695
https://card.weibo.com/article/v3/editor#/history/185492
https://card.weibo.com/article/v3/editor#/history/187410
https://card.weibo.com/article/v3/editor#/history/174972
https://card.weibo.com/article/v3/editor#/history/187714
https://card.weibo.com/article/v3/editor#/history/185531
https://card.weibo.com/article/v3/editor#/history/188021
https://card.weibo.com/article/v3/editor#/history/175465
https://card.weibo.com/article/v3/editor#/history/187712
https://card.weibo.com/article/v3/editor#/history/188523
https://card.weibo.com/article/v3/editor#/history/188120
https://card.weibo.com/article/v3/editor#/history/176032
https://card.weibo.com/article/v3/editor#/history/176073
https://card.weibo.com/article/v3/editor#/history/176022
https://card.weibo.com/article/v3/editor#/history/188239
https://card.weibo.com/article/v3/editor#/history/188643
https://card.weibo.com/article/v3/editor#/history/186373
https://card.weibo.com/article/v3/editor#/history/188251
https://card.weibo.com/article/v3/editor#/history/188665
https://card.weibo.com/article/v3/editor#/history/186385
https://card.weibo.com/article/v3/editor#/history/186508
https://card.weibo.com/article/v3/editor#/history/188788
https://card.weibo.com/article/v3/editor#/history/188382
https://card.weibo.com/article/v3/editor#/history/186627
https://card.weibo.com/article/v3/editor#/history/176292
https://card.weibo.com/article/v3/editor#/history/176523
https://card.weibo.com/article/v3/editor#/history/188817
https://card.weibo.com/article/v3/editor#/history/188818
https://card.weibo.com/article/v3/editor#/history/189232
https://card.weibo.com/article/v3/editor#/history/189237
https://card.weibo.com/article/v3/editor#/history/186919
https://card.weibo.com/article/v3/editor#/history/186921
https://card.weibo.com/article/v3/editor#/history/176408
https://card.weibo.com/article/v3/editor#/history/188683
https://card.weibo.com/article/v3/editor#/history/189175
https://card.weibo.com/article/v3/editor#/history/186813
https://card.weibo.com/article/v3/editor#/history/176522
https://card.weibo.com/article/v3/editor#/history/176562
https://card.weibo.com/article/v3/editor#/history/188886
https://card.weibo.com/article/v3/editor#/history/189283
https://card.weibo.com/article/v3/editor#/history/186984
https://card.weibo.com/article/v3/editor#/history/188906
https://card.weibo.com/article/v3/editor#/history/176578
https://card.weibo.com/article/v3/editor#/history/189299
https://card.weibo.com/article/v3/editor#/history/189300
https://card.weibo.com/article/v3/editor#/history/187004
https://card.weibo.com/article/v3/editor#/history/187005

STL模板特化遇到的问题

typdef 类型 类型名 此语句说明只定义了一个数据类型的新名字而不是定义一种新的数据类型 typdef typename 类型 类型名 加上typename说明定义了一种新的数据类型。 ...
  • LELEFIVE
  • LELEFIVE
  • 2013-09-04 10:03:16
  • 720

转载自http://blog.csdn.net/fei20072050104/article/details/21785565

JavaWeb: 报错信息The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path ...
  • zhaohuiyan9837
  • zhaohuiyan9837
  • 2014-12-11 21:06:53
  • 349

activiti插件(http://blog.csdn.net/y670340559/article/details/77637604)(详见)

  • 2017年08月28日 09:53
  • 11.18MB
  • 下载

例子代码 android http://blog.csdn.net/qq282133/article/details/7616809

  • 2012年05月30日 16:49
  • 151KB
  • 下载

https://blog.csdn.net/u013088062/article/details/50425018

写的非常好,受教了!转自山在岭就在,源文章链接为https://blog.csdn.net/u013088062/article/details/50425018           ...
  • forever_LX
  • forever_LX
  • 2018-04-06 19:10:48
  • 56

https://blog.csdn.net/a746742897/article/details/52413546

https://blog.csdn.net/a746742897/article/details/52413546
  • weixin_38638777
  • weixin_38638777
  • 2018-03-27 14:23:44
  • 34

http://blog.csdn.net/qq_27093465/article/details/52857307

在 IntelliJ IDEA 中这个查看一个类也就是当前类的所有继承关系,包括实现的所有的接口和继承的类, 这个继承,不仅仅是一级的继承关系,包括好几层的继承。父类的父类的父类。直到最后。 ...
  • u010935342
  • u010935342
  • 2017-05-09 14:16:53
  • 278

芋道源码的周八(2018.01.28)

1. 推荐文章2. 公众号文章3. 知识星球文章1. 推荐文章笔者在地铁有阅读公众号技术文章的习惯。给时间一点时间,给努力一点努力。《JVM堆外内存如何被回收,你知道么?》《NIO进阶之路,必须埋的坑...
  • X5fnncxzq4
  • X5fnncxzq4
  • 2018-01-28 00:00:00
  • 47

预测房子大小的数据http://blog.csdn.net/hlx371240/article/details/39724869

  • 2014年10月02日 11:16
  • 661B
  • 下载

Android ActionBar完全解析(转载 http://blog.csdn.net/guolin_blog/article/details/18234477)

转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/18234477 本篇文章主要内容来自于Android Doc,我翻译之...
  • qq_16760985
  • qq_16760985
  • 2014-12-03 14:32:50
  • 898
收藏助手
不良信息举报
您举报文章:angular中使用echart遇到的获取容器高度异常的问题记录https://blog.csdn.net/shunfa888/article/details/79840631
举报原因:
原因补充:

(最多只允许输入30个字)