element和echarts的坑

最新推荐文章于 2024-02-19 22:00:00 发布

代码粉碎大师

最新推荐文章于 2024-02-19 22:00:00 发布

阅读量386

点赞数

文章标签： echarts elementui

本文链接：https://blog.csdn.net/weixin_51097961/article/details/116903702

版权

本文介绍了在使用Echarts图表组件与Element UI的tabs组件结合时可能出现的宽高异常问题。问题源于tabs组件在初始化时未正确计算canvas的尺寸。解决方案包括两种：一是通过setTimeout延迟加载Echarts，确保在tabs完全渲染后初始化图表；二是利用Element UI的lazy属性实现懒加载。这两种方法都可以有效地解决Echarts图表显示不全的问题。

摘要由CSDN通过智能技术生成

element与echarts一起使用时宽高异常的问题

在这里插入图片描述
原因：tabs组件在你进入这个标签卡时已经渲染好了，但是canvas是默认大小，所以就导致了这个问题
解决：让echarts延迟加载
方案1.

 setTimeout(() => {
          //中间写入需要渲染在页面上的echarts
          getChart1(this.$refs.chart1);//这是我封装的加载echarts图表
        }, 1000);
        
//设置一千毫秒延迟之后  echarts图表就宽高正常

方案2.

在这里插入图片描述

<el-tab-pane label="访问量" name="second" :lazy="true">

之前有朋友遇到过这个问题没太在意今天我也遇到了翻了他的博客，他是方案一，加了个定时器https://blog.csdn.net/weixin_53571467/article/details/116497705?spm=1001.2014.3001.5501
但我还是感觉用第二种懒加载的方式方便一些