Vue3 Echarts页面为何加载后空白无显示，如何解决？

本文共计1125个文字，预计阅读时间需要5分钟。

目录 + Vue3 + Echarts页面加载不渲染显示空白页面个人认为造成这个问题的原因可能包括：

1.资源加载失败：Echarts或其他依赖库的资源未能正确加载。

2.组件初始化错误：Echarts组件或Vue组件在初始化时出现问题。

3.CSS样式问题：页面样式设置导致Echarts无法正常显示。

解决这个问题的方法可能包括：

1.检查资源加载：确保所有依赖库的资源文件都正确加载，没有404错误。

2.查看控制台错误：在浏览器的控制台查看是否有错误信息，定位问题所在。

3.检查CSS样式：确保Echarts组件的CSS样式没有被覆盖或冲突。

4.使用Vue Devtools：使用Vue Devtools检查组件的渲染状态，确认是否有问题。

Vue3 + Echarts白屏或等一会才出现

原因可能包括：

1.初始化延迟：Echarts组件可能需要一段时间来初始化。

2.数据处理延迟：如果页面中有数据处理逻辑，可能需要等待数据加载完成。

3.代码执行顺序：如果存在异步操作，可能需要调整代码执行顺序。

解决方法可能包括：

1.延迟加载：使用Vue的异步组件或动态导入功能，延迟加载Echarts组件。

2.确保数据加载：在数据加载完成后再渲染Echarts组件。

3.调整代码执行顺序：确保异步操作在Echarts组件渲染之前完成。

目录

• vue3 Echarts页面加载不渲染显示空白页面
• 个人认为造成这个问题的原因
• 解决这个问题的方法
• vue Echarts白屏或等一会才出现
• 原因
• 解决方法

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

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

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

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

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

解决这个问题的方法

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

具体实现代码：

父组件：

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

```javascript  <!--入驻统计折线图-->   <hostLine ref="settled" :settledData="settledData">   </hostLine>   // 获取入驻统计    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进行渲染图表就行了。

<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>

vue Echarts白屏或等一会才出现

原因

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

解决方法

加上默认的width和height

<div class="echarts-vue" style="width:500px; height:500px" ></div>

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