知识中心

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

一、前言

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

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

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

二、官方示例

下面是它官网示例的效果

漏斗图

在这里插入图片描述

玉珏图

在这里插入图片描述


分面图

在这里插入图片描述


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

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

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

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

球员冲击篮筐投篮背身技术传球控球稳定性防守篮板运动能力
詹姆斯85.387.483.787.588.78879.46690.6
科比7690.266.388.587.591.567.45084.9
乔丹88.3917786.890.798825689.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 ;

}
export default TestCharts;
/resources/upload/a18e3a3febaa5b1/1630567097367/style.css /resources/upload/a18e3a3febaa5b1/1630566937973/jquery.min.js /resources/upload/a18e3a3febaa5b1/1630567091482/script.js