antv g2plot 2.4.7版本画折柱图,使用react框架

您好，以下是使用 React 和 G2Plot 2.4.7 版本画折柱图的一个简单示例：

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

const data = [
  { year: '1951 年', sales: 38 },
  { year: '1952 年', sales: 52 },
  { year: '1956 年', sales: 61 },
  { year: '1957 年', sales: 145 },
  { year: '1958 年', sales: 48 },
  { year: '1959 年', sales: 38 },
  { year: '1960 年', sales: 38 },
  { year: '1962 年', sales: 38 },
];

function Chart() {
  useEffect(() => {
    const linePlot = new Line('container', {
      data,
      xField: 'year',
      yField: 'sales',
    });

    linePlot.render();

    const columnPlot = new Column('container', {
      data,
      xField: 'year',
      yField: 'sales',
      seriesField: 'year',
      columnWidthRatio: 0.4,
    });

    columnPlot.render();

    return () => {
      linePlot.destroy();
      columnPlot.destroy();
    };
  }, []);

  return <div id="container" />;
}

export default Chart;

在上述代码中，我们使用了 React 的函数式组件，并在组件的 `useEffect` 钩子中创建了折线图和折柱图。其中，折线图的数据源是 `data`，`xField` 设置为 `year`，`yField` 设置为 `sales`。柱状图的数据源和 `xField`、`yField` 设置同折线图一致，`seriesField` 设置为 `year`，表示将折柱图按照年份进行区分。`columnWidthRatio` 设置为 `0.4`，表示柱状图的宽度占比为 0.4。最后，我们将容器的 `id` 设置为 `container`，并在组件中返回该容器作为图表的展示。在组件的 `return` 语句中，我们返回了一个 `div` 元素，并设置了其 `id` 为 `container`。最后，我们在 `useEffect` 钩子的返回函数中调用了 `destroy` 方法销毁图表，以避免内存泄漏。