概述
1 . 先在视图代码里插入echats图的节点
<div v-for="(item,index) in chartList" :key="index">
<div :id="`chart${index}`"></div>
</div>
2 收取数据，创建echats图和相关配置
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中动态生成多个echats图的全部内容，希望文章能够帮你解决vue中动态生成多个echats图所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复