剛接觸echarts只是知道他能輔助前端做數(shù)據(jù)展示，但是他的demo數(shù)據(jù)都是寫死的，而正常數(shù)據(jù)都是通過axios請(qǐng)求服務(wù)器動(dòng)態(tài)填充獲取的啊，為此還一頓研究.....（真是傻了）。因?yàn)樗旧硎呛芎?jiǎn)單的，echarts就是通過option進(jìn)行無腦堆疊的，option本身就是json，你可以隨意設(shè)置，設(shè)置好了之后重新刷新就行了啊。。。。。。。。。。下面簡(jiǎn)單說一下我的程序吧。

---

?動(dòng)態(tài)數(shù)據(jù)基本分三步：

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

②在created中為option圖表設(shè)置賦值（數(shù)據(jù)項(xiàng)可為null）

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

具體請(qǐng)看下面

目錄

1.引入圖表

2.數(shù)據(jù)更改為動(dòng)態(tài)獲取

3.效果圖--動(dòng)態(tài)填充數(shù)據(jù)總覽頁

---

1.引入圖表

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

2.數(shù)據(jù)更改為動(dòng)態(tài)獲取

首先在data中定義一個(gè)option選項(xiàng)，用來設(shè)置echarts所有配置項(xiàng)，這里先讓他為空json，隨后在create中對(duì)其進(jìn)行賦值。

之后在created鉤子函數(shù)中對(duì)option設(shè)置項(xiàng)進(jìn)行賦值，也就是dom元素還沒有掛載的時(shí)候就填充設(shè)置項(xiàng)及數(shù)據(jù)（里面的series），到這里你data中的option就已經(jīng)賦值了。

option如何設(shè)置很無腦（真的很方便），可以直接參考echarts官網(wǎng)：

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

之后就是關(guān)鍵的setOption了,使用剛指定的配置項(xiàng)和數(shù)據(jù)，顯示圖表。這里我完全定義成一個(gè)方法了。方便多處調(diào)用【mounted初始化，新數(shù)據(jù)刷新等】。

option設(shè)置項(xiàng)ok了，但是數(shù)據(jù)還沒有傳進(jìn)去，所以下一步就是動(dòng)態(tài)填充數(shù)據(jù)，這里我再data中模擬axios獲取的數(shù)據(jù)【以扇形南丁格爾圖說明】

之后在method中定義一個(gè)方法，為之前的option中的數(shù)據(jù)進(jìn)行填充，因?yàn)榇饲皁ption中涉及的數(shù)組都是空的。之后再mounted中掛載數(shù)據(jù)。

mounted掛載時(shí)候?qū)@取的數(shù)據(jù)傳給option中的數(shù)據(jù)就萬事大吉了！！

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

3.效果圖--動(dòng)態(tài)填充數(shù)據(jù)總覽頁

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。