1.什么是ant design charts

Ant Design Charts 基于 G2Plot，弥补 Ant Design 组件库在统计图表上的缺失，作为 Ant Design 的官方图表组件解决方案。在图表能力上，和 G2Plot 保持一致，不修改技术概念，不修改配置结构。不仅降低这个模块的维护成本，同时降低开发者使用的开发理解成本。

2.为什么使用ant design charts

通俗点讲，Ant Design Charts 就是 G2Plot 的 React 版本，无需感知destroy()、update()等函数，在使用过程中，我们只需要在页面中引入相应图表，并配置 data 和 config属性即可。开发门槛相对较低，是一款更加适合初学者使用的图表工具。但个人认为在图形交互及多样性方面与echarts还有差距。

3.如何使用

3.1安装

npm install @ant-design/charts

3.2使用

Ant Design Charts的使用过程非常简单，在react项目中直接引入后在官方文档中找到想要的图表实例加入代码中即可。实际项目中，我们只需将后端返回的数据处理成下方data的格式传给config，并根据需求配置config中的参数即可。 下面为饼图示例：

import React, { useState, useEffect } from 'react';
import { Pie } from '@ant-design/charts';

const DemoPie: React.FC = () => {
  var data = [
    {
      type: '分类一',
      value: 27,
    },
    {
      type: '分类二',
      value: 25,
    },
    {
      type: '分类三',
      value: 18,
    },
    {
      type: '分类四',
      value: 15,
    },
    {
      type: '分类五',
      value: 10,
    },
    {
      type: '其他',
      value: 5,
    },
  ];
  var config = {
    appendPadding: 10, //在padding的基础上额外追加的padding,控制图表相对边距，格式为数字或数组
    data: data, //数据源
    angleField: 'value',
    colorField: 'type',
    radius: 0.8, //饼图的半径, 取值0到1
    label: { //hover时标签样式
      type: 'outer',
      content: '{name} {percentage}',
    },
    interactions: [{ type: 'pie-legend-active' }, { type: 'element-active' }], // 图表交互
  };
  return <Pie {...config} />;
};

export default DemoPie;

4.总结

Ant Design Charts作为Ant Design的官方图标库，本质上是G2plot的React版本，最大的优势就是开发门槛低，以组件化的形式使得dom结构更加清晰，按需引用即可，使用者不需要很大的学习成本。但对比目前主流的Echarts图表库，对于自定义样式的使用不如Echarts灵活，ECharts的配置非常清晰，图表样式交互更加成熟。初次接触的新手建议使用Ant Design Charts，足以满足绝大多是需求。对图表理解程度较高的人可以使用Echarts，其交互样式和选择更加灵活。

网上对于antd charts的使用心得分享较少，后续将分享一下自己在使用过程中一些自定义样式的方法。