【前端可視化】Echarts 報錯:[Vue warn]: Error in mount hook: “TypeError: Cannot read properties of null (reading ‘getAttribute‘)


錯誤原因

出現該錯誤的原因是Echarts的圖形容器還未生成就對其進行了初始化,

利用Vue中的ref和$refs 來代替document.getElementById()獲取該圖形容器對象

<div id="mian" ref="chart" ></div>
....
var myChart = this.$echarts.init(this.$refs.chart);

在el-dialog對話框中展示Echarts圖表時,出現了如上錯誤

通過$refs獲取不到 el-dialog對話框中的子組件對象,返回的都是undefined,這也就導致了上圖的錯誤。

解決辦法:

在通過this.$refs 獲取el-dialog對話框中的子組件對象之前加入以下函數即可:

    this.$nextTick(() => {
      this.setEcharts()
    })

在dialog框生成后再去初始化echarts

參考鏈接

[Vue warn]: Error in mount hook: “TypeError: Cannot read properties of null (reading ‘getAttribute‘)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM