1. 程式人生 > >angular中使用echart遇到的獲取容器高度異常的問題記錄

angular中使用echart遇到的獲取容器高度異常的問題記錄

IE 樣式 ntc 寬高 ini 初始化 ont div 查詢

問題

  在使用echart去創建圖表時,發現圖表只占了容器的一個角落,如圖,並沒有充滿容器。

技術分享圖片

  第一反應是容器元素的樣式有問題,於是我把容器的寬高都改為px指定的(之前是百分比設定的,查詢資料發現說echart容器寬高要明確指定),修改之後,還是和上面一樣的展示,依舊有問題。

定位

  於是我想是不是渲染圖表時,獲取到的容器元素的高度有問題,代碼中我是在ngAfterViewInit()生命周期中渲染的圖表,先打印出元素高度看看

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

  發現元素此時的高度為27,果然有問題

技術分享圖片

  於是打印出各個生命周期中獲取的元素高度,再第二次ContentChecked之後才會獲取都正確的高度,但是ContentChecked在每次內容變更檢測之後都會調用,用來初始化地圖肯定不合適技術分享圖片

解決

  在ngAfterViewInit中延時再初始化地圖,加入延時之後,發現獲取到了預期的高度

技術分享圖片

  其實setTimeOut設置的延時為 0 ,只是將獲取高度放在了事件隊列中,等主線程的任務執行完了再獲取高度,此時就獲得到了正確的高度,肯定可以正確初始化地圖

技術分享圖片

angular中使用echart遇到的獲取容器高度異常的問題記錄