echarts在antd Modal中,无法显示问题

307 阅读1分钟

问题

业务需求,在界面中点击弹出模态框,并且在模态框中用echarts的折线图显示趋势图。但接口正常返回数据后,模态框中并无图标显示。

原因 echarts组件在加载完成后,Modal组件并没有完全加载,导致echarts组件丢失宽高

解决方法1

在modal组件中添加属性

// 指定 Modal 挂载的 HTML 节点, false 为挂载在当前 dom // HTMLElement | () => HTMLElement | Selectors | false getContainer={false}

解决思路

让组件预生成一个dom,以供后台接口赋值生成展示的echart图表, 而不是原来的虽然已经对echart进行赋值,但是由于没有dom,所以无法显示图表。

解决方案2 延迟加载Echarts组件