echarts图表使用tab切换展示时宽度变成100px

产生问题的原因

这个问题不是由于 ECharts 不支持 100% 引起的,事实上,ECharts 不管你 CSS 写的是像素值还是百分比,只管实际容器的大小。而在 tab 切换的时候,其实这个容器是 0x0 的,所以再切回这个 tab 的时候当然是需要 resize 一下的。

初始化图表的时候 赋值给变量方便调用方法

this.myChart = echarts.init(document.getElementById(this.chartId));

// tab 切换的时候或者图标展示的时候使用 this.myChart.resize() 重新resize

注:页面dom 没有更新完成后调用this.myChart.resize()无效

this.$nextTick(() => {
      this.myChart.resize(); // 在 DOM 更新后调用 resize
 });

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值