??通過(guò)antd-charts可視化對(duì)比科比和詹姆斯誰(shuí)更強(qiáng)??

huashiou 發(fā)布于2021-09-02 15:11 / 3310人閱讀

文章目錄（想直接看綜合能力對(duì)比圖的請(qǐng)直接跳轉(zhuǎn)三）

一、前言
二、官方示例
三、實(shí)際效果（巔峰科比和詹姆斯綜合能力值對(duì)比）
四、源碼(react版本，另外官方是TS代碼，這里我用JS寫的)
五、 ?往期推薦?

一、前言

最近項(xiàng)目中有需要使用圖表展示可視化信息的需求，就去查找了一些相關(guān)輪子。
了解到大多都是用echarts來(lái)實(shí)現(xiàn)的，但自己框架使用的是antd ，通過(guò)閱讀官方文檔發(fā)現(xiàn)，antd-charts他們的官方庫(kù)一樣能實(shí)現(xiàn)一些可視化圖表，所以做了一些嘗試。

antd-charts官網(wǎng)：https://charts.ant.design/zh-CN/demos/global

打開(kāi)官網(wǎng)發(fā)現(xiàn)它支持很多圖表，包括一些常見(jiàn)的餅圖，折線圖，柱狀圖等.
不常見(jiàn)的漏斗圖、玉玨圖、分面圖等也支持。而且還挺好看（個(gè)人覺(jué)得挺好看！）
可以說(shuō)是非常強(qiáng)大了！！

二、官方示例

下面是它官網(wǎng)示例的效果

漏斗圖

玉玨圖

分面圖

三、實(shí)際效果（巔峰科比和詹姆斯綜合能力值對(duì)比）

這里通過(guò)antd-charts雷達(dá)圖，按照NBA2K21的數(shù)據(jù)來(lái)做一個(gè)巔峰科比和巔峰詹姆斯的能力值對(duì)比：

走9個(gè)大方向來(lái)對(duì)比，9個(gè)大方向的小項(xiàng)詳情如下：

沖擊籃筐： 上籃，原地扣籃，扣籃
投籃： 近，中，遠(yuǎn)，罰球，投籃智商
背身技術(shù)： 背身勾手，背身后仰跳投，背身控球
傳球： 傳球智商，傳球，傳球視野，傳球洞察力
控球： 控球，運(yùn)球速度，接球能力
穩(wěn)定性： 進(jìn)攻穩(wěn)定性，防守穩(wěn)定性
防守： 內(nèi)線防守，外線防守，搶斷，蓋帽，協(xié)防智商
籃板： 進(jìn)攻籃板，防守籃板
運(yùn)動(dòng)能力： 速度，加速能力，橫向敏捷，力量，彈跳，體力，爭(zhēng)搶能力

球員	沖擊籃筐	投籃	背身技術(shù)	傳球	控球	穩(wěn)定性	防守	籃板	運(yùn)動(dòng)能力
詹姆斯	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

科比和詹姆斯綜合能力對(duì)比圖

科比和喬丹綜合能力對(duì)比圖

畢竟只是游戲不用太當(dāng)真！

四、源碼(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: "背身技術(shù)", "科比": 66.3, "喬丹": 77 },        { item: "傳球", "科比": 88.5, "喬丹": 86.8 },        { item: "控球", "科比": 87.5, "喬丹": 90.7 },        { item: "穩(wěn)定性", "科比": 91.5, "喬丹": 98 },        { item: "防守", "科比": 67.4, "喬丹": 82 },        { item: "籃板", "科比": 50, "喬丹": 56 },        { item: "運(yùn)動(dòng)能力", "科比": 84.9, "喬丹": 89.7 }    ]);    dv.transform({        type: "fold",        fields: ["科比", "喬丹"], // 展開(kāi)字段集        key: "user", // key字段        value: "score", // value字段    });    const config = {        data: dv.rows,        xField: "item",        yField: "score",        seriesField: "user",        meta: {            score: {                alias: "分?jǐn)?shù)",                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,                    },                },            },        },        // 開(kāi)啟面積        area: {},        // 開(kāi)啟輔助點(diǎn)        point: {},    };    return <Radar style={{ height: "80%" }} {...config} />;}export default TestCharts;