Echarts图表在VUE项目中使用动态数据源

动态数据源问题:目前我使用的方法是当后台查询到数据时,直接传递给option中的对应data内;this

例如柱状图,能够直接将x轴数据注入到 this.option.xAxis.data 中,如spa

this.option.xAxis.data.push(res.result[i].属性)

其中括号内为获取的要注入的值,该条语句直接放置在循环中,将结果中的数据所有注入。code

y轴数据也能够采用相应的方式注入到 this.option.series.data 中,当y轴数据有多个时,能够采用以下方法:blog

this.option.series[0].data.push(res.result[i].属性1)
this.option.series[1].data.push(res,result[i].属性2)

其余图形种类思路相似。io

以上。class

目前采用的是这种方法而未采用 setOption 方法的形式,利用VUE对于数据刷新方面的特性。功能已经成功实现。若是有什么不足或者错误之处,还请见谅并指出。后台

相关文章
相关标签/搜索