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

<!---->
<template>
  <div style="width: 95%;height: 82%;position: absolute">
    <div id="checkOnWork" ref="checkOnWork" style="width: 100%;height: 100%;background: white"></div>
  </div>
</template>
<script>
  import { getDataLevelUserLoginNew, getDataLevelUserLogin } from '@/axios/axios'
  import { isSuccess } from '@/lib/util'
  export default {
    name: 'demo',
    data() {
      return {}
    },
    mounted() {
      this.getData()
    },
    methods: {
      getData() {
        const t = this
        const data = {}
        data._mt = 'aShiftRecordAnsrpt.getShiftMonthAnsrpt'
        data.funId = '1'
        data.logType = '考勤 - 公司'
        getDataLevelUserLogin(data).then((res) => {
          if (isSuccess(res, t)) {
            if (res.data.content[0].hasOwnProperty('value')) {
              let data1 = JSON.parse(res.data.content[0].value)
              let dataX = []
              let dataY = []
              data1.forEach((item, index) => {
                dataX.push(item.shiftType)
                dataY.push(item.shiftCount)
              })
              this.getEchatsPies(dataX, dataY)
            }
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      getEchatsPies(dataX, dataY) {
        let checkOnWork = this.$echarts.init(document.getElementById('checkOnWork'))
        checkOnWork.setOption({
          legend: {
            orient: 'horizontal',
            type: 'plain',
            right: 30,
            top: 0,
            data: ['绩效分析'],
          },
          grid: {
            top: '20%',
            left: '3%',
            right: '10%',
            bottom: '3%',
            containLabel: true,
          },
          // 提示框
          tooltip: {
            trigger: 'axis',
          },
          color: ['#f5d55d'],
          xAxis: {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#dea7f9',
              },
            },
            // 设置X轴数据旋转倾斜
            axisLabel: {
              rotate: 30,
              interval: 0,
            },
            boundaryGap: false,
            data: dataX,
          },

          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#90e0cf',
              },
            },
          },

          series: [
            {
              name: '员工考勤',
              data: dataY,
              type: 'line',
              // 设置小圆点消失
              // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
              symbol: 'none',
              // 设置折线弧度，取值：0-1之间
              smooth: 0.5,
              areaStyle: {},
            },
          ],
        })
      },
    },
  }
</script>

错误提示：

在运行Vue项目时出现了上述错误，出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的，代码如上：

本身echats可以正常显示 但是由于axios得catch抛出了上图得异常
为了解决这个问题我就在调取 this.getEchatsPies(dataX, dataY)
加了 this.$nextTick(() => {});

             t.$nextTick(() => {
                this.getEchatsPies(dataX, dataY)
              });

加完之后发现catch不在抛出异常 但是控制台还是会报错

为了解决这个 我把 用js获取元素得

document.getElementById('checkOnWork')

改为用Vue中自带得ref属性进行获取

this.$refs.checkOnWork

最终

let checkOnWork = this.$echarts.init(document.getElementById('checkOnWork'))

这样就完美的解决了报错得问题