问题描述

AntV G2图表结合栅格系统，在第一次加载后图表比父盒子略宽（ant design of vue）,但刷新后或改变窗口宽度后恢复正常。

解决

在mounted函数里图表初始化后加上如下代码:

 mounted () {
    this.loadingAllChart()
    // 下面代码解决第一次渲染，图标宽度过款问题
    const e = document.createEvent('Event')
    e.initEvent('resize', true, true)
    window.dispatchEvent(e)
  },

react也类似，在渲染图标后主动触发resize函数。即添加以上代码。

📦 前端资源合集 | 持续更新

🟢 前端0到1【持续更新】→ https://pan.quark.cn/s/5df55ccff7c4

🔵 前端进阶【持续更新】→ https://pan.quark.cn/s/2dec1c87b3ec

🟣 前端2026最新【持续更新】→ https://pan.quark.cn/s/77c8fa94161c

🔴 AI最新学习资料 → https://pan.baidu.com/s/1P9X2Qk_Fby3rFNVGw_WKow?pwd=46XG 提取码：46XG

觉得有用就点个赞+收藏，关注我持续分享前端干货 💡