vue動態(tài)加載ECharts圖表數(shù)據(jù)

剛接觸echarts只是知道他能輔助前端做數(shù)據(jù)展示，但是他的demo數(shù)據(jù)都是寫死的，而正常數(shù)據(jù)都是通過axios請求服務(wù)器動態(tài)填充獲取的啊，為此還一頓研究.....（真是傻了）。

因?yàn)樗旧硎呛芎唵蔚?，echarts就是通過option進(jìn)行無腦堆疊的，option本身就是json，你可以隨意設(shè)置，設(shè)置好了之后重新刷新就行了啊。

下面簡單說一下我的程序吧。

 動態(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ù)賦值等）

具體請看下面

1.引入圖表

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

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

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

之后在created鉤子函數(shù)中對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)去，所以下一步就是動態(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.效果圖

動態(tài)填充數(shù)據(jù)總覽頁

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評論