Vue中使用ref

<template>
  <div class="fans-container">
    <!-- 1. 为 ECharts 准备一个具备大小（宽高）的画布容器 DOM -->
    <div ref="main" style="width: 600px;height:400px;"></div>
 </div>
</template>

<script>
// 2. 加载 echarts
import echarts from 'echarts'

// 3. 基于准备好的dom，初始化echarts实例
<!-- 通过document.getEImenentById("")操作dom
<!-- var myChart = echarts.init(document.getEImenentById("main")) -->
<!-- 通过this.refs操作dom -->
var myChart = echarts.init(this.$refs.main) 

Vue中使用ref的好处：他们获取dom节点的功能是一样的，但使用$ref会减少获取dom节点的消耗。