vue使用echarts图表渲染异常本地正常,线上时有时无的渲染
生活随笔
收集整理的這篇文章主要介紹了
vue使用echarts图表渲染异常本地正常,线上时有时无的渲染
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
我也是踩坑了,經過半天的掙扎和尋找資料最終得出來的結果!
經過仔細檢查可以看出,直接聲明的div里會被echarts自動掛載一個_echarts_instance_屬性,導致echarts掛載頁面渲染的時候存在一個緩存問題,參考下圖:
解決方案:把她清空之后,后面就能正常掛載到頁面上進行渲染了,參考下圖:
// 主要代碼:document.getElementById("instrument").setAttribute('_echarts_instance_', '')// 我所寫的項目是vue3,但是用的是以前拷貝的vue2代碼,所以需要用到markRaw函數, // 如果使用vue3編寫就無需加markRawthis.loadChart = markRaw(echarts.init(document.getElementById("instrument")));// 繪制圖表this.loadChart.setOption(this.option,true); 都到這里了,那問題就解決了,如果還有頁面數據沒有解決的話就使用下面兩個echarts官方API來清空數據和清空畫布,如果有幫助的話給個鼓勵點個贊吧~~~~ //清空畫布this.loadChart.clear();//清空數據this.loadChart.dispose();總結
以上是生活随笔為你收集整理的vue使用echarts图表渲染异常本地正常,线上时有时无的渲染的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 再见了飞信,再见了青春
- 下一篇: HEIC图片如何批量转换成jpg格式