vue动态生成多个Echarts图表
2020-09-03 本文已影响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])
})
}
},