react 中使用antd design charts

Ant Design Charts 是 Ant Design 团队开发的一款基于 React 封装的图表库。它使用了 Ant Design 的设计语言和风格，提供了多种常见图表类型的组件，方便开发者在 React 项目中快速实现数据可视化。

在 React 项目中使用 Ant Design Charts，首先需要通过 npm 或 yarn 安装该库，并引入所需的图表组件。安装完成后，我们可以在项目中使用 import 语句将所需的图表组件导入：

import { LineChart, BarChart, PieChart } from 'ant-design-charts';

接下来，可以创建一个简单的 React 组件，将图表组件作为子组件进行渲染。使用 Ant Design Charts 提供的配置项，可以通过传入数据、设置样式、设置交互行为等方式自定义图表的呈现效果。

import React from 'react';
import { LineChart } from 'ant-design-charts';

const MyChart = () => {
  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 config = {
    data: data,
    xField: 'year',
    yField: 'value',
    height: 400,
    xAxis: {
      type: 'cat',
    },
    yAxis: {
      type: 'linear',
      min: 0,
    },
    seriesField: '',
    smooth: true,
  };

  return <LineChart {...config} />;
};

export default MyChart;

通过以上代码，我们创建了一个简单的折线图组件，并传入一份模拟数据和一些自定义的配置项。最后，我们将该组件进行导出，就可以在其他需要使用该图表的地方进行调用和渲染。

以上就是在 React 中使用 Ant Design Charts 的简单介绍和示例。通过这个图表库，我们可以方便地在 React 项目中使用 Ant Design 风格的图表组件，快速实现数据的可视化。