解决vue封装的echarts组件多次调用出现id重复问题

问题描述
封装的echarts组件多次被调用，id重复，导致页面不渲染，数据覆盖等一系列问题，id从父页面传入也达不到我要的效果

解决方法
干掉id，使用ref

//修改前
<div class=”component”>
<div class=”WH” id=”chart”></div>
</div>
//修改后
<div class=”component”>
<div class=”WH” ref=”chart”></div>
</div>
 
初始化调用时，document.getElementById(‘xxx’) 改成 this.$refs.xxx

//修改前
let myChart = this.$echarts.init(document.getElementById(el));
//修改后
let myChart = this.$echarts.init(this.$refs.chart);
 
然后就可以重复使用了, aqiData是我传给子组件的数据

<div class=”width flex1″>
<BubbleChart v-if=”isShowAqiBubble” :seriesData=”aqiData”></BubbleChart>
</div>
<div class=”width flex1″>
<BubbleChart v-if=”isShowAqiBubble” :seriesData=”aqiData”></BubbleChart>
</div>
————————————————
版权声明：本文为CSDN博主「songywaa」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42288182/article/details/113945775