使用 Ant Design Pro 的图表(展示cpu、内存、硬盘)

文章目录

  • 使用 Ant Design Pro 的图表(展示cpu、内存、硬盘)
    • 一、Ant Design Charts 图表
    • 二、快速上手
    • 三、ant design chart 图表类型
      • StatisticCard 指标卡结合 Ant Design Charts 图表库丰富数值内容,满足大多数数值展示的场景
      • 什么是水波图?
    • 五、展示CPU、内存、硬盘信息
      • cpu、内存 demo
      • 展示硬盘信息 demo
        • 我想在图片下添加额外文字描述呢?
    • 六、其他参考

使用 Ant Design Pro 的图表(展示cpu、内存、硬盘)

一、Ant Design Charts 图表

官方:https://pro.ant.design/zh-CN/docs/graph
官方示例:https://ant-design-charts.antgroup.com/examples

很多时候我们都需要一个美观大方的图表页来充当首页,在快速展示大盘信息的同时还能吸引眼球,提升系统的质感。所以我们也做了一个图表库 Ant Design Charts。

Ant Design Charts 是 G2Plot 的 React 版本,基于 React、TypeScript 封装了所有的 G2Plot 图表,继承了 G2Plot 的所有配置,对 React 技术栈的同学更加友好,统一团队开发。

G2 作为底层依赖,使用了图形语法,上手成本相对较高,功能强大。
G2 是一个基于图形语法,面向数据分析的统计图表引擎。G2Plot 是在 G2 基础上,屏蔽复杂概念的前提下,保留 G2 强大图形能力,封装出业务上常用的统计图表库。
G2Plot 最初诞生于阿里经济体 BI 产品真实场景的业务诉求。

Ant Design Charts 基于 G2Plot,弥补 Ant Design 组件库在统计图表上的缺失,作为 Ant Design 的官方图表组件解决方案。在图表能力上,和 G2Plot 保持一致,不修改技术概念,不修改配置结构。不仅降低这个模块的维护成本,同时降低开发者使用的开发理解成本。

G2 到 Ant Design Charts,我们只有一个目的:降低开发入门门槛,如何选择取决于你对各图表库的理解程度,新手建议使用最简单的 Ant Design Charts,大佬请自便。

二、快速上手

官方文档:https://pro.ant.design/zh-CN/docs/graph
官方示例:https://ant-design-charts.antgroup.com/examples

如果使用 yarn 或者 npm 可以直接安装:

npm install @ant-design/charts --save// yarnyarn add @ant-design/charts

有些时候图表体积比较大就需要通过 CDN 的方式来加快加载。 CDN 模式下由于底层依赖不一样,为了降低包体积,从 1.0.5 版本开始,组织架构图、流程图、资金流向图、缩进树图被打包到 charts_g6.min.js 里,其它图表打包到 charts.min.js 里,使用时按需引入即可。

我们首先需要在 config/config.ts 中的 scripts 中配置:

scripts: ['https://unpkg.com/react@17/umd/react.production.min.js','https://unpkg.com/react-dom@17/umd/react-dom.production.min.js','https://unpkg.com/@ant-design/charts@1.0.5/dist/charts.min.js',//使用 组织架构图、流程图、资金流向图、缩进树图 才需要使用'https://unpkg.com/@ant-design/charts@1.0.5/dist/charts_g6.min.js',
];
同时在 config/config.ts 中的 externals 中配置:externals: {react: 'React','react-dom': 'ReactDOM',"@ant-design/charts": "charts"
}; 

三、ant design chart 图表类型

ant design chart 有 27 种图表类型,上百种图表基本可以满足所有开发的需求。你可以在 官网 看到所有的图表,并且查询它们的 API。
官网:https://ant-design-charts.antgroup.com/

官方示例:https://ant-design-charts.antgroup.com/examples

StatisticCard 指标卡结合 Ant Design Charts 图表库丰富数值内容,满足大多数数值展示的场景

官网:https://procomponents.ant.design/components/statistic-card

指标卡结合统计数值用于展示某主题的核心指标,结合 Ant Design Charts 图表库丰富数值内容,满足大多数数值展示的场景。

