資訊專欄INFORMATION COLUMN
最近項目中有需要使用圖表展示可視化信息的需求，就去查找了一些相關(guān)輪子。
了解到大多都是用echarts來實現(xiàn)的，但自己框架使用的是antd ，通過閱讀官方文檔發(fā)現(xiàn)，antd-charts他們的官方庫一樣能實現(xiàn)一些可視化圖表，所以做了一些嘗試。
antd-charts官網(wǎng)：https://charts.ant.design/zh-CN/demos/global
打開官網(wǎng)發(fā)現(xiàn)它支持很多圖表，包括一些常見的餅圖，折線圖，柱狀圖等.
不常見的漏斗圖、玉玨圖、分面圖等也支持。而且還挺好看（個人覺得挺好看?。?br /> 可以說是非常強(qiáng)大了??！
下面是它官網(wǎng)示例的效果
這里通過antd-charts雷達(dá)圖，按照NBA2K21的數(shù)據(jù)來做一個巔峰科比和巔峰詹姆斯的能力值對比：
走9個大方向來對比，9個大方向的小項詳情如下：
沖擊籃筐： 上籃，原地扣籃，扣籃
投籃： 近，中，遠(yuǎn)，罰球，投籃智商
背身技術(shù)： 背身勾手，背身后仰跳投，背身控球
傳球： 傳球智商，傳球，傳球視野，傳球洞察力
控球： 控球，運球速度，接球能力
穩(wěn)定性： 進(jìn)攻穩(wěn)定性，防守穩(wěn)定性
防守： 內(nèi)線防守，外線防守， 搶斷，蓋帽，協(xié)防智商
籃板： 進(jìn)攻籃板，防守籃板
運動能力： 速度，加速能力，橫向敏捷，力量，彈跳，體力，爭搶能力
| 球員 | 沖擊籃筐 | 投籃 | 背身技術(shù) | 傳球 | 控球 | 穩(wěn)定性 | 防守 | 籃板 | 運動能力 |
|---|---|---|---|---|---|---|---|---|---|
| 詹姆斯 | 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: "背身技術(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: "運動能力", "科比": 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: "分?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, }, }, }, }, // 開啟面積 area: {}, // 開啟輔助點 point: {}, }; return <Radar style={{ height: "80%" }} {...config} />;}export default TestCharts;文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/118778.html
摘要：簡介源碼地址對象，屬性，屬性描述符用于在一個對象上定義一個新的屬性，或者修改一個對象現(xiàn)有的屬性，并返回這個對象。 簡介 源碼地址showImg(https://segmentfault.com/img/remote/1460000019446680?w=2458&h=610); Object.defineProperty(對象，屬性，屬性描述符) 用于在一個對象上定義一個新的屬性，或者...
軟件測試工具大揭秘 前言軟件測試常用軟件GitPycharmBCompareTyporaXMindNavicatSublime TextPostmanFiddlerCharlesXshellXftpJmeter 前言 ??現(xiàn)如今，技術(shù)發(fā)展十分迅猛，開發(fā)者只有通過不斷的學(xué)習(xí)才能跟得上時代的步伐。而為了便于學(xué)習(xí)和工作（減少996），涌現(xiàn)了很多優(yōu)秀的開發(fā)工具用以幫助開發(fā)者提高工作效率。現(xiàn)在我把我工...
摘要：文章目錄情景再現(xiàn)本文關(guān)鍵詞挑個軟柿子單頁爬取數(shù)據(jù)處理翻頁操作擼代碼主調(diào)度函數(shù)頁面抓取函數(shù)解析保存函數(shù)可視化顏色分布評價詞云圖源碼獲取方式情景再現(xiàn)今日天氣尚好，女友忽然欲買文胸，但不知何色更美，遂命吾剖析何色買者益眾，為點議，事后而獎勵之。 ...
??歡迎訂閱《從實戰(zhàn)學(xué)python》專欄，用python實現(xiàn)爬蟲、辦公自動化、數(shù)據(jù)可視化、人工智能等各個方向的實戰(zhàn)案例，有趣又有用！?? 更多精品專欄簡介點這里 治愈生活的良方 就是保持對生活的熱愛 前言 哈嘍，大家好，我是一條。 每次和女朋友出去玩，拍照是必須的，天氣好還行，天氣要是不好，加上我這破手機(jī)，那拍的簡直慘不忍睹，自己都不過去。 但是沒什么能難倒程序員的，為了不挨罵，連夜寫出去霧...
摘要：和，領(lǐng)域近來最受關(guān)注的大模型究竟怎么樣剛剛有人實測比拼了一下，結(jié)果在中文語言環(huán)境下，結(jié)果令人意外又驚喜。隨后在年上半年，百度的開源深度學(xué)習(xí)平臺發(fā)布了知識增強(qiáng)的預(yù)訓(xùn)練模型，通過海量數(shù)據(jù)建模詞實體及實體關(guān)系。 BERT和ERNIE，NLP領(lǐng)域近來最受關(guān)注的2大模型究竟怎么樣？剛剛有人實測比拼了一下，結(jié)果在中文語言環(huán)境下，結(jié)果令人意外又驚喜。具體詳情究竟如何？不妨一起圍觀下這篇技術(shù)評測。 寫...
閱讀 3325·2023-04-26 00:58
閱讀 1276·2021-09-22 16:04
閱讀 3323·2021-09-02 15:11
閱讀 1568·2019-08-30 15:55
閱讀 2348·2019-08-30 15:55
閱讀 3276·2019-08-23 18:41
閱讀 3470·2019-08-23 18:18
閱讀 2760·2019-08-23 17:53
