Using echarts in vue3 to render charts for the first time is very small problem and solution

Project scenario:

Project scenario: The echarts chart is introduced in vue3, and the chart is initialized in onMounted.

1. Part of the template code:

insert image description here

2. js code:

Initialize the chart in onMounted.
insert image description here

3. css code:

insert image description here

Problem Description

The graph appears very small, which is clearly not normal.
insert image description here
But after re-adjusting the browser size, it can be displayed normally.
insert image description here

@Override
	public void run() {
    
    
		bytes = mmInStream.read(buffer);
		mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget();
	}

Cause Analysis:

If you initialize the chart directly in mounted, the dom element has not been fully loaded, and echarts has already been loaded, because the width and height cannot be obtained, which will cause the loaded echarts to be very small.

solution:

After the dom element is loaded, render the chart again (call the initCharts function). It can be called in nextTick to render the chart after the dom is loaded.
insert image description here
First render, normal size.
insert image description here

Guess you like

Origin blog.csdn.net/ZHANGYANG_1109/article/details/129405890