何时使用
1)在页面内的重要位置,展示重要信息;
2)在概览页面展示系统功能。

chart 属性可以接受任意的 React 组件作为值,因此你可以根据需要自定义不同类型的图表或其他组件,并将其作为 chart 属性传递给 StatisticCard 组件,以满足你的需求。

将 组件作为 chart 属性传递给 StatisticCard 组件,可以将自定义的图表放置在 StatisticCard 组件中。
在这里插入图片描述

在这个示例中,将 组件作为 chart 属性传递给 StatisticCard 组件,可以将环形图放置在 StatisticCard 组件的标题和数值之间。这样,你可以同时展示上传目录空间的统计信息和具体的环形图示例,以更直观地表示已使用和剩余空间的比例关系。

const DiskInfoPie = () => {const totalSize = 2000; // 总大小,单位:GBconst usedSize = 500; // 使用多少,单位:GBconst availSize = totalSize - usedSize; // 剩余多少空间,单位:GBconst data = [{type: 'Used',value: usedSize,},{type: 'Available',value: availSize,},];const config = {appendPadding: 10,data,angleField: 'value',colorField: 'type',radius: 1,innerRadius: 0.6,label: {type: 'inner',offset: '-50%',content: '{value}G',style: {textAlign: 'center',fontSize: 14,},},interactions: [{type: 'element-selected',},{type: 'element-active',},],};return <Pie {...config} />;
};

效果:
在这里插入图片描述

什么是水波图?

什么是水波图?
参考URL: https://zhuanlan.zhihu.com/p/572212494

水波图看起来像一个盛水的球形容器,是一种展示一组数据的百分比值或展示项目进度的示意图,以动态水波的填充方式,视图表引人注目。

在这里插入图片描述

相似图表
1.表示占比和进度关系的图表

在这里插入图片描述

五、展示CPU、内存、硬盘信息

对于展示CPU、内存和硬盘等信息,以下是一些常见的图表类型可以考虑使用:

折线图:折线图可以展示随时间变化的CPU、内存和硬盘使用情况,可以通过折线的趋势来观察资源的变化。

饼图:饼图可以展示CPU、内存和硬盘的使用比例,可以通过扇区的大小来比较不同资源的使用情况。

柱状图:柱状图可以直观地比较CPU、内存和硬盘的使用量,每个资源可以使用独立的柱子来表示。

仪表盘:仪表盘可以以可视化的方式展示CPU、内存和硬盘的使用率,通过指针或刻度来显示资源的当前使用情况

cpu、内存 demo

const CPUGauge = () => {const cpuModel = "Intel Core i5-9400F"; // CPU型号const cpuCores = 6; // CPU核心数const cpuFrequency = "3.0 GHz"; // CPU频率// 假设cpuUsage是CPU使用率的值,范围在0-1之间const cpuUsage = 0.75;const config = {percent: cpuUsage,type: 'meter',innerRadius: 0.75,range: {ticks: [0, 1 / 3, 2 / 3, 1],color: ['#30BF78', '#FAAD14', '#F4664A'], // 调整颜色顺序},indicator: {pointer: {style: {stroke: '#D0D0D0',},},pin: {style: {stroke: '#D0D0D0',},},},statistic: {content: {formatter: () => `${Math.round(cpuUsage * 100)}%`, // 将CPU使用率转换为百分比形式style: {fontSize: '36px',lineHeight: '36px',},},},};return (    <div><div>CPU型号: {cpuModel},核心数: {cpuCores},频率: {cpuFrequency}</div><Gauge {...config} /></div>);
};const MemoryLiquid = () => {// 假设totalMemory和usedMemory是总内存和当前使用内存的值const totalMemory = 16; // 单位:GBconst usedMemory = 8; // 单位:GBconst memoryUsage = usedMemory / totalMemory; // 计算内存使用率const config = {percent: memoryUsage,outline: {border: 4,distance: 8,},wave: {length: 128,},};return (<div><div>总内存: {totalMemory}GB,当前使用内存: {usedMemory}GB</div><Liquid {...config} /></div>);
};

展示硬盘信息 demo

在电脑中,为了
让使用者直观清楚地看出磁盘“已用空间”与“可用空间”占“整个磁盘空间”的百分比,使用合适的统计图是扇形图。

