vue封装的echarts组件被同一个页面多次引用无法正常显示问题

当我们在封装了echarts组件之后，需要在同一个页面中引入多次时，会出现数据覆盖等一系列问题
当时我是修改了id也无济于事，达不到我需要的效果
解决方案
其实很简单，修改一点就好了，将我们封装的组件中的id选择器删掉，换成ref，下面是组件修改部分

<template>
  <div>
    <div class="echarts my-echarts" ref="echarts"></div>
  </div>
</template>

初始化时我们将

   this.charts = echarts.init(document.getElementById(echarts));

更改为

   this.charts = echarts.init(this.$refs.echarts);

然后就可以在页面中重复引入

原文链接：(8条消息) vue封装的echarts组件多次被同一个页面调用出现的问题_LisaWwwang的博客-CSDN博客_vue一个页面调用多次组件