文章目錄（想直接看綜合能力對比圖的請直接跳轉三）
- 一、前言
- 二、官方示例
- 三、實際效果（巔峰科比和詹姆斯綜合能力值對比）
- 四、原始碼(react版本，另外官方是TS代碼，這里我用JS寫的)
- 五、 📖往期推薦📖
一、前言
最近專案中有需要使用圖表展示可視化資訊的需求，就去查找了一些相關輪子，
了解到大多都是用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冷知識(二)??
元組不可變，你真的確定嗎？有了串列，元組存在的意義又是什么？【一文搞懂】
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/296890.html
標籤：python
上一篇：?王者農藥皮膚圖片獲取！?
下一篇：并發編程之：Lock