vue3 Echarts page loading without rendering display blank page
After the parent component obtains the data, the rendered chart is not updated in time.
There is no problem in the local development environment, but the page loads every time the page is loaded in the test environment. The chart will be rendered only after clicking the browser refresh button.
I personally think the cause of this problem
The page loading subcomponent dom element has not been loaded yet, so what you see is blank, and you can only refresh it.
How to solve this problem
Use nextTick() in the life cycle to render the chart after the dom is loaded ```
Specific implementation code:
Parent component:
After obtaining the data, it passes it to the child component through props.
```javascript
<!--Statistical line chart-->
<hostLine ref="settled" :settledData="settledData"> </hostLine>
// Get entry statistics async getSettledData() {
const result = await getProjectSettled();
// If the data returned by the background is empty, the front end will render an empty table. You must wait until the data is obtained and rendered Echarts if () {
if ( === 0 && === 0) {
();
} else {
(, );
}
= new Date().getTime();
}
},Subcomponents:
Receive the data passed by the parent component and watch it, and use nextTick to render the chart in the life cycle onMounted.
<template>
<div class="line-overview">
<div class="host-line">
<div class="host-line-title">Statistics of entry</div>
<div 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";
([
TooltipComponent,
LegendComponent,
GridComponent,
LineChart,
CanvasRenderer,
UniversalTransition
]);
export default defineComponent({
props: ["settledData"],
setup(props) {
const update = inject("update");
const LineChart = shallowRef();
const drawChart = () => {
const cahrtData = ;
= (("hostLine") as HTMLElement);
// Specify the configuration items and data of the chart let option = {
tooltip: {
trigger: "axis",
},
legend: {
data: ['Number of enterprises', 'Number of workstations',]
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "category",
boundaryGap: false,
data: cahrtData?.()
},
// Y ruler fixed yAxis: {
type: "value",
scale: true,
// // boundaryGap: [0.2, 0.2],
// // Dynamically set the scale value of the Y axis and take only integers min: (value:Record<string,number>) => {
return ( / 100) * 100;
},
max: (value:Record<string,number>) => {
return ( / 100) * 100;
},
},
series: [
{
name: "Number of enterprises",
type: "line",
stack: "Total",
data: cahrtData?.companyCount,
},
{
name: "Number of workstations",
type: "line",
stack: "Total",
data: cahrtData?.stationCount,
},
],
};
// Use the configuration items and data you just specified to display the chart. (option);
("resize", () => {
();
});
};
onMounted(() => {
watch([update], () => {
nextTick(()=>{
drawChart();
})
}, {
deep: true
})
});
onUnmounted(() => {
();
});
},
});
</script>
vue Echarts white screen or wait for a while before it appears
reason
Since data is loading asynchronously, the width and height of the div are still 0 when setOption, resulting in the rendering width and height of the canvas.
Solution
Add the default width and height
<div class="echarts-vue" style="width:500px; height:500px" ></div>
The above is personal experience. I hope you can give you a reference and I hope you can support me more.