最近项目中有需要使用图表展示可视化信息的需求，就去查找了一些相关轮子。
了解到大多都是用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 |
需要安装:@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;文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/118778.html
摘要：简介源码地址对象，属性，属性描述符用于在一个对象上定义一个新的属性，或者修改一个对象现有的属性，并返回这个对象。 简介 源码地址showImg(https://segmentfault.com/img/remote/1460000019446680?w=2458&h=610); Object.defineProperty(对象，属性，属性描述符) 用于在一个对象上定义一个新的属性，或者...
软件测试工具大揭秘 前言软件测试常用软件GitPycharmBCompareTyporaXMindNavicatSublime TextPostmanFiddlerCharlesXshellXftpJmeter 前言 现如今，技术发展十分迅猛，开发者只有通过不断的学习才能跟得上时代的步伐。而为了便于学习和工作（减少996），涌现了很多优秀的开发工具用以帮助开发者提高工作效率。现在我把我工...
摘要：文章目录情景再现本文关键词挑个软柿子单页爬取数据处理翻页操作撸代码主调度函数页面抓取函数解析保存函数可视化颜色分布评价词云图源码获取方式情景再现今日天气尚好，女友忽然欲买文胸，但不知何色更美，遂命吾剖析何色买者益众，为点议，事后而奖励之。 ...
❤️欢迎订阅《从实战学python》专栏，用python实现爬虫、办公自动化、数据可视化、人工智能等各个方向的实战案例，有趣又有用！❤️ 更多精品专栏简介点这里 治愈生活的良方 就是保持对生活的热爱 前言 哈喽，大家好，我是一条。 每次和女朋友出去玩，拍照是必须的，天气好还行，天气要是不好，加上我这破手机，那拍的简直惨不忍睹，自己都不过去。 但是没什么能难倒程序员的，为了不挨骂，连夜写出去雾...
摘要：和，领域近来最受关注的大模型究竟怎么样刚刚有人实测比拼了一下，结果在中文语言环境下，结果令人意外又惊喜。随后在年上半年，百度的开源深度学习平台发布了知识增强的预训练模型，通过海量数据建模词实体及实体关系。 BERT和ERNIE，NLP领域近来最受关注的2大模型究竟怎么样？刚刚有人实测比拼了一下，结果在中文语言环境下，结果令人意外又惊喜。具体详情究竟如何？不妨一起围观下这篇技术评测。 写...
阅读 3314·2023-04-26 00:58
阅读 1269·2021-09-22 16:04
阅读 3312·2021-09-02 15:11
阅读 1557·2019-08-30 15:55
阅读 2340·2019-08-30 15:55
阅读 3249·2019-08-23 18:41
阅读 3462·2019-08-23 18:18
阅读 2753·2019-08-23 17:53
