vue使用echarts時created里拿到的數據無法渲染如何解決

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

使用echarts時created里拿到的數據無法渲染

問題描述

在vue里使用echart時，created里請求的數據，但是卻無法渲染；

代碼如下：

//created里獲取數據
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插件調試，數據確實已經拿到了，但是卻無法渲染，數據拿到，但是無法渲染，推斷應該是執行順序出了問題，獲取的數據在渲染之后才拿到的。 初步懷疑是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)
  },

神奇的一幕出現了，果然和我們想的一樣：先執行了mounted()里的函數

mounted()為什么會打印在created()前面呢？

讓我們來了解一下async/await ：await會阻塞其所在表達式中后續表達式的執行(在和await在同一函數內但在await后面的代碼會被阻塞，形成類似微任務的存在)，但是不會阻礙外部函數的執行！！

結論：await阻礙了同函數內的代碼，整個created函數執行變慢（相當于變成異步），所以mounted先執行，導致數據無法獲取；

解決措施

將請求放在mounted里

	//正確代碼
  async mounted() {
  	//獲取數據
    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

今天在查看項目時，發現控制臺莫名報錯，Cannot read property 'getAttribute' of undefined

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

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

結合報錯信息可以得知，錯誤原因是因為沒獲取到dom屬性。

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

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

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

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

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

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