【前端可视化】Echarts 报错：[Vue warn]: Error in mount hook: “TypeError: Cannot read properties of null (readi...

错误原因

出现该错误的原因是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‘)