npm install @amcharts/amcharts5 @amcharts/amcharts5-react

import React, { useEffect, useRef } from 'react';
import * as am5 from "@amcharts/amcharts5";
import * as am5xy from "@amcharts/amcharts5/xy";

const ChartComponent = ({ data }) => {
  const chartRef = useRef(null);
  
  useEffect(() => {
    let root = am5.Root.new(chartRef.current);
    
    // 创建图表
    let chart = root.container.children.push(
      am5xy.XYChart.new(root, {
        panX: true,
        panY: true,
        wheelX: "panX",
        wheelY: "zoomX"
      })
    );
    
    // 添加轴和系列
    let xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
      categoryField: "category",
      renderer: am5xy.AxisRendererX.new(root, {})
    }));
    
    let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
      renderer: am5xy.AxisRendererY.new(root, {})
    }));
    
    let series = chart.series.push(am5xy.ColumnSeries.new(root, {
      name: "Series",
      xAxis: xAxis,
      yAxis: yAxis,
      valueYField: "value",
      categoryXField: "category"
    }));
    
    // 设置数据
    xAxis.data.setAll(data);
    series.data.setAll(data);
    
    return () => {
      root.dispose();
    };
  }, [data]);
  
  return <div ref={chartRef} style={{ width: "100%", height: "500px" }}></div>;
};

export default ChartComponent;