Project scenario:
Project scenario: The echarts chart is introduced in vue3, and the chart is initialized in onMounted.
1. Part of the template code:
2. js code:
Initialize the chart in onMounted.
3. css code:
Problem Description
The graph appears very small, which is clearly not normal.
But after re-adjusting the browser size, it can be displayed normally.
@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.
First render, normal size.