解决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>

亲测可用，👍
原文链接