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

親測可用，👍
原文鏈接