剛接觸echarts只是知道他能輔助前端做數據展示，但是他的demo數據都是寫死的，而正常數據都是通過axios請求服務器動態填充獲取的啊，為此還一頓研究.....（真是傻了）。因為它本身是很簡單的，echarts就是通過option進行無腦堆疊的，option本身就是json，你可以隨意設置，設置好了之后重新刷新就行了啊。。。。。。。。。。下面簡單說一下我的程序吧。

---

?動態數據基本分三步：

①在data中定義空的option：{}

②在created中為option圖表設置賦值（數據項可為null）

③mounted中setoption展示圖表的同時為option數據賦值（series中data數據賦值，legend圖例數據賦值等）

具體請看下面

目錄

1.引入圖表

2.數據更改為動態獲取

3.效果圖--動態填充數據總覽頁

---

1.引入圖表

引入常用的條形柱狀圖和南丁格爾扇形圖。

2.數據更改為動態獲取

首先在data中定義一個option選項，用來設置echarts所有配置項，這里先讓他為空json，隨后在create中對其進行賦值。

之后在created鉤子函數中對option設置項進行賦值，也就是dom元素還沒有掛載的時候就填充設置項及數據（里面的series），到這里你data中的option就已經賦值了。

option如何設置很無腦（真的很方便），可以直接參考echarts官網：

https://echarts.apache.org/examples/zh/index.html#chart-type-bar

之后就是關鍵的setOption了,使用剛指定的配置項和數據，顯示圖表。這里我完全定義成一個方法了。方便多處調用【mounted初始化，新數據刷新等】。

option設置項ok了，但是數據還沒有傳進去，所以下一步就是動態填充數據，這里我再data中模擬axios獲取的數據【以扇形南丁格爾圖說明】

之后在method中定義一個方法，為之前的option中的數據進行填充，因為此前option中涉及的數組都是空的。之后再mounted中掛載數據。

mounted掛載時候將獲取的數據傳給option中的數據就萬事大吉了！！

之后如果有新數據來了，就可以btnRefreshNanding方法就ok了，其本質還是重新setoption是?this.chartPie.setOption(this.optionNanding);

3.效果圖--動態填充數據總覽頁

總結

以上是生活随笔為你收集整理的Vue动态加载ECharts图表数据小结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。