vue使用echarts時(shí)created里拿到的數(shù)據(jù)無法渲染如何解決

這篇文章主要介紹了vue使用echarts時(shí)created里拿到的數(shù)據(jù)無法渲染如何解決的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇vue使用echarts時(shí)created里拿到的數(shù)據(jù)無法渲染如何解決文章都會有所收獲，下面我們一起來看看吧。

使用echarts時(shí)created里拿到的數(shù)據(jù)無法渲染

問題描述

在vue里使用echart時(shí)，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ù)確實(shí)已經(jīng)拿到了，但是卻無法渲染，數(shù)據(jù)拿到，但是無法渲染，推斷應(yīng)該是執(zhí)行順序出了問題，獲取的數(shù)據(jù)在渲染之后才拿到的。 初步懷疑是await的問題，加入驗(yàn)證代碼測試一下：

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會阻塞其所在表達(dá)式中后續(xù)表達(dá)式的執(zhí)行(在和await在同一函數(shù)內(nèi)但在await后面的代碼會被阻塞，形成類似微任務(wù)的存在)，但是不會阻礙外部函數(shù)的執(zhí)行！！

結(jié)論：await阻礙了同函數(shù)內(nèi)的代碼，整個(gè)created函數(shù)執(zhí)行變慢（相當(dāng)于變成異步），所以mounted先執(zhí)行，導(dǎo)致數(shù)據(jù)無法獲??；

解決措施

將請求放在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報(bào)錯(cuò)Cannot read property ‘getAttribute‘ of undefined

今天在查看項(xiàng)目時(shí)，發(fā)現(xiàn)控制臺莫名報(bào)錯(cuò)，Cannot read property 'getAttribute' of undefined

通過查看，問題定位在這一行，也就是echarts初始化的時(shí)候: 

const chart = echarts.init(this.$refs['chart']);

結(jié)合報(bào)錯(cuò)信息可以得知，錯(cuò)誤原因是因?yàn)闆]獲取到dom屬性。

在vue中獲取不到dom一般分為兩種情況，一是在created中獲取，這個(gè)時(shí)候只是創(chuàng)建了vue實(shí)例，dom并沒有開始渲染。所以自然拿不到，如果你是在created中初始化echarts，那么你只需要把初始化的方法放到mounted中執(zhí)行，因?yàn)閙ounted是dom掛載完成的生命周期。這時(shí)候順理成章就可以取到dom。

另外一種情況就是v-if導(dǎo)致dom沒有渲染，接下來咱們看一下html部分:

<div >
    <!-- 暫無數(shù)據(jù)/加載中組件 -->
    <tableLoading border 
        v-if="!conditionBoxLoading && hostAgentNameList.length === 1">
    </tableLoading>
    <!-- echarts -->
    <div ref="chart"  v-else >
    </div>
</div>

只需要將v-if / v-else改成v-show就可以了，因?yàn)関-if是條件判斷是否渲染，v-show是是否顯示，所以使用v-show的話即便dom被隱藏，它依然是已經(jīng)創(chuàng)建完成了，可以獲取到。解決方法如下:

<div >
    <!-- 暫無數(shù)據(jù)/加載中組件 -->
    <tableLoading border 
        v-show="!conditionBoxLoading && hostAgentNameList.length === 1">
    </tableLoading>
    <!-- echarts -->
    <div ref="chart"  
        v-show="hostAgentNameList.length > 1" >
    </div>
</div>

關(guān)于“vue使用echarts時(shí)created里拿到的數(shù)據(jù)無法渲染如何解決”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“vue使用echarts時(shí)created里拿到的數(shù)據(jù)無法渲染如何解決”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。