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

posted @ 2022-03-12 10:53  努力挣钱的小鑫  阅读(2964)  评论(0编辑  收藏  举报