如何将 recharts.js 库导入 ReactJS 文件？

recharts.js 是使用 React 和 D3 构建的重新定义的图表库。它有助于创建交互式线图、条形图、饼图等。它的主要原则之一是它的所有组件都是独立的、轻量级的，并且可以轻松部署。

创建 React 应用程序并安装模块

第 1 步：使用以下命令创建一个 React 应用程序：
```
npx create-react-app foldername
```
第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：
```
cd foldername
```
第 3 步：现在转到命令行并安装 rechart.js 库
```
npm install recharts
```

项目结构：它将如下所示。

示例：现在在 App.js 文件中写下以下代码。在这里，App 是我们编写代码的默认组件。我们将使用库中的组件和 JS 数据生成一个简单的折线图，使用 Class base Component

App.js

import React from "react";
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from "recharts";
  
const data = [
  {
    name: "Block A",
    l1: 4000,
    l2: 2400,
    amt: 2400,
  },
  {
    name: "Block B",
    l1: 3000,
    l2: 1398,
    amt: 2210,
  },
  {
    name: "Block C",
    l1: 2000,
    l2: 9800,
    amt: 2290,
  },
  {
    name: "Block D",
    l1: 2780,
    l2: 3908,
    amt: 2000,
  },
];
  
export default function App() {
  return (
    
      
        
          
          
          
          
          
          
          
        
      
    
  );
}

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出。