antv g2plot 2.4.7版本折线和柱状图,在一个div里,使用react框架

您可以使用 React 的 ref 属性来获取包含折线图和柱状图的 div 元素，然后在组件的 componentDidMount 生命周期方法中初始化 G2Plot 图表。下面是一个简单的示例代码：

import React, { Component } from 'react';
import { Line, Column } from '@antv/g2plot';

class LineColumnChart extends Component {
  constructor(props) {
    super(props);
    this.chartRef = React.createRef();
  }

  componentDidMount() {
    const data = [
      { year: '1991', value: 3 },
      { year: '1992', value: 4 },
      { year: '1993', value: 3.5 },
      { year: '1994', value: 5 },
      { year: '1995', value: 4.9 },
      { year: '1996', value: 6 },
      { year: '1997', value: 7 },
      { year: '1998', value: 9 },
      { year: '1999', value: 13 },
    ];

    const linePlot = new Line(this.chartRef.current, {
      data,
      xField: 'year',
      yField: 'value',
    });
    linePlot.render();

    const columnPlot = new Column(this.chartRef.current, {
      data,
      xField: 'year',
      yField: 'value',
    });
    columnPlot.render();
  }

  render() {
    return <div ref={this.chartRef}></div>;
  }
}

export default LineColumnChart;

在上面的代码中，我们在构造函数中创建了一个 ref 对象，然后在 render 方法中将其绑定到 div 元素上。在 componentDidMount 方法中，我们使用 ref 对象获取该 div 元素，并在其中分别创建了一个折线图和一个柱状图。最后，我们在组件卸载时调用了 chart.destroy() 方法来销毁图表实例，以避免内存泄漏。