解决AntV G2图表宽高自适应时第一次加载(初始化)宽度略宽问题

最新推荐文章于 2024-04-09 14:50:04 发布

前端小端长

最新推荐文章于 2024-04-09 14:50:04 发布

阅读量3.8k

点赞数 1

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/zhang1339435196/article/details/109224735

版权

Vue 专栏收录该内容

25 篇文章

订阅专栏

在使用 AntV G2 图表与 AntDesign of Vue 的栅格系统结合时，可能会遇到初次加载时图表宽度过宽的问题。解决方法是在组件挂载后，模拟窗口 resize 事件来更新图表尺寸。在 Vue 中，可以在 mounted 生命周期钩子中添加代码，创建并触发 resize 事件。对于 React 应用，同样需要在渲染图表后调用 resize 函数来修正布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

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函数。即添加以上代码。