快捷導(dǎo)航

Vue動(dòng)態(tài)加載ECharts圖表數(shù)據(jù)的方式

更新時(shí)間：2023年07月01日 09:10:22 作者：韋_恩

這篇文章主要介紹了Vue動(dòng)態(tài)加載ECharts圖表數(shù)據(jù)的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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

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

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

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

動(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)看下面

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

首先在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)：

之后就是關(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);

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

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

您可能感興趣的文章: