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

一、前言

最近项目中有需要使用图表展示可视化信息的需求，就去查找了一些相关轮子。

了解到大多都是用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 ; } export default TestCharts;

React

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。