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對於數據刷新方面的特性。功能已經成功實現。如果有什么不足或者錯誤之處,還請見諒並指出。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM