Vue中Echarts组件复用时，因为id唯一而只生效一个的解决办法【已解决】

项目中封装了echart组件，想重复使用echart图表。项目开始使用id进行echart图表初始化，发现多次调用同一个组件出现id重复，导致组件只能使用一次得问题。

解决方法：

将id改为ref即可。

原始子组件代码：

<template>
    <div class="liquid">
        <div id="container"></div>
    </div>
</template>

<script>
    method:{
        this.chart = this.$echarts.init(document.getElementById("container"));
    }
</script>

修改后子组件代码：

<template>
    <div class="liquid">
        <div id="container" ref="container" ></div>
    </div>
</template>

<script>
    method: {
        this.chart = this.$echarts.init(this.$refs.container);
    }
</script>

效果如下：