vue中tab切换时Echarts在第二个页面无法正常显示

vue中tab切换时Echarts在第二个页面无法正常显示

接手的数据可视化的项目,在某个模块中使用了tab切换来展示不同的数据呈现,结果就出现了问题,第一个页面展示的好好地,但是在第二个页面有的只显示一点点宽度,有的甚至直接就没有了。

经排查是E charts图表在第二个页面渲染的时候无法拿到父元素的高度和宽度造成的,造成这种情况的我所遇到的两种情况,分享给大家。

无法获取高度和宽度原因:

我们为了做好自适应,都是用了百分比单位。所以在加载时无法真实的获取到父元素的高度和宽度,也就自然无法正常展示。
解决方法1: 如果说对自适应要求不高,可给父元素设置固定的width 和height。
此法弊端: 弊端很明显就是页面的体验效果较差。

在做这个tab切换时我使用的是v-show,熟悉vue的小伙伴都知道v-show是只加载一次,只不过是控制css从而控制显示和隐藏,所以说在初次加载的时候就没有准确的获取父元素的width和height,所以造成Echarts无法正常显示。
解决方法2:v-show 改成 v-if,v-if的实现是把相应的元素删掉在重新渲染,所以在进入第二个页面的时候就会重新渲染数据表,从而获取到准确的width 和height。
此法弊端: 熟悉这两个方法的小伙伴必然知道v-if与v-show的区别也就不在多赘述了。如果数据加载过多的话,可能会造成卡顿性能不是很好。

其他方法:

在找解决方法的过程中也看到有前辈提出的一些解决方法:

  1. 延迟加载,在页面加载完以后再去加载echarts。
  2. 在初始化图表时获取父元素的宽高,在赋值给图表。代码的具体实现可点击这里进行查看。

解决的方法有很多,但是要找的符合自己代码需求的还是需要多多尝试,以上是我遇见的问题,如有错误欢迎指正批评。

自己也在尝试的分享一些d3.js的初学者使用方法,欢迎查看折线图的实现,柱状图的实现

你可能感兴趣的:(vue,E,charts)