通过antd-charts可视化对比科比和詹姆斯谁更强

一、前言

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

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

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

二、官方示例

下面是它官网示例的效果

漏斗图

---

玉珏图

---

分面图

---

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

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

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

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

球员	冲击篮筐	投篮	背身技术	传球	控球	稳定性	防守	篮板	运动能力
詹姆斯	85.3	87.4	83.7	87.5	88.7	88	79.4	66	90.6
科比	76	90.2	66.3	88.5	87.5	91.5	67.4	50	84.9
乔丹	88.3	91	77	86.8	90.7	98	82	56	89.7

科比和詹姆斯综合能力对比图

---

科比和乔丹综合能力对比图

---

毕竟只是游戏不用太当真！

四、源码(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;

---

五、 📖往期推荐📖

数据库知识点太多？作为测试掌握这些就够了！【精简重点版＞＞直击面试＞＞建议收藏】

☀️那些让你惊掉下巴到肚皮上的python冷知识(二)☀️

元组不可变，你真的确定吗？有了列表，元组存在的意义又是什么？【一文搞懂】