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

问题

  在使用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

阅读更多
上一篇拿来主义:layPage分页插件的使用https://blog.csdn.net/shunfa888/article/details/79946234
下一篇iOS之AFSecurityPolicy
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