vue使用echarts時created里拿到的數(shù)據(jù)無法渲染的解決
使用echarts時created里拿到的數(shù)據(jù)無法渲染
問題描述
在vue里使用echart時，created里請求的數(shù)據(jù)，但是卻無法渲染；
代碼如下：
//created里獲取數(shù)據(jù)
async created() {
const res = await this.$http.get('reports/type/1')
this.option.legend.data = res.data.data.series.map((item) => item.name)
console.log('created' + this.option.legend.data)
},
//mounted里渲染echart表格
mounted() {
let myChart = this.$echarts.init(this.$refs.myEchart)
this.option && myChart.setOption(this.option)
},
原因分析
通過vue插件調(diào)試，數(shù)據(jù)確實已經(jīng)拿到了，但是卻無法渲染，數(shù)據(jù)拿到，但是無法渲染，推斷應該是執(zhí)行順序出了問題，獲取的數(shù)據(jù)在渲染之后才拿到的。 初步懷疑是await的問題，加入驗證代碼測試一下：
async created() {
const res = await this.$http.get('reports/type/1')
this.option.legend.data = res.data.data.series.map((item) => item.name)
//打印1
console.log(1)
},
mounted() {
let myChart = this.$echarts.init(this.$refs.myEchart)
this.option && myChart.setOption(this.option)
//打印2
console.log(2)
},
神奇的一幕出現(xiàn)了，果然和我們想的一樣：先執(zhí)行了mounted()里的函數(shù)
mounted()為什么會打印在created()前面呢？
讓我們來了解一下async/await ：await會阻塞其所在表達式中后續(xù)表達式的執(zhí)行(在和await在同一函數(shù)內(nèi)但在await后面的代碼會被阻塞，形成類似微任務的存在)，但是不會阻礙外部函數(shù)的執(zhí)行??！
結(jié)論：await阻礙了同函數(shù)內(nèi)的代碼，整個created函數(shù)執(zhí)行變慢（相當于變成異步），所以mounted先執(zhí)行，導致數(shù)據(jù)無法獲?。?/p>
解決措施
將請求放在mounted里
//正確代碼
async mounted() {
//獲取數(shù)據(jù)
const res = await this.$http.get('reports/type/1')
this.option.legend.data = res.data.data.series.map((item) => item.name)
this.option.series = res.data.data.series
//渲染
let myChart = this.$echarts.init(this.$refs.myEchart)
this.option && myChart.setOption(this.option)
},
echarts報錯Cannot read property ‘getAttribute‘ of undefined
今天在查看項目時，發(fā)現(xiàn)控制臺莫名報錯，Cannot read property 'getAttribute' of undefined
通過查看，問題定位在這一行，也就是echarts初始化的時候:
const chart = echarts.init(this.$refs['chart']);
結(jié)合報錯信息可以得知，錯誤原因是因為沒獲取到dom屬性。
在vue中獲取不到dom一般分為兩種情況，一是在created中獲取，這個時候只是創(chuàng)建了vue實例，dom并沒有開始渲染。所以自然拿不到，如果你是在created中初始化echarts，那么你只需要把初始化的方法放到mounted中執(zhí)行，因為mounted是dom掛載完成的生命周期。這時候順理成章就可以取到dom。
另外一種情況就是v-if導致dom沒有渲染，接下來咱們看一下html部分:
<div style="width: 100%; height: 500px"> ? ? <!-- 暫無數(shù)據(jù)/加載中組件 --> ? ? <tableLoading border? ? ? ? ? v-if="!conditionBoxLoading && hostAgentNameList.length === 1"> ? ? </tableLoading> ? ? <!-- echarts --> ? ? <div ref="chart" style="width: 100%; height: 500px" v-else > ? ? </div> </div>
只需要將v-if / v-else改成v-show就可以了，因為v-if是條件判斷是否渲染，v-show是是否顯示，所以使用v-show的話即便dom被隱藏，它依然是已經(jīng)創(chuàng)建完成了，可以獲取到。解決方法如下:
<div style="width: 100%; height: 500px"> ? ? <!-- 暫無數(shù)據(jù)/加載中組件 --> ? ? <tableLoading border? ? ? ? ? v-show="!conditionBoxLoading && hostAgentNameList.length === 1"> ? ? </tableLoading> ? ? <!-- echarts --> ? ? <div ref="chart" style="width: 100%; height: 500px"? ? ? ? ? v-show="hostAgentNameList.length > 1" > ? ? </div> </div>
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
如何通過URL來實現(xiàn)在Vue中存儲業(yè)務狀態(tài)實用技巧
這篇文章主要為大家介紹了如何通過URL來實現(xiàn)在Vue中存儲業(yè)務狀態(tài)實用技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-10-10
vue中關于element的el-image 圖片預覽功能增加一個下載按鈕(操作方法)
這篇文章主要介紹了vue中關于element的el-image 圖片預覽功能增加一個下載按鈕,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
在本篇文章里小編給大家分享的是一篇關于Vue—v-bind動態(tài)綁定class的知識點內(nèi)容，有需要的朋友們可以參考下。2020-01-01
elementUI select組件value值注意事項詳解
這篇文章主要介紹了elementUI select組件value值注意事項詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
這篇文章主要介紹了Vue項目服務器部署刷新頁面404問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vuex處理用戶Token過期及優(yōu)化設置封裝本地存儲操作模塊
這篇文章主要為大家介紹了Vuex處理用戶Token優(yōu)化設置封裝本地存儲操作模塊及Token?過期問題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
vue-cli是vue.js的腳手架，用于自動生成vue.js+webpack的項目模板，本文通過實例代碼給大家介紹vue-cli搭建SPA項目的詳細過程，感興趣的朋友跟隨小編一起看看吧2022-09-09
這篇文章主要介紹了Vue 樣式切換及三元判斷樣式關聯(lián)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了Vue中Pinia狀態(tài)管理，Pinia開始于大概2019年，其目的是設計一個擁有 組合式 API 的 Vue 狀態(tài)管理庫，Pinia本質(zhì)上依然是一個狀態(tài)管理庫，用于跨組件、頁面進行狀態(tài)共享，感興趣的同學可以參考閱讀2023-04-04
Vuejs 2.0 子組件訪問/調(diào)用父組件的方法(示例代碼)
這篇文章主要介紹了Vuejs 2.0 子組件訪問/調(diào)用父組件的方法(示例代碼),需要的朋友可以參考下2018-02-02