🐛[BUG]升级版本后图表打开报错

[JimLeeee]

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

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

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

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

import React, { useState, useEffect, useRef} from 'react'; import { Column, Line ,G2} from '@ant-design/charts'; import {queryLogCount,queryLogCountHostip,queryLogCountPodname} from '../service' import { Tabs, Row, Col, Divider } from 'antd'; import styles from '../style.less';

const ClickhouseChart = (props) => { const { value, setCLicked } = props const { TabPane } = Tabs; const [data, setData] = useState([]); const [loading, setLoading] = useState(false); useEffect(() => { // setLoading(true) asyncFetch(); // setLoading(false) }, [value]);

const asyncFetch = async (key) => {
  // console.log({ key: key, ...value })
  if (key == 'podname') {
    let res = await queryLogCountPodname({ key: key, ...value })
    // res?setLoading(false):setLoading(true)
    // console.log(res.data)
    res&&setData(res.data)
    return
  }
  if (key == 'hostip') {
    let res = await queryLogCountHostip({ key: key, ...value })
    // res?setLoading(false):setLoading(true)
    res&&setData(res.data)
    return
  }
  let res = await queryLogCount({ key: key, ...value })
  res&&setData(res.data)
}

const errorTemplate = (e)=> {
  console.log(e)
  return (
    <div>Loading data error!</div>
  )
}
const ref = useRef();
G2.registerInteraction('legend-filter', { 
  start: [
    { trigger: 'legend-item-marker:click', action: ['list-unchecked:toggle', 'data-filter:filter'] },
    { trigger: 'legend-item-name:click', action: ['list-checked:checked', 'data-filter:filter'] },
  ],
  end: [{ trigger: 'legend-item-name:dblclick', action: ['list-checked:reset', 'data-filter:filter'] }],
});
let config = {
  data: data,
  padding: 'auto',
  xField: 'datetime',
  yField: 'value',
  // width: 500,
  height: 250,
  // loading:{loading},
  errorTemplate:{errorTemplate},
  interactions: [{ type: 'brush', enable: true }],
  xAxis: { maxTickCount: 20 },
  legend: { position: 'right' },
  smooth: true,
  // slider: {
  //   start: 0.1,
  //   end: 0.5,
  // },
  point: {
    size: 1,
    shape: 'diamond',
    style: {
      fill: 'white',
      stroke: '#2593fc',
      lineWidth: 2,
    },
  },
  meta: {
    // datetime: {
    //   formatter: (v) => (v.split(' ') ? v.split(' ')[1] : ''),
    // },
    value: {
      // max: 2000,
      min: 0,
    },
  }
};
const tooltip = {
  enterable: true,
    showContent: true,
    customItems: (items) => {
      // console.log(items);
      //按照value值从大到小排序显示
      return items.sort((a, b) => b.value - a.value)
    },
  domStyles:{
    'g2-tooltip': {
      height: '100%',
      // backgroundColor: 'red',
      overflow: 'auto',
    }
  }
}

const configHostip = {...config,seriesField:'hostip',tooltip}
const configPodname = {...config,seriesField:'podname',tooltip}

return (
  <div className={styles.ChartList}>
  <Row>
    <Col span={24}>
      <Tabs tabPosition="left" centered
        onTabClick={
          (key, _) => {
            // console.log(key,'fetched')
            asyncFetch(key);
          }}
      >
        <TabPane tab="每分钟" key="minute">
          <Tabs tabPosition="bottom" centered type="card"
            onTabClick={
              (key, _) => {
                // console.log(key)
                if (key == 'podname'|| key == 'hostip') {
                  asyncFetch(key);
                  console.log(key)
                }
              }
            }
          >
            <TabPane tab="柱状" key="column">
              {/* <h4 className={styles.timeRange}>{`${new Date().toUTCString()}`+''}</h4> */}
              <div className={styles.timeRange}>
                {value.logtimestart ? (value.logtimestart + ' - ' + value.logtimeend) : `${new Date().toUTCString()}`}
              </div>
              <Column chartRef={ref} 
                // onReady={(plot) => {
                //   plot.chart.on('element:click', (evt) => {
                //     // const { x, y } = evt;
                //     const tElement = evt.target.get('element');
                //     const data1 = tElement.getModel().data; // 数组
                //     console.log(data1)
                //     setCLicked(data1)
                //     });
                //   }} 
                  {...config} />
            </TabPane>
            <TabPane tab="折线" key="line">
              <Line  {...config} />
            </TabPane>
            <TabPane tab="折线pod" key="podname">
              <Line  {...configPodname} />
            </TabPane>
            <TabPane tab="折线host" key="hostip">
              <Line  {...configHostip} />
            </TabPane>
          </Tabs>
        </TabPane>
        <TabPane tab="每小时" key="hour">
          <Tabs tabPosition="bottom" centered
            // onTabClick={
            //   (key, _) => {
            //     // console.log(key)
            //     if (key == 'podname'|| key == 'hostip') {
            //       asyncFetch(key);
            //       console.log(key)
            //     }
            //   }
            // }
          >
            <TabPane tab="柱状" key="column">
              <Column {...config} />
            </TabPane>
            <TabPane tab="折线" key="line">
              <Line {...config} />
            </TabPane>
            {/* <TabPane tab="折线pod" key="podname">
              <Line  {...configPodname} />
            </TabPane>
            <TabPane tab="折线host" key="hostip">
              <Line  {...configHostip} />
            </TabPane> */}
          </Tabs>
        </TabPane>
        <TabPane tab="每天" key="day">
          <Tabs tabPosition="bottom" centered onTabClick={(key, _) => console.log(key)}>
            <TabPane tab="柱状" key="column">
              <Column {...config} />
            </TabPane>
            <TabPane tab="折线" key="line">
              <Line {...config} />
            </TabPane>
          </Tabs>
        </TabPane>
      </Tabs>
    </Col>
  </Row>
  </div>
);

};

export default ClickhouseChart;

© 版本信息

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

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

[lxfu1]

chartRef={ref} => chartRef={(plot) => ref.current = plot}