[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'getAttribute' of null" - 好文

错误场景一：

错误提示：

在运行Vue项目时出现了上述错误，出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的，代码如下：
// 基于准备好的dom，初始化echarts实例 var bar_dv = document.getElementById('bar_dv'); let
myChart = this.$echarts.init(bar_dv)
解决办法：

1、利用Vue中的ref和$refs 来代替document.getElementById（）获取该图形容器对象，代码如下：
<template> <div id="bar_dv" ref="chart" > </div> </template> <script> /*默认数据*/
const DEFAULT_DATA = { xAxisData: ["重庆", "西安", "福州", "杭州", "长沙", "南昌"],
yAxisData: [43, 41.8, 41.7, 41.6, 40.6, 40.6], }; export default { name:
'EHistogram', /*接收外部传入一个label变量*/ props: ['label', 'itemColor',
'backgroundColor', 'itemDataType', 'xAxisName', 'yAxisName', 'eventType'],
data() { return { msg: 'Welcome to Your Vue.js App', } }, mounted() {
this.drawLine(); }, methods: { drawLine() { // 基于准备好的dom，初始化echarts实例 //var
bar_dv = document.getElementById('bar_dv'); var bar_dv = this.$refs.chart; if
(bar_dv){ console.log('bar_dv不为空'); let myChart = this.$echarts.init(bar_dv) //
绘制图表 '火炉省会城市极端高温对比' myChart.setOption({ title: {text: this.label}, color:
[this.itemColor], backgroundColor: [this.backgroundColor], tooltip: {}, xAxis:
{ name: this.xAxisName, data: DEFAULT_DATA.xAxisData, nameTextStyle: {
fontSize: 14, fontWeight: 'bolder' } }, yAxis: { name: this.yAxisName,
nameTextStyle: { fontSize: 14, fontWeight: 'bolder' } }, series: [{ name:
this.itemDataType, type: 'bar', data: DEFAULT_DATA.yAxisData, }] });
console.log("this.eventType:" + this.eventType); myChart.on(this.eventType,
function (params) { window.open('https://www.baidu.com/s?wd=' +
encodeURIComponent(params.name)); }); }else { console.log('bar_dv为空!'); } } },
} </script> <style scoped> </style>
到此为止该问题就算解决了，如果觉得还可以点个赞哦！

错误场景二：

当我想在el-dialog对话框中展示Echarts图表时，出现了如下错误：

问题定位：

经过反复的调试后发现，通过$refs获取不到 el-dialog对话框中的子组件对象，返回的都是undefined，这也就导致了上图的错误。

解决办法：

在通过this.$refs 获取el-dialog对话框中的子组件对象之前加入以下函数即可：
this.$nextTick(function () { });

全部代码如下：
<template> <el-dialog ref="dialog_root" title="节点指标" :visible="isShowDialog"
@close="hideData()" width="60%">  <div ref="bar_dv"
:style="{width:'600px',height:'400px'}"> </div> </el-dialog> </template>
<script> import echarts from 'echarts' export default { name:
"NodeIndexDialog", props: { isShowDialog: { type: Boolean, default: false, },
}, mounted(){ console.log('mounted()'); this.$nextTick(function () {
this.drawLine(); }); }, methods:{ /* 负载情况图标 */ drawLine(){ let bar_dv =
this.$refs.bar_dv; let myChart = echarts.init(bar_dv); // 绘制图表
myChart.setOption({ title: { text: '在Vue中使用echarts' }, tooltip: {}, xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量',
type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }); }, hideData() {
this.$emit("hideDialog") }, confirm(){ this.hideData(); }, } } </script> <style
scoped> </style>

效果图：

热门工具换一换