问题：问题的主要原因是在mounted中无法获取到dom元素

<template>
  <div>
    <div ref="echarts"></div>
  </div>
</template>

<script>
  export default {
    mounted () {
      console.log(this.$$refs.echarts);  // undefined
    },
  }
</script>

知道了问题在哪里，那就从根源下手：这是因为某些因素使得在mounted中还并没有生成dom，所以结果自然就是undefined，那怎样才能获取到这个dom元素？

解决方法1（完美解决+超简单）：直接把初始化方法写在updated生命周期中

    methods: {
      initEcharts() {
        echarts.init(this.$refs.echarts).setOption(option);
      }
    },
    updated() {
      this.initEcharts();
    }

 解决方法2（完美解决+复杂）：使用自定义指令

我们自己设置一个自定义属性，去监测dom是什么时候生成的，在dom生成的时候立刻将echarts渲染到页面上。这个方法完美解决了加定时器有延时的缺点。

<template>
  <div>
    <div ref="echarts" v-init="option"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
  export default {
    data() {
      return {
        option: {
          title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
        }
      }
    },
    directives: {
      init: {
        // inserted: 在dom元素成功插入父节点时的钩子函数
        inserted(el, binding) {
          echarts.init(el).setOption(binding.value);
        }
      }
    },
  }
</script>

解决方法3（有缺陷+超简单）：在初始化方法外面套一层定时器

在初始化方法外面套一层定时器：等dom生成了之后我们再去获取这个dom元素

    methods: {
      initEcharts() {
        echarts.init(this.$refs.echarts).setOption(option);
      }
    },
    mounted () {
      setTimeout(() => {
        this.initEcharts();
      }, 500)
    },

这个方法有一个很大的缺点，就是我们要自己去设置定时器的时间，就有可能会造成页面的渲染和echarts的渲染不同步，页面显示出来了之后echarts可能要过一会儿才会出现。