通過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小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。