Vue引入echarts报错Error in mounted hook: “TypeError: Cannot read property ‘getAttribute‘ of null“

问题出现场景

  今天在vue中引入echarts时，运行报错 
   [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'getAttribute' of null】
   
   ## 问题排查
   在运行Vue项目时出现了上述错误，出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的，代码如下：

 var myChart = echarts.init(this.$refs.map)
      myChart.setOption(this.mapOption)

  ## 解决办法
  利用Vue中的ref和$refs 来代替document.getElementById（）获取该图形容器对象，代码如下：

<template>
  <div>
    <baidu-map class="bm-view" center="北京">
    </baidu-map>
    <div ref="mapOption" style="height:600px;width:600px;background: #333" ></div>
  </div>
</template>

<script>
import 'echarts/map/js/province/guangdong.js' // 引入广东地图
export default {
   
  data () {
   
    return {
   
      mapOption: {
   
        title: {
   
          text: '订阅我博客的人群分布',
          x: 'center'
        },
        tooltip: {
   
          trigger: 'item'
        },
        legend: {
   
          orient: 'vertical',
          x: 'left',
          data: ['iphoneX']
        },
        dataRange: {
   
          min: 0,
          max: 2500,
          x: 'left',
          y: 'bottom',
          text: ['max', 'min'