echartjs tab切换,解决宽度100% 问题

300 阅读1分钟

切换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>