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

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

這篇文章主要介紹了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插件調試，數(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í)行！！

結論：await阻礙了同函數(shù)內(nèi)的代碼，整個created函數(shù)執(zhí)行變慢（相當于變成異步），所以mounted先執(zhí)行，導致數(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報錯Cannot read property ‘getAttribute‘ of undefined

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

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

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

結合報錯信息可以得知，錯誤原因是因為沒獲取到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>