都 2021 了，你还在为 React 可视化组件库选型发愁吗？Ant Design Charts，一个 AntV 的上

没错，今天我要介绍的就是 Ant Design Charts，一个 AntV 的上层 React 组件库，一个在 Ant Design 官方透出，作为 Ant Design 的官方图表组件解决方案，服务于蚂蚁中后台的 React 可视化组件库。

在蚂蚁，我们以统一 React 组件库为目标，将 AntV 的能力打包透出，一路探索，持续迭代。相比更底层的可视化库，具有如下优点

开箱即用：默认呈现高质量图表，将对开发体验及用户体验的研究沉淀入图表的默认配置项
易于配置：用户能够根据具体业务需要较为轻松的调整图表细节
体验良好：视觉和交互体验聚焦于如何能够展示和发现信息"这一图表本源的职能上
简化概念：对于大部分用户来说，不需要感知底层的一系列图表库，不用关心 G2、G2Plot、G6、X6等概念。

易用性

作为开箱即用的可视化组件库，上手成本足够低，和使用 Ant Design 组件一样，无需做任何封装，目前业界上手更低的应该是还在路上的 AVA（智能可视化）。

import { Bar } from '@ant-design/charts';

export const Demo: React.FC = () => {
  const data = [
    {
      type: '粮油副食',
      value: 52,
    },
    {
      type: '生鲜水果',
      value: 61,
    },
    {
      type: '美容洗护',
      value: 145,
    },
  ];
  const config = {
    data,
    xField: 'type',
    yField: 'value',
  };
  return <Bar {...config} />;
};