vue3+Echarts页面加载不渲染显示空白页面的解决_vue.js_

vue3 Echarts页面加载不渲染显示空白页面

在父组件获取到数据后传递给子组件并没有及时的更新渲染图表。

在本地开发环境是没有一点问题，但发布到测试环境上每次页面加载都不渲染，点击浏览器刷新按钮后才会去渲染图表。

个人认为造成这个问题的原因

页面加载子组件dom元素此时还没有加载完成，所以看到的就是空白，只有刷新一下才可以。

解决这个问题的方法

在生命周期里面使用 nextTick（）待dom加载完成之后再去渲染图表```

具体实现代码：

父组件：

获取到数据后通过props 传递给子组件

```javascript           // 获取入驻统计    async getSettledData() {         const result = await getProjectSettled();         // 如果后台返回的数据是空 前端就渲染一个空表出来 必须等获取到数据以后在渲染 Echarts         if (result.success) {           if (result.data.companyCount.length === 0 && result.data.stationCount.length === 0) {             Object.assign(data.settledData);           } else {             Object.assign(data.settledData, result.data);           }           update.value = new Date().getTime();         }       },

子组件：

接收父组件传递的数据并进行 watch 监听，在生命周期onMounted里面使用 nextTick进行渲染图表就行了。

vue Echarts白屏或等一会才出现

原因

由于是异步加载数据，setOption的时候div的宽高还是0，导致canvas渲染宽高也是0。

解决方法

加上默认的width和height

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！