开源项目教程：Ant Design Charts

钱溪双Bridget

于 2024-09-03 07:09:05 发布

阅读量304

点赞数 4

本文链接：https://blog.csdn.net/gitblog_00591/article/details/141836203

版权

开源项目教程：Ant Design Charts

ant-design-chartsA React Chart Library项目地址:https://gitcode.com/gh_mirrors/ant/ant-design-charts

1、项目介绍

Ant Design Charts 是一个基于 React 的图表库，它提供了丰富的图表类型和灵活的配置选项，使得开发者可以轻松地在项目中集成各种统计图表。该库基于 G2、G6、X6 和 L7 等技术构建，支持 TypeScript，具有美观、轻量和响应式的特点。

2、项目快速启动

安装

首先，通过 npm 安装 Ant Design Charts：

npm install @ant-design/charts

使用

以下是一个简单的折线图示例：

import React from 'react';
import { Line } from '@ant-design/charts';

const Page: React.FC = () => {
  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,
    xField: 'year',
    yField: 'value',
  };

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

export default Page;