element和echarts的坑

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
但我还是感觉用第二种懒加载的方式方便一些