🐛[BUG]分组柱线图表-显示多折线 进行tooltip 的回调设置，宽度不能自适应（除首次渲染）

[yibeiqwq]

🐛 bug 描述 [详细地描述 bug，让大家都能理解]

分组柱线图表-显示多折线 进行tooltip 的回调设置，宽度不能自适应（除首次渲染）

📷 复现步骤 [清晰描述复现步骤，让别人也能看到问题]

1. 图表放入弹窗组件中
2. 设置tooltip
3. 第二次打开弹窗，图表宽度没有自适应

🏞 期望结果 [描述你原本期望看到的结果]

图表宽度可以自适应

💻 复现代码 [提供可复现的代码，仓库，或线上示例]

import { DualAxes } from '@ant-design/plots';
import React,{useState} from 'react';
import ReactDOM from 'react-dom';
import { Button, Form, Modal, Select, Space, Spin, Tooltip } from 'antd';



const DemoDualAxes = () => {
  const uvBillData = [
    { time: '2019-03', value: 350, type: 'uv' },
    { time: '2019-04', value: 900, type: 'uv' },
    { time: '2019-05', value: 300, type: 'uv' },
    { time: '2019-06', value: 450, type: 'uv' },
    { time: '2019-07', value: 470, type: 'uv' },
    { time: '2019-03', value: 220, type: 'bill' },
    { time: '2019-04', value: 300, type: 'bill' },
    { time: '2019-05', value: 250, type: 'bill' },
    { time: '2019-06', value: 220, type: 'bill' },
    { time: '2019-07', value: 362, type: 'bill' },
  ];

  const transformData = [
    { time: '2019-03', count: 800, name: 'a' },
    { time: '2019-04', count: 600, name: 'a' },
    { time: '2019-05', count: 400, name: 'a' },
    { time: '2019-06', count: 380, name: 'a' },
    { time: '2019-07', count: 220, name: 'a' },
    { time: '2019-03', count: 750, name: 'b' },
    { time: '2019-04', count: 650, name: 'b' },
    { time: '2019-05', count: 450, name: 'b' },
    { time: '2019-06', count: 400, name: 'b' },
    { time: '2019-07', count: 320, name: 'b' },
    { time: '2019-03', count: 900, name: 'c' },
    { time: '2019-04', count: 600, name: 'c' },
    { time: '2019-05', count: 450, name: 'c' },
    { time: '2019-06', count: 300, name: 'c' },
    { time: '2019-07', count: 200, name: 'c' },
  ];

 const [open,setOpen]=useState(false)
  const config = {
    xField: 'time',
    children: [
      {
        data: uvBillData,
        type: 'interval',
        yField: 'value',
        colorField: 'type',
        group: true,
        style: { maxWidth: 80 },
        interaction: { elementHighlightByColor: { background: true } },
      },
      {
        data: transformData,
        type: 'line',
        yField: 'count',
        colorField: 'name',
        style: { lineWidth: 2 },
        axis: { y: { position: 'right' } },
        scale: { series: { independent: true } },
      },
    ],
    tooltip:  (
    d, 
  ) =>({
    name: d.leftSplitField,
    value:d.value,
    field:'value',
  }),
  };
  return<div>
  <Button onClick={()=>setOpen(true)}>打开</Button> 
  
   <Modal
        open={open}
        centered
        footer={null}
        onCancel={() =>
          setOpen(false)
        }
        width="50%"
      >
       <DualAxes {...config} />
      </Modal>
  </div>;
};

ReactDOM.render(<DemoDualAxes />, document.getElementById('container'));

© 版本信息

最新版

• ant-design-charts 版本: [e.g. 0.9.0]
• 浏览器环境 谷歌浏览器
• 开发环境 [e.g. mac OS] macos

🚑 其他信息 [如截图等其他信息可以贴在这里]