切换tab选项卡时,display为none,所以width:100%没有可继承项,被echarts自带方法切割成100px。 查了很多资料,总结如下;
1、可以使用v-if来切换显示,重新渲染的规则(已验证,可以)
2、如果使用了v-if来切换显示,还是不能实现100%集成,获取父级的宽高,赋值给echart图标的div;再使用 resize()函数,这样基本就能解决了(已验证,可以)
eg:
<div :style={width: width, height: height}>
<div ref="echart" class="echart-box"></div>
</div>
var mychart = null;
this.$nextTick(() => {
mychart = this.$refs.echart;
mychart.style.width = width; // 外层div的宽
mychart.style.height = height; // 外层div的高
// 然后设置echart的option
....
mychart.resize();
})
3.给标签添加lazy属性(未验证)
<div :laze="true"> </div>