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

更新時(shí)間：2023年03月24日 09:44:33 作者：liyfn

這篇文章主要介紹了vue使用echarts時(shí)created里拿到的數(shù)據(jù)無(wú)法渲染的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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

問(wèn)題描述

在vue里使用echart時(shí)，created里請(qǐng)求的數(shù)據(jù)，但是卻無(wú)法渲染；

代碼如下：

//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)
  },

原因分析

通過(guò)vue插件調(diào)試，數(shù)據(jù)確實(shí)已經(jīng)拿到了，但是卻無(wú)法渲染，數(shù)據(jù)拿到，但是無(wú)法渲染，推斷應(yīng)該是執(zhí)行順序出了問(wèn)題，獲取的數(shù)據(jù)在渲染之后才拿到的。 初步懷疑是await的問(wèn)題，加入驗(yàn)證代碼測(cè)試一下：

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()為什么會(huì)打印在created()前面呢？

讓我們來(lái)了解一下async/await ：await會(huì)阻塞其所在表達(dá)式中后續(xù)表達(dá)式的執(zhí)行(在和await在同一函數(shù)內(nèi)但在await后面的代碼會(huì)被阻塞，形成類似微任務(wù)的存在)，但是不會(huì)阻礙外部函數(shù)的執(zhí)行！！

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

解決措施

將請(qǐng)求放在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)控制臺(tái)莫名報(bào)錯(cuò)，Cannot read property 'getAttribute' of undefined

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

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

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

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

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

<div style="width: 100%; height: 500px">
? ? <!-- 暫無(wú)數(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就可以了，因?yàn)関-if是條件判斷是否渲染，v-show是是否顯示，所以使用v-show的話即便dom被隱藏，它依然是已經(jīng)創(chuàng)建完成了，可以獲取到。解決方法如下:

<div style="width: 100%; height: 500px">
? ? <!-- 暫無(wú)數(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>