这篇文章主要介绍了vue3+Echarts页面加载不渲染显示空白页面的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue3 Echarts页面加载不渲染显示空白页面
在父组件获取到数据后传递给子组件并没有及时的更新渲染图表。
在本地开发环境是没有一点问题，但发布到测试环境上每次页面加载都不渲染，点击浏览器刷新按钮后才会去渲染图表。
个人认为造成这个问题的原因
页面加载子组件dom元素此时还没有加载完成，所以看到的就是空白，只有刷新一下才可以。
解决这个问题的方法
在生命周期里面使用 nextTick（）待dom加载完成之后再去渲染图表```
具体实现代码：
父组件：
获取到数据后通过props 传递给子组件
```javascript // 获取入驻统计async getSettledData() {const result = await getProjectSettled();// 如果后台返回的数据是空 前端就渲染一个空表出来 必须等获取到数据以后在渲染 Echartsif (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进行渲染图表就行了。
class="line-overview">
class="host-line">
class="host-line-title">入驻统计
id="hostLine">
lang="ts">import*as echarts from"echarts/core";import{TooltipComponent,LegendComponent,GridComponent,}fromecharts/components;import{LineChart}fromecharts/charts;import{CanvasRenderer}fromecharts/renderers;import{UniversalTransition}fromecharts/features;import{defineComponent,inject,watch,onMounted,onUnmounted,ref,shallowRef,nextTick}from"vue";echarts.use([TooltipComponent,LegendComponent,GridComponent,LineChart,CanvasRenderer,UniversalTransition]);exportdefaultdefineComponent({props:["settledData"],setup(props){constupdate=inject("update");constLineChart=shallowRef();constdrawChart=()=>{constcahrtData=props.settledData;LineChart.value=echarts.init(document.getElementById("hostLine")asHTMLElement);// 指定图表的配置项和数据let option={tooltip:{trigger:"axis",},legend:{data:[企业数量,工位数量,]},grid:{left:"3%",right:"4%",bottom:"3%",containLabel:true,},xAxis:{type:"category",boundaryGap:false,data:cahrtData?.date.reverse()},// Y标尺固定yAxis:{type:"value",scale:true,// // boundaryGap: [0.2, 0.2],// // 动态设置Y轴的刻度值 只取整数min:(value:Record<string,number>)=>{returnMath.floor(value.min/100)*100;},max:(value:Record<string,number>)=>{returnMath.ceil(value.max/100)*100;},},series:[{name:"企业数量",type:"line",stack:"Total",data:cahrtData?.companyCount,},{name:"工位数量",type:"line",stack:"Total",data:cahrtData?.stationCount,},],};// 使用刚指定的配置项和数据显示图表。LineChart.value.setOption(option);window.addEventListener("resize",()=>{LineChart.value.resize();});};onMounted(()=>{watch([update],()=>{nextTick(()=>{drawChart();})},{deep:true})});onUnmounted(()=>{LineChart.value.dispose();});},});
vue Echarts白屏或等一会才出现
原因
由于是异步加载数据，setOption的时候div的宽高还是0，导致canvas渲染宽高也是0。
解决方法
加上默认的width和height
以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。
声明：本站所有文章，如无特殊说明或标注，均为爬虫抓取以及网友投稿，版权归原作者所有。
