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

在父组件获取到数据后传递给子组件并没有及时的更新渲染图表。在本地开发环境是没有一点问题，但发布到测试环境上每次页面加载都不渲染，点击浏览器刷新按钮后才会去渲染图表。

个人认为造成这个问题的原因：页面加载子组件dom元素此时还没有加载完成，所以看到的就是空白，只有刷新一下才可以。

解决这个问题的方法就是： 在生命周期里面使用 nextTick（）待dom加载完成之后再去渲染图表```具体实现代码：
父组件：获取到数据后通过props 传递给子组件```javascript<!--入驻统计折线图--><hostLine ref="settled" :settledData="settledData">   </hostLine>// 获取入驻统计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进行渲染图表就行了。

<template><div class="line-overview"><div class="host-line"><div class="host-line-title">入驻统计</div><div id="hostLine" style="width: 100%; height: 360px"></div></div></div>
</template><script lang="ts">
import * as echarts from "echarts/core";
import { TooltipComponent, LegendComponent, GridComponent, } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { UniversalTransition } from 'echarts/features';
import { defineComponent, inject, watch, onMounted, onUnmounted, ref, shallowRef, nextTick  } from "vue";
echarts.use([TooltipComponent,LegendComponent,GridComponent,LineChart,CanvasRenderer,UniversalTransition
]);
export default defineComponent({props: ["settledData"],setup(props) {const update = inject("update");const LineChart = shallowRef();const drawChart = () => {const cahrtData = props.settledData;LineChart.value = echarts.init(document.getElementById("hostLine") as HTMLElement);// 指定图表的配置项和数据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>) => {return Math.floor(value.min / 100) * 100;},max: (value:Record<string,number>) => {return Math.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();});},
});
</script>

vue3 + Echarts 页面加载不渲染显示空白页面相关推荐

html5 载入网页显示,页面加载完之前显示Loading
1.第一种方式 HTML loading... CSS .loader { position: fixed; left: 50%; top: 50%; margin: -0.2em 0 0 -0.2e ...
Angular页面出不来，显示空白页面。。。
Angular页面出不来,显示空白页面... ng serve -o --port 8888 启动正常, ng build --prod --base-href ./ 打包也正常, 什么错误信息都没有 ...
网页Loading，让页面加载完再显示
原文链接:http://www.iew3c.com/code-sharing/6672.html 一个真正的网页LOADING,不是装模作样的,网页真正加载完才显示,若没加载完则一直显示进度条,你可以 ...
html5 页面加载缓慢,html5体验优化页面加载的14条建议
html5体验优化页面加载的14条建议 1. fake 页 - 首屏加速目标:首屏 3s 以内因为 71% 的用户期望移动页面跟 pc 页面一样快 (3s) ,74% 的用户能容忍的响应时间为 5 ...
页面加载时就请求ajax,页面加载时发送Ajax请求
如下所示代码,我想在页面加载时判断是否已经保存有cookie,如果有则直接发送ajax请求显示上一次的结果页面. 但是加上后面的if之后,不但不会加载结果页面,连之前的searchAjax()方法也不 ...
java加快页面加载速度方法_关于页面加载速度优化的11种方法
1.合并js和css文件将js和css分别合并到一个共享文件,这样不仅能够简化代码,而且在执行js文件是,如果js文件较多,就需要多次向服务器请求数据,这样将会延长加载速度,将js文件合并在一起,减 ...
dom事件对象、解绑事件、事件委托、页面加载、滚动事件、页面尺寸事件
1.e.type获取事件类型,例如click input focus <input type="text"> <script>let input=docum ...
loading页面加载(等待页面加载完毕再隐藏loading页面)
1.设计一个装载Loading页面的div 此处设置的height为100vh,vh单位表示浏览器的可视高度百分比,100vh表示浏览器高度的100%,如果是全屏Loading,则该div需要排在bo ...
html页面加载触发的事件,jquery页面加载触发onchange事件
jquery页面加载触发onchange事件2017-08-31 14:57 在用到select的时候,我们经常会一起使用select的onchange事件. 如果是直接选择触发此事件,那倒是很简单. ...

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

vue3 + Echarts 页面加载不渲染显示空白页面相关推荐

最新文章

热门文章