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，所以会出现覆盖的情况。我们