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

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

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

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

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

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

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

其他图形种类思路类似。

以上。

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

posted @ 2019-09-17 11:02  丿流年  阅读(4783)  评论(2编辑  收藏  举报
TOP