美文网首页
vue动态生成多个Echarts图表

vue动态生成多个Echarts图表

作者: 子语喵 | 来源:发表于2020-09-03 16:43 被阅读0次

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])
    })
  }
},

相关文章

网友评论

      本文标题:vue动态生成多个Echarts图表

      本文链接:https://www.haomeiwen.com/subject/cslosktx.html