html
<div class="chart-dis-area">
<div v-for="(item,index) in chartList" class="chart-item-area">
<div class="echarts" :id="item.id"></div>
</div>
</div>
JS
默認 chartList 是一個空數組
init() {
let arr = [];
for(let i = 0; i < 6; i++) {
let item = {
barChart: '', // chart 對象實例
id: 'id' + i, // 為了標示 id 不同
}
arr.push(item);
}
this.chartList = arr;
this.$nextTick(() => {
for(let i = 0; i < this.chartList.length; i++) {
this.chartList[i].barChart = echarts.init(document.getElementById(this.chartList[i].id));
}
this.getListData(); // 請求網絡獲取數據
})
}
tips:這里有幾個注意點。1 不能用 $refs 因為它不是響應式賦值,如果使用 ref 會出現 getAttribute undefined 錯誤。2 如果想要打印日志查看輸出,在 nextTick 中不能使用 JSON.stringify 方法包裹數組,會出現循環引用錯誤