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

╰+哭是因爲堅強的太久メ 2022-05-15 08:09 300阅读 0赞

### 错误场景一： ###

错误提示：

![70][]

在运行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图表时，出现了如下错误：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzY2MjY5_size_16_color_FFFFFF_t_70][]

问题定位：

经过反复的调试后发现，通过$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>

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzY2MjY5_size_16_color_FFFFFF_t_70 1][]

更多技术请关注QQ群：636212586

![20190620103134956.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzY2MjY5_size_16_color_FFFFFF_t_70 2][]

[70]: /images/20220515/8fc123ffbb0d44d7a30b2c16585c452e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzY2MjY5_size_16_color_FFFFFF_t_70]: /images/20220515/058edb5065da412bbe2891e0271085cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzY2MjY5_size_16_color_FFFFFF_t_70 1]: /images/20220515/d427687a48384c2cadbf321c15719377.png
[20190620103134956.png]: /images/20220515/5c383257dc8c4a7f920edc88ffd6f301.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzY2MjY5_size_16_color_FFFFFF_t_70 2]: /images/20220515/c486eade8b874f3f8a567ec1b11baef7.png