vue動態生成多個Echarts圖表


1.動態循環id

<div v-for="(item,index) in chartList" :key="index">
  <div :id="`chart${index}`"></div>
</div>

2.js部分

this.chartList = res.data.data.chartList;//從后台獲取數據
if (this.chartList.length > 0) {
  this.$nextTick(() => {
    this.initChart()
  })
}
initChart() {
    this.chartList.forEach((val, index) => {
      const myChart = this.$echarts.init( document.getElementById(`chart${index}`))
      //注意this.chartList[index]這是我們后台拼好數據直接set就行了
      myChart.setOption(this.chartList[index])
    })
  }
},

參考於:https://www.jianshu.com/p/a7af5814efd9


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM