Vue页面多次渲染echarts封装的组件但只出现一个

原因分析
首先我们要知道echart实例的创建方式
通过获取div的id从而初始化echarts的实例，所以进行渲染时，两个div的id相同从而导致只能渲染出来一个图形

<div id="liquidFill" style="width:100%; height: 300px;"></div>
var myChart = echarts.init(document.getElementById("liquidFill"))

解决方案
上面已经得出了 因为id相同导致渲染不出来的 原因，所以经过验证有目前我想出了方案：

1.切换为ref获取元素
dom只有一个id，所以会出现覆盖的情况。我们需要把id改为通过ref获取到组件

<div ref="echarts" style="width:300px; height: 300px;"></div>
var myChart = echarts.init(this.$refs.echarts)

使用ref我们就不需要获取DOM结点了。$ref如果注册在元素上，它指向的就是DOM元素，如果注册在组件上，他指向的就是组件的实例。