一、前言

最近项目中有需要使用图表展示可视化信息的需求，就去查找了一些相关轮子。
了解到大多都是用echarts来实现的，但自己框架使用的是antd ，通过阅读官方文档发现，antd-charts他们的官方库一样能实现一些可视化图表，所以做了一些尝试。

antd-charts官网：https://charts.ant.design/zh-CN/demos/global

打开官网发现它支持很多图表，包括一些常见的饼图，折线图，柱状图等.
不常见的漏斗图、玉珏图、分面图等也支持。而且还挺好看（个人觉得挺好看！）
可以说是非常强大了！！

二、官方示例

下面是它官网示例的效果

三、实际效果（巅峰科比和詹姆斯综合能力值对比）

这里通过antd-charts雷达图，按照NBA2K21的数据来做一个巅峰科比和巅峰詹姆斯的能力值对比：

走9个大方向来对比，9个大方向的小项详情如下：

冲击篮筐： 上篮，原地扣篮，扣篮
投篮： 近，中，远，罚球，投篮智商
背身技术： 背身勾手，背身后仰跳投，背身控球
传球： 传球智商，传球，传球视野，传球洞察力
控球： 控球，运球速度，接球能力
稳定性： 进攻稳定性，防守稳定性
防守： 内线防守，外线防守， 抢断，盖帽，协防智商
篮板： 进攻篮板，防守篮板
运动能力： 速度，加速能力，横向敏捷，力量，弹跳，体力，争抢能力

四、源码(react版本，另外官方是TS代码，这里我用JS写的)

需要安装:@ant-design/charts和@antv/data-set

import React from 'react';
import { Radar } from '@ant-design/charts';
import { DataSet } from '@antv/data-set';
const TestCharts = () => {
    const { DataView } = DataSet;
    const dv = new DataView().source([
        { item: '冲击篮筐', '科比': 76, '乔丹': 88.3 },
        { item: '投篮', '科比': 90.2, '乔丹': 91 },
        { item: '背身技术', '科比': 66.3, '乔丹': 77 },
        { item: '传球', '科比': 88.5, '乔丹': 86.8 },
        { item: '控球', '科比': 87.5, '乔丹': 90.7 },
        { item: '稳定性', '科比': 91.5, '乔丹': 98 },
        { item: '防守', '科比': 67.4, '乔丹': 82 },
        { item: '篮板', '科比': 50, '乔丹': 56 },
        { item: '运动能力', '科比': 84.9, '乔丹': 89.7 }
    ]);
    dv.transform({
        type: 'fold',
        fields: ['科比', '乔丹'], // 展开字段集
        key: 'user', // key字段
        value: 'score', // value字段
    });

    const config = {
        data: dv.rows,
        xField: 'item',
        yField: 'score',
        seriesField: 'user',
        meta: {
            score: {
                alias: '分数',
                min: 0,
                max: 100,
            },
        },
        xAxis: {
            line: null,
            tickLine: null,
            grid: {
                line: {
                    style: {
                        lineDash: null,
                    },
                },
            },
        },
        yAxis: {
            line: null,
            tickLine: null,
            grid: {
                line: {
                    type: 'line',
                    style: {
                        lineDash: null,
                    },
                },
            },
        },
        // 开启面积
        area: {},
        // 开启辅助点
        point: {},
    };

    return <Radar style={{ height: '80%' }} {...config} />;

}
export default TestCharts;