const DiskInfo = () => {const data = [{type: '已使用',value: 80,},{type: '剩余空间',value: 20,},{type: '上传目录空间',value: 50, // 某个目录的占用空间大小},{type: '上传目录剩余',value: 50, // 某个目录的剩余空间大小},];const config = {appendPadding: 10,data,angleField: 'value',colorField: 'type',radius: 0.8,label: {type: 'outer',content: '{name} {percentage}',},interactions: [{type: 'pie-legend-active',},{type: 'element-active',},],};return <Pie {...config} />;
};

然后直接使用 组件 就行。
在这里插入图片描述

我想在图片下添加额外文字描述呢?

思路,修改return返回,之前 return 一个组件。现在我们用div包裹一下。

原来:

return <Pie {...config} />;

改为:

return (<div><Pie {...config} /><div>总内存: {totalMemory}GB,当前使用内存: {usedMemory}GB</div></div>);

六、其他参考

ant design pro (十)advanced 图表
参考URL: https://www.cnblogs.com/crazycode2/p/10085250.html
不要再问G2、G2Plot、Ant Design Charts什么关系了
参考URL: https://www.yuque.com/antv/g2plot/iqimgm

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/614369.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

鸿蒙原生应用再添新丁!万达 入局鸿蒙

鸿蒙原生应用再添新丁&#xff01;万达 入局鸿蒙 来自 HarmonyOS 微博1月11日消息&#xff0c;#万达酒店及度假村启动鸿蒙原生应用及元服务开发# 作为具有中国特色的国牌服务酒店标杆之一&#xff0c;万达酒店及度假村Wanda 将带来全新的服务和交互方式&#xff0c;一步获取“…

网络之路28:二层链路聚合

正文共&#xff1a;1666 字 14 图&#xff0c;预估阅读时间&#xff1a;2 分钟 目录 网络之路第一章&#xff1a;Windows系统中的网络 0、序言 1、Windows系统中的网络1.1、桌面中的网卡1.2、命令行中的网卡1.3、路由表1.4、家用路由器 网络之路第二章&#xff1a;认识企业设备…

计算机的中断

将用户态转换为内核态 系统调用&#xff1a;应用程序向OS发出服务请求异常&#xff1a;不良的应用程序的非法指令中断&#xff1a;来源于外部设备&#xff0c;即不同的硬件设备的计时器和网络中断&#xff0c;其对应用程序是透明的 应用调用外设 应用——>OS——>外设…

微信小程序如何使用天地图的逆地理编码api

本文只介绍如何使用天地图api&#xff0c;如若要显示天地图&#xff0c;使用 web-view 天地图逆地理编码api 1、使用wx.request 发送请求 getLocation() {wx.getLocation({type: gcj02,success: (res) > {// 调用天地图逆地理编码apithis.initTianDiMap(res.longitude, re…

代理IP的计费方式有哪些?

代理IP是网络爬虫、数据分析、电商运营等网络活动的必备工具&#xff0c;可以从优质的代理IP提供商中购买&#xff0c;那么代理 IP 服务的付费模式主要有哪些呢&#xff1f; 1、按量计费 按量计费是一种按照实际使用量来收费的方式。一般来说&#xff0c;这种计费方式的单价会…

华为OD机试真题-字符串拼接-2023年OD统一考试(C卷)

题目描述: 给定M(0<M<=30)个字符(a-z),从中取出任意字符(每个字符只能用一次)拼接成长度为N(0<N<=5)的字符串,要求相同的字符不能相邻,计算出给定的字符列表能拼接出多少种满足条件的字符串,输入非法或者无法拼接出满足条件的字符串则返回0。 输入描述: …

【AI】ObjectCenteredSensing

1. 物体检测 .1. 流体 D. V. Q. Rodrigues, D. Rodriguez and C. Li, “Liquid Aerosol Detection Based on Sub-THz Portable Doppler Radars,” 2020 IEEE Asia-Pacific Microwave Conference (APMC), 2020, pp. 504-506, doi: 10.1109/APMC47863.2020.9331483. [pdf] Bala …

Backtrader 文档学习-Strategy with Signals

Backtrader 文档学习-Strategy with Signals backtrader可以不通过重写策略的方式触发交易&#xff0c;尽管重写策略是首选通用的方式。 下面介绍通过使用信号也是可以实现交易触发的。 1.定义signal import backtrader as btdata bt.feeds.OneOfTheFeeds(datanamemydatana…

力扣_数组26—合并两个有序数组

题目 给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2&#xff0c;另有两个整数 m 和 n &#xff0c;分别表示 nums1 和 nums2 中的元素数目。 请你 合并 nums2 到 nums1 中&#xff0c;使合并后的数组同样按 非递减顺序 排列。 注意&#xff1a;最终&#xff0c;合并…

14. C++ malloccallocrecalloc

一、malloc函数 谈到malloc函数相信学过c语言的人都很熟悉&#xff0c;但是malloc底层到底做了什么又有多少人知道。 1.1 关于malloc相关的几个函数 可以这样认为&#xff08;window下&#xff09;原型&#xff1a; extern void *malloc(unsigned int num_bytes);如果分配成…

怎么用 Excel 做出专业的 project 甘特图?10个步骤和60个模板

使用Excel来创建Project甘特图的步骤包括&#xff1a;1、基本设置和布局调整、2、数据输入和时间线配置、3、任务依赖性和进度跟踪、4、视觉效果优化、5、数据更新和维护、6、模板保存和共享。尤其突出基本设置和布局调整&#xff0c;它是构建一个清晰、有效的甘特图的基础。 甘…

基于龙格库塔算法的SIR病毒扩散预测matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 基于龙格库塔算法的SIR病毒扩散预测,通过龙格库塔算法求解传染病模型的微分方程。输出易受感染人群数量曲线&#xff0c;感染人群数量曲线&#xff0c;康复人群数…

CAS-ABA问题编码实战

多线程情况下演示AtomicStampedReference解决ABA问题 package com.nanjing.gulimall.zhouyimo.test;import java.util.concurrent.TimeUnit; import java.util.concurrent.atomic.AtomicInteger; import java.util.concurrent.atomic.AtomicStampedReference;/*** @author zho…

如何使用自定义注解

1、自定义注解需要用到那些元注解 1、Retention 2、Target 3、Documented 4、Inherited 2、元注解解释说明 Retention&#xff1a;表示需要在什么级别保存该注释消息&#xff0c;可选参数如下&#xff1a;&#xff08;RetentionPoicy&#xff09; RetentionPolicy.SOURCE&…

nextjs + ahooks 报错 Cannot use import statement outside a module

在 nextjs 中使用 ahooks 时&#xff0c;报错 SyntaxError: Cannot use import statement outside a module&#xff0c;如下图所示&#xff1a; 解决方案 transpilePackages 官网介绍 Next.js can automatically transpile and bundle dependencies from local packages (lik…

【Flutter 开发实战】Dart 基础篇:常见的数据类型

Dart 支持许多数据类型&#xff0c;包括我们常见的 Numbers&#xff08;数值类型&#xff09;、Strings&#xff08;字符串类型&#xff09;、Booleans&#xff08;布尔类型&#xff09;&#xff0c;也支持一些包括 Collections&#xff08;集合类型&#xff09;、Records&…

idea编译报错(Maven项目)

idea编译报错 找不到符号 第一步&#xff1a;开启注解处理器 第二步&#xff1a;清理MVN&#xff0c;package并重新编译 第三步&#xff1a;重新导入项目&#xff1a;

04.C++模板笔记

1、模板 ①与具体类型无关的代码&#xff1a;泛型编程 ②模板的使用格式&#xff1a; 一个类型&#xff1a;template<typename T> 或者template<class T> 多个类型&#xff1a;template<typename T1,typename T2>或者template<class T1,class T2>…

遇到的各种问题

软件 mpv倍速等功能问题 typora字数过多卡顿原因 node.js安装教程 pycharm模板——模版会在新建文件的时候&#xff0c;自动添加到文件内容里插件——如何下载插件&#xff0c;有哪些推荐插件 mpv 倍速等功能问题 官网有快捷键&#xff1a;https://mazhuang.org/wiki/mpv/ t…