首页 前端知识 ElementUi tab组件切换时echarts图标大小异常

ElementUi tab组件切换时echarts图标大小异常

2024-04-29 11:04:23 前端知识 前端哥 71 355 我要收藏

问题:echarts图形宽度设置的是100%,初始的tab里面图表正常,但切换t到另一个tab之后变成了宽高变为了100px。

原因: 审查元素和查找很多资料后发现,tab页使用echarts都会存在echarts设置百分比自适应问题设置100%后只有100px,切换tab前,元素本身就是存在的,只是样式被设置成display: none,那么宽高为0px,但是echarts对图形最小的默认为100px,所以出现问题。

解决:

        1. 使用echarts实例自带的resize()方法

 

        2. 使用v-if来从新加载组件(缺:每次切换都会销毁和创建组件,对DOM不友好,图表过多可能会卡顿   优:每次切换图表会有自带的动画)

(可能还有其他方法。。。。。)

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

AJAX和JSON

2024-05-03 19:05:37

qml 文件中 JSON的使用

2024-05-03 19:05:03

json在线格式化代码

2024-05-03 19:05:01

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