Vue動態生成多個Echarts圖表

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 方法包裹數組,會出現循環引用錯誤

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 前端開發面試題 面試題目: 根據你的等級和職位的變化,入門級到專家級,廣度和深度都會有所增加。 題目類型: 理論知...
    怡寶丶閱讀 2,606評論 0 7
  • 33、JS中的本地存儲 把一些信息存儲在當前瀏覽器指定域下的某一個地方(存儲到物理硬盤中)1、不能跨瀏覽器傳輸:在...
    萌妹撒閱讀 2,098評論 0 2
  • https://nodejs.org/api/documentation.html 工具模塊 Assert 測試 ...
    KeKeMars閱讀 6,376評論 0 6
  • 個人筆記, 轉載請注明轉載自 szhshp的第三邊境研究所 Refs and the DOM In the t...
    szhielelp閱讀 1,501評論 0 1
  • 前端開發面試知識點大綱: HTML&CSS: 對Web標準的理解、瀏覽器內核差異、兼容性、hack、CSS基本功:...
    秀才JaneBook閱讀 2,458評論 0 25