【前端可视化】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