首页 前端知识 vue3中使用echarts初次渲染图表十分小的问题及解决方法

vue3中使用echarts初次渲染图表十分小的问题及解决方法

2024-06-21 09:06:59 前端知识 前端哥 548 520 我要收藏

项目场景:

项目场景:vue3中引入了echarts图表,在onMounted中初始化图表。

1、template部分代码:

在这里插入图片描述

2、js代码:

在onMounted中初始化图表。
在这里插入图片描述

3、css代码:

在这里插入图片描述

问题描述

图表显示十分小,显然不正常。
在这里插入图片描述
但是重新调整浏览器大小后,可以正常显示。
在这里插入图片描述

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

原因分析:

如果直接在mounted中如果初始化图表的话,dom元素还没有完全加载完成,echarts就已经加载了,因为获取不到宽高,会造成加载出来的echarts很小。

解决方案:

等dom元素加载完成之后,再次渲染图表(调用initCharts函数)。可以在nextTick中调用,实现dom加载完成后渲染图表。
在这里插入图片描述
初次渲染,大小正常。
在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13127.html
标签
评论
发布的文章

html 个人主页

2024-07-13 22:07:08

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!