Vue動態(tài)加載ECharts圖表數據的方式
vue動態(tài)加載ECharts圖表數據
剛接觸echarts只是知道他能輔助前端做數據展示，但是他的demo數據都是寫死的，而正常數據都是通過axios請求服務器動態(tài)填充獲取的啊，為此還一頓研究.....（真是傻了）。
因為它本身是很簡單的，echarts就是通過option進行無腦堆疊的，option本身就是json，你可以隨意設置，設置好了之后重新刷新就行了啊。
下面簡單說一下我的程序吧。
動態(tài)數據基本分三步：
- ①在data中定義空的option：{}
- ②在created中為option圖表設置賦值（數據項可為null）
- ③mounted中setoption展示圖表的同時為option數據賦值（series中data數據賦值，legend圖例數據賦值等）
具體請看下面
1.引入圖表
引入常用的條形柱狀圖和南丁格爾扇形圖。
2.數據更改為動態(tài)獲取
首先在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了，但是數據還沒有傳進去，所以下一步就是動態(tài)填充數據，這里我再data中模擬axios獲取的數據【以扇形南丁格爾圖說明】
之后在method中定義一個方法，為之前的option中的數據進行填充，因為此前option中涉及的數組都是空的。
之后再mounted中掛載數據。
mounted掛載時候將獲取的數據傳給option中的數據就萬事大吉了??！
之后如果有新數據來了，就可以btnRefreshNanding方法就ok了，其本質還是重新setoption是
this.chartPie.setOption(this.optionNanding);
3.效果圖
動態(tài)填充數據總覽頁
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Vue打包優(yōu)化之生產環(huán)境刪除console日志配置
這篇文章主要為大家介紹了Vue打包優(yōu)化之生產環(huán)境刪除console日志配置詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
Vue Router是Vue提供的路由管理器,將組件與路由一一對應起來,這種對應關系就路由,這篇文章主要介紹了Vue中vue-router路由使用,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了vue 中的 render 函數作用，通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了Element實現表格分頁數據選擇+全選所有完善批量操作，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-06-06
本文主要介紹了vue中table表頭單元格合并(附單行、多級表頭代碼)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
這篇文章主要給大家介紹了關于如何使用寶塔部署Vue項目的相關資料,寶塔面板提供了非常方便的方式來部署 Vue 項目,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-08-08
React和Vue在響應式機制上各有特點：Vue通過Proxy或Object.defineProperty自動追蹤依賴,支持細粒度更新；React基于不可變數據,通過setState顯式觸發(fā)更新,依賴虛擬DOM的Diff算法批量更新,Vue強調聲明式和自動優(yōu)化,React強調函數式編程和顯式控制2025-02-02
vue是法語中視圖的意思，Vue.js是一個輕巧、高性能、可組件化的MVVM庫，同時擁有非常容易上手的API。這篇文章主要介紹了Vue.js快速入門實例教程的相關資料,需要的朋友可以參考下2016-10-10
這篇文章主要給大家介紹了關于VUE如何利用vue-print-nb實現打印功能的相關資料,文中還給大家介紹了vue-print-nb使用中的常見問題，如空白頁,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了Python合成Excel表的實現代碼（多sheet）,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04