angular中使用echart遇到的获取容器高度异常的问…
2018-06-24 01:54:53来源：未知 阅读 ()
问题
在使用echart去创建图表时，发现图表只占了容器的一个角落，如图，并没有充满容器。
第一反应是容器元素的样式有问题，于是我把容器的宽高都改为px指定的(之前是百分比设定的，查询资料发现说echart容器宽高要明确指定)，修改之后，还是和上面一样的展示，依旧有问题。
定位
于是我想是不是渲染图表时，获取到的容器元素的高度有问题，代码中我是在ngAfterViewInit()生命周期中渲染的图表，先打印出元素高度看看
ngAfterViewInit() { console.log(document.getElementById('usertotal').clientHeight); this.initChart('usertotal'); }
发现元素此时的高度为27，果然有问题
于是打印出各个生命周期中获取的元素高度，再第二次ContentChecked之后才会获取都正确的高度，但是ContentChecked在每次内容变更检测之后都会调用，用来初始化地图肯定不合适
解决
在ngAfterViewInit中延时再初始化地图，加入延时之后，发现获取到了预期的高度
其实setTimeOut设置的延时为 0 ，只是将获取高度放在了事件队列中，等主线程的任务执行完了再获取高度，此时就获得到了正确的高度，肯定可以正确初始化地图
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
下一篇：数组去除重复的几个方法
- 关于jQuery UI 使用心得及技巧 2020-03-29
- js中去掉字串左右空格 2020-03-20
- Js中如何使用sort() 2020-03-18
- 使用JS在浏览器中判断当前网络连接状态的几种方法 2020-03-12
- 在JavaScript中尽可能使用局部变量的原因 2020-03-08
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
