当前位置： 首页 > news >正文

React中使用 Ant Design Charts 图表

news 来源：原创 2025/7/6 3:20:21 
// 引入 Ant Design Charts 的柱状图组件 Column
import { Column } from '@ant-design/charts';// 定义函数组件 App，用于展示柱状图
function App() {// 数据源：每个对象代表一个柱子，包含类型（type）和销售额（sales）const data = [{ type: '家具家电', sales: 38 },{ type: '粮油副食', sales: 52 },{ type: '生鲜水果', sales: 61 },{ type: '美容洗护', sales: 145 },{ type: '母婴用品', sales: 48 },{ type: '进口食品', sales: 38 },{ type: '食品饮料', sales: 38 },{ type: '家庭清洁', sales: 38 },];// 配置项：传递给 Column 组件的图表配置const config = {data,                // 使用上面定义的数据xField: 'type',      // X 轴字段名，对应数据中的 "type"yField: 'sales',     // Y 轴字段名，对应数据中的 "sales"// 标签配置：显示在柱子上的数值标签样式label: {position: 'top',   // 标签显示在柱子顶部style: {fill: '#FFFFFF', // 标签文字颜色为白色opacity: 1       // 设置不透明，确保清晰可见}},// X 轴配置xAxis: {label: {autoHide: true,   // 当标签过长时自动隐藏autoRotate: true  // 自动旋转标签以避免重叠}}};// 返回 JSX 结构return (<div style={{ width: '500px', margin: '100px' }}>{/* 提示文本 */}hello App{/* 渲染柱状图，传入配置项 */}<Column {...config} /></div>);
}// 导出组件，供其他文件引入使用
export default App;

效果图：

相关文章：

React中使用 Ant Design Charts 图表

// 引入 Ant Design Charts 的柱状图组件 Column import { Column } from ant-design/charts;// 定义函数组件 App&#xff0c;用于展示柱状图 function App() {// 数据源&#xff1a;每个对象代表一个柱子&#xff0c;包含类型&#xff08;type&#xff09;和销售额&#xff0…...

编程日记 2025/7/6 3:20:21

佰力博科技与您探讨压电材料的原理与压电效应的应用

压电材料的原理基于正压电效应和逆压电效应&#xff0c;即机械能与电能之间的双向转换特性。 压电材料的原理源于其独特的晶体结构和电-机械耦合效应&#xff0c;具体可分为以下核心要点&#xff1a; 1. ‌正压电效应与逆压电效应的定义‌ ‌正压电效应‌&#xff1a;当压电…...

编程日记 2025/6/27 23:22:05

vscode打开vue + element项目

好嘞&#xff0c;我帮你详细整理一个用 VS Code 来可视化开发 Vue Element UI 的完整步骤&#xff0c;让你能舒服地写代码、预览界面、调试和管理项目。 用 VS Code 可视化开发 Vue Element UI 全流程指南 一、准备工作 安装 VS Code 官网下载安装&#xff1a;https://code…...

编程日记 2025/6/27 22:57:51

一步步解析 HTTPS

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/literature?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;…...

编程日记 2025/6/27 23:26:30

使用vue2做一个生成二维码的案例【可当组件使用】

最近有个需求需要用前端来生成一个二维码&#xff0c;就封装了一个简单的组件&#xff0c;这篇文章来分享给大家。 使用的技术&#xff1a; Vue2 Ant Design Vue QRCodeJS2 node版本&#xff1a;16.20 组件样式&#xff1a; 大家可以根据自己的需求来调整代码。 依赖安装&am…...

编程日记 2025/6/27 23:27:03

Hadoop-HA高可用集群启动nameNode莫名挂掉，排错解决

Hadoop-HA高可用集群启动nameNode莫名挂掉&#xff0c;排错解决 nameNode错误日志 2025-05-21 16:14:12,218 INFO org.apache.hadoop.ipc.Client: Retrying connect to server: node01/192.168.191.111:8485. Already tried 5 time(s); retry policy is RetryUpToMaximumCoun…...

编程日记 2025/6/27 22:57:52

从零基础到最佳实践：Vue.js 系列（2/10）：《模板语法与数据绑定》

Vue.js 模板语法与数据绑定&#xff1a;从基础到实践 关键点 Vue.js 的模板语法使用 HTML 结合特殊指令&#xff08;如 v-bind、v-on&#xff09;&#xff0c;实现动态界面。插值&#xff08;{{ }}&#xff09;显示数据&#xff0c;指令控制 DOM 行为&#xff0c;双向绑定简化…...

编程日记 2025/6/27 23:38:43

第二章：Android常用UI控件

1、介绍&#xff1a; 控件是界面组成的主要元素&#xff0c;界面中的控件有序排放和完美组合&#xff0c;便可在用户眼前呈现出丰富多彩的页面。 2、常用控件&#xff1a; 一、TextView控件&#xff1a; 在使用手机时&#xff0c;经常会看见一些文本信息&#xff0c;这些文本…...

编程日记 2025/7/6 3:06:14

LeetCode 1004. 最大连续1的个数 III

LeetCode 1004题 “最大连续1的个数 III” 是一道关于数组和滑动窗口的问题。题目描述如下&#xff1a; 题目描述 给定一个由若干 0 和 1 组成的数组 nums&#xff0c;以及一个整数 k。你可以将最多 k 个 0 翻转为 1。返回经过翻转操作后&#xff0c;数组中连续 1 的最大个数…...

编程日记 2025/7/6 3:15:51

Flink CDC 3.4 发布, 优化高频 DDL 处理，支持 Batch 模式，新增 Iceberg 支持

引言 Apache Flink 社区很开心地宣布&#xff0c;在经过4个月的版本开发之后&#xff0c;Flink CDC 3.4.0 版本已经正式发布。Flink CDC 是流行的流式数据集成框架&#xff0c;CDC 3.4.0 版本强化了框架对于高频表结构变更的支持&#xff0c;框架支持了 batch 执行模式&#x…...

编程日记 2025/6/27 23:10:13

NIFI的处理器:JSLTTransformJSON 2.4.0

该处理器使用JSLT转换FlowFile JSON有效负载的格式。使用转换后的内容创建新的FlowFile&#xff0c;并将其路由到“成功”关系。如果JSLT转换失败&#xff0c;则将原始FlowFile路由到“失败”关系。 需要注意的是&#xff0c;编译JSLT转换可能相当昂贵。理想情况下&#xff0c…...

编程日记 2025/6/27 22:57:56

k8s-ServiceAccount 配置

在 Kubernetes 中 ServiceAccount 是一种为 Pod 提供身份认证的机制&#xff0c;允许 Pod 以特定的身份访问 Kubernetes API 服务器。 **Role&#xff08;角色&#xff09;**是 Kubernetes 中定义权限的资源对象&#xff0c;它只能在特定的命名空间内生效。Role 用于定义一组权…...

编程日记 2025/6/27 23:12:03

Python Lambda 表达式

​在 Python 编程中&#xff0c;Lambda 表达式是一个非常强大且实用的工具&#xff0c;它就像一把瑞士军刀&#xff0c;能在各种场景下帮助我们写出简洁、优雅的代码。接下来&#xff0c;就让我们一起深入探索 Python Lambda 表达式的奥秘。 一、Lambda 表达式的基础认知​ 1…...

编程日记 2025/7/4 6:00:46

【ffmpeg】ffprobe基本用法

ffprobe 是 FFmpeg 工具集中的一个强大命令行工具&#xff0c;主要用于分析多媒体文件&#xff08;如视频、音频等&#xff09;的格式和内容信息。它可以提取文件的元数据、编解码器信息、流详情、帧信息等&#xff0c;而无需对文件进行转码或修改。 基本用法 ffprobe [选项] …...

编程日记 2025/7/6 3:10:46

Java 代码生成工具：如何快速构建项目骨架？

Java 代码生成工具&#xff1a;如何快速构建项目骨架&#xff1f; 在 Java 项目开发过程中&#xff0c;构建项目骨架是一项繁琐但又基础重要的工作。幸运的是&#xff0c;Java 领域有许多代码生成工具可以帮助我们快速完成这一任务&#xff0c;大大提高开发效率。 一、代码生…...

编程日记 2025/7/6 3:17:26

模板初阶【C++】

一、 泛型编程 前言&#xff1a; 我们经常会用到数据的交换&#xff0c;C中的函数重载可以完成 //函数重载 void swap(int& x,int& y) {int tmp x;x y;y tmp; }void swap(double& x, double& y) {double tmp x;x y;y tmp; }void swap(char& x, ch…...

编程日记 2025/6/27 23:16:33

URL 类知识点详解

URL 类知识点详解 1. 基本概念与位置 所属包: java.net.URL核心功能: 表示统一资源定位符（Uniform Resource Locator），用于标识和定位网络资源（如网页、文件、API接口）。支持多种协议：HTTP、HTTPS、FTP、file（本地文件）等。不可变类：一旦创建，内容不可修改（线程安全…...

编程日记 2025/7/6 3:15:51

如何使用redis做限流（golang实现小样）

在实际开发中，限流（Rate Limiting）是一种保护服务、避免接口被恶意刷流的常见技术。常用的限流算法有令牌桶、漏桶、固定窗口、滑动窗口等。由于Redis具备高性能和原子性操作，常常被用来实现分布式限流。 下面给出使用Golang结合Redis实现简单限流的几种常见方式（以“固定…...

编程日记 2025/7/6 3:15:01

OpenHarmony外设驱动使用 （九），Pin_auth

OpenHarmony外设驱动使用 &#xff08;九&#xff09; Pin_auth 概述 功能简介 口令认证是端侧设备不可或缺的一部分&#xff0c;为设备提供一种用户认证能力&#xff0c;可应用于设备解锁、支付、应用登录等身份认证场景。用户注册口令后&#xff0c;口令认证模块就可为设备…...

编程日记 2025/7/6 3:15:00

MySQL基础（​​InnoDB）

✅ ​​InnoDB​​&#xff1a;支持事务、行级锁、外键。 ​​为什么要用事务&#xff1f;​​ ​​安全​​&#xff1a;如果中途发现错误&#xff08;比如改错分数&#xff09;&#xff0c;可以一键撤销所有操作&#xff0c;就像游戏里的“回档”功能&#xff01; ​​原子…...

编程日记 2025/6/27 23:14:37

自建srs实时视频服务器支持RTMP推流和拉流

文章目录 一、整体示意图二、服务器端1.srs简介及架构2.docker方式安装3.k8s方式安装4.端口 三、推流端1.OBS Studio2.ffmpeg推流3.streamlabs苹果手机4.twire安卓手机5.网络推流摄像头 四、拉流端1.vlc2.srs 参考awesome系列&#xff1a;https://github.com/juancarlospaco/aw…...

编程日记 2025/6/27 23:20:27

​C++性能优化的7大核心策略与实战案例

在大型C项目中&#xff0c;性能优化需从语言特性、系统架构、硬件特性等多维度切入。以下是经过验证的关键技术路径&#x1f447; &#x1f527; ​一、内存管理的极致控制​ ​问题​&#xff1a;频繁的动态内存分配会导致性能抖动和内存碎片&#xff0c;尤其在实时系统中可能…...

编程日记 2025/6/27 23:21:06

《国家高等教育智慧平台：重塑学习新时代》

时代之需&#xff1a;平台应运而生 在数字化浪潮席卷全球的当下&#xff0c;高等教育领域也在经历着深刻的变革。数字化技术的迅猛发展&#xff0c;正以前所未有的力量重塑着高等教育的形态。从在线课程的兴起&#xff0c;到虚拟实验室的应用&#xff0c;再到智能化教学工具的普…...

编程日记 2025/6/27 23:14:09

【Django】Django DRF 中如何手动调用分页器返回分页数据（APIView，action场景）

&#x1f4e6; Django DRF 中如何手动调用分页器返回分页数据&#xff08;APIView&#xff0c;action场景&#xff09; 在使用 Django REST Framework&#xff08;DRF&#xff09;时&#xff0c;很多人习惯了用 GenericAPIView 或 ViewSet 自动帮我们处理分页。但在某些场景中…...

编程日记 2025/6/27 23:19:05

遨游科普：三防平板有哪些品牌？哪个品牌值得推荐？

在工业数字化与户外作业场景日益多元化的今天&#xff0c;三防平板凭借其卓越的防护性能与功能集成能力&#xff0c;成为电力巡检、地质勘探、应急救援等领域不可或缺的智能终端。所谓“三防”&#xff0c;即防尘、防水、防摔&#xff0c;国际标准IP68与军用标准MIL-STD-810H的…...

编程日记 2025/6/27 23:38:32

Flannel后端为UDP模式下，分析数据包的发送方式(一)

Flannel 使用的是 UDP 模式&#xff0c;分析发往 10.244.2.5 的数据包会从哪个网卡发出。 路由表 以下是提供的路由表&#xff1a; Kernel IP routing table Destination Gateway Genmask Flags Metric Ref Use Iface 0.0.0.0 192.168.1.1 …...

编程日记 2025/6/27 23:24:20

华为鸿蒙电脑发布，折叠屏怎么选？

1⃣屏幕特性&#xff1a; 分辨率&#xff1a;高分辨率能保证图像和文字的清晰细腻 屏幕材质&#xff1a;OLED 屏幕通常具有更好的对比度、色彩表现和更广的色域 刷新率&#xff1a;支持自适应刷新率的屏幕可以根据不同的使用场景自动调整刷新率&#xff0c;在保证流畅度的同时优…...

编程日记 2025/6/27 23:17:30

将VMware上的虚拟机和当前电脑上的Wifi网卡处在同一个局域网下，实现同一个局域网下实现共享

什么是桥接模式&#xff1a;桥接模式&#xff08;Bridging Mode&#xff09;是一种网络连接模式&#xff0c;常用于虚拟机环境中&#xff0c;将虚拟机的虚拟网络适配器直接连接到主机的物理网络适配器上&#xff0c;使虚拟机能够像独立的物理设备一样直接与物理网络通信 1.打开…...

编程日记 2025/6/27 23:38:07

论文阅读：Auto-Encoding Variational Bayes

对图像生成论文自编码变分贝叶斯Auto-Encoding Variational Bayes原理理解和记录 Abstract 我们如何在有向概率模型中&#xff0c;在具有难以处理的后验分布的连续潜在变量z和大型数据集的存在下&#xff0c;执行有效的推理和学习&#xff1f; 我们介绍了一种随机变分推理和学…...

编程日记 2025/6/27 23:40:09

API面临哪些风险，如何做好API安全？

API面临的风险 API&#xff08;应用程序编程接口&#xff09;在现代软件开发和集成中扮演着至关重要的角色&#xff0c;但同时也面临着多种安全风险&#xff0c;主要包括以下几个方面&#xff1a; 数据泄露风险&#xff1a; API通常涉及敏感数据的传输和交换&#xff0c;如用…...

编程日记 2025/6/27 23:13:51

C# Prism框架详解：构建模块化WPF应用程序

1. Prism框架简介 Prism是一个用于构建松散耦合、可测试和可维护的WPF桌面应用程序的框架。它最初由微软模式与实践团队开发&#xff0c;现在由社区维护&#xff0c;是构建企业级WPF应用程序的首选框架之一。 Prism框架的核心优势&#xff1a; 模块化设计&#xff1a;将应用…...

编程日记 2025/6/27 23:26:16

【工具教程】图片识别内容改名，图片指定区域识别重命名，批量识别单据扫描件批量改名，基于WPF和腾讯OCR的实现方案

基于WPF和腾讯OCR的图片指定区域识别与批量重命名实现方案 一、应用场景 ​​电商商品管理​​ 电商平台每天需处理大量商品图片&#xff0c;原始文件名无规律&#xff08;如IMG_001.jpg&#xff09;。通过指定图片中商品名称、颜色、尺码等区域&#xff0c;OCR识别后自动重命名…...

编程日记 2025/6/27 23:16:34

数独求解器3.0 增加latex格式读取

首先说明两种读入格式 latex输入格式说明 \documentclass{article} \begin{document}This is some text before oku.\begin{array}{|l|l|l|l|l|l|l|l|l|} \hline & & & & 5 & & 2 & 9 \\ \hline& & 5 & 1 & & 7…...

编程日记 2025/6/27 23:00:22

WPF核心类继承树结构

WPF(Windows Presentation Foundation)的类继承结构非常庞大而复杂&#xff0c;以下是最核心的继承树结构&#xff0c;按照主要功能区域展示&#xff1a; 基础对象层级 Object └── DispatcherObject└── DependencyObject├── Freezable│ ├── Animatable│ │ …...

编程日记 2025/6/27 23:21:18

Mysql的binlog日志

环境准备 [rootmysql152 ~]# yum install -y mysql-server mysql [rootmysql152 ~]# systemctl enable mysqld --now1.查看正在使用的binlog日志文件 mysql> show master status; ---------------------------------------------------------------------------- | File …...

编程日记 2025/6/27 23:33:53

Java 安全SPEL 表达式SSTI 模版注入XXEJDBCMyBatis 注入

https://github.com/bewhale/JavaSec https://github.com/j3ers3/Hello-Java-Sec https://mp.weixin.qq.com/s/ZO4tpz9ys6kCIryNhA5nYw #Java 安全 -SQL 注入 -JDBC&MyBatis -JDBC 1 、采用 Statement 方法拼接 SQL 语句 2 、 PrepareStatement 会对 SQL 语…...

编程日记 2025/6/27 23:20:07

TypeScript 泛型讲解

如果说 TypeScript 是一门对类型进行编程的语言&#xff0c;那么泛型就是这门语言里的&#xff08;函数&#xff09;参数。本章&#xff0c;我将会从多角度讲解 TypeScript 中无处不在的泛型&#xff0c;以及它在类型别名、对象类型、函数与 Class 中的使用方式。 一、泛型的核…...

编程日记 2025/6/27 23:16:28

BERT、GPT-3与超越：NLP模型演进全解析

自然语言处理&#xff08;NLP&#xff09;领域近年来经历了前所未有的变革&#xff0c;从早期的统计方法到如今的深度学习大模型&#xff0c;技术的进步推动了机器理解、生成和交互能力的飞跃。其中&#xff0c;BERT和GPT-3作为两个里程碑式的模型&#xff0c;分别代表了不同的…...

编程日记 2025/6/27 23:19:53

RISC-V IDE MRS2 开发笔记一：volatile关键字的使用

RISC-V IDE MRS2 开发笔记一&#xff1a;volatile关键字的使用 一、volatile是什么 二、GCC 中 volatile 的行为 2.1禁止编译器优化 2.2 不等于内存屏障 2.3 GCC扩展行为 三、什么时候需要 volatile 3.1防止编译器优化掉“有效代码” 3.2 访问硬件寄存器 3.3 中断服务…...

编程日记 2025/6/27 23:06:32

25、工业防火墙 - 工控网络保护 (模拟) - /安全与维护组件/industrial-firewall-dcs-protection

76个工业组件库示例汇总 工业防火墙 - 工控网络保护 (模拟) 概述 这是一个交互式的 Web 组件，旨在模拟工业防火墙在保护关键工控网络（特别是 DCS - 分布式控制系统）免受网络攻击（如勒索软件传播）方面的核心功能。组件通过可视化简化的网络拓扑、模拟网络流量、应用防火…...

编程日记 2025/6/27 23:20:33

LAN（局域网）和WAN（广域网）

你的问题非常清晰&#xff01;我来用一个直观的比喻实际拓扑图帮你彻底理解LAN&#xff08;局域网&#xff09;和WAN&#xff08;广域网&#xff09;如何协同工作&#xff0c;以及路由器在其中的位置。你可以把整个网络想象成一座城市&#xff1a; 1. 比喻&#xff1a;城市交通…...

编程日记 2025/6/27 23:20:57

ArcGIS Pro 3.4 二次开发 - Arcade

环境&#xff1a;ArcGIS Pro SDK 3.4 .NET 8 文章目录 Arcade1 基本查询1.1 基本查询1.2 使用要素进行基本查询1.3 使用 FeatureSetByName 检索要素1.4 使用过滤器检索要素1.5 使用数学函数计算基本统计量1.6 使用 FeatureSet 函数的 Filter 和 Intersects 2 评估表达式2.1 评…...

编程日记 2025/6/27 23:35:04

PCB智能报价系统——————仙盟创梦IDE

软件署名 代码贡献&#xff1a; 紫金电子科技有限公司 文案正路&#xff1a;cybersnow 正文 对企业的竞争力有着深远影响。传统的 PCB 报价方式往往依赖人工核算&#xff0c;不仅耗时较长&#xff0c;还容易出现误差。随着科技的发展&#xff0c;PCB 自动报价系统应运而生&a…...

编程日记 2025/6/27 22:58:03

灾备认证助力构建数据资产安全防线‌

信息安全保障人员&#xff08;CISAW&#xff09;-灾难备份与恢复认证 1.权威认证体系&#xff1a;技术护城河‌ 在数字化进程加速的背景下&#xff0c;数据资产已成为政府与企业的核心资源&#xff0c;容灾备份能力成为保障业务连续性的关键。特别是近年来&#xff0c;因灾备缺…...

编程日记 2025/6/27 23:02:15

[特殊字符] 遇见Flask

一、初识Flask&#xff1a;像风一样自由 想象一下&#xff0c;你手里有一盒乐高积木——没有说明书&#xff0c;但每一块都精致小巧&#xff0c;任你组合成城堡、飞船&#xff0c;甚至整个宇宙。Flask就是这样一个存在。它不像Django那样“手把手教你搭房子”&#xff0c;而是…...

编程日记 2025/6/27 23:20:29

Axure高级交互设计：中继器嵌套动态面板实现超强体验感台账

亲爱的小伙伴，在您浏览之前，烦请关注一下，在此深表感谢！如有帮助请订阅专栏！ Axure产品经理精品视频课已登录CSDN可点击学习https://edu.csdn.net/course/detail/40420 课程主题：中继器嵌套动态面板 主要内容：中继器内部嵌套动态面板，实现可移动式台账，增强数据表现…...

编程日记 2025/6/27 23:40:08

告别手动绘图！2分钟用 AI 生成波士顿矩阵

波士顿矩阵作为经典工具&#xff0c;始终是企业定位产品组合、制定竞争策略的核心方法论。然而&#xff0c;传统手动绘制矩阵的方式&#xff0c;往往面临数据处理繁琐、图表调整耗时、团队协作低效等痛点。 随着AI技术的发展&#xff0c;这一现状正在被彻底改变。boardmix博思白…...

编程日记 2025/6/27 23:19:45

iframe加载或者切换时候，短暂的白屏频闪问题解决

问题描述 iframe加载或者是切换iframe链接的时候&#xff0c;会有短暂的白屏&#xff0c;这个时候是在加载&#xff0c;目前没有想到避免的问题&#xff0c;应该是浏览器层面的&#xff0c;所以解决方法之一就是&#xff0c;用页面的主题背景色来遮盖一下&#xff0c;当他加载…...

编程日记 2025/6/27 23:38:22

Python数据可视化高级实战之一——绘制GE矩阵图

目录 一、课程概述 二、GE矩阵？ 三、GE 矩阵图的适用范围 五、GE 矩阵的评估方法 （一）市场吸引力的评估要素 二、企业竞争实力的评估要素 三、评估方法与实践应用 1. 定量与定性结合法 2. 数据来源 六、GE矩阵的图形化实现 七、总结：GE 矩阵与 BCG 矩阵的对比分析 （一）GE…...

编程日记 2025/6/27 23:00:40

量子计算与云计算的融合：技术前沿与应用前景

目录 引言 量子计算基础 量子计算的基本原理 量子计算的优势与挑战 量子计算的发展阶段 云计算基础 云计算的基本概念 云计算的应用领域 云计算面临的挑战 量子计算与云计算的结合 量子云计算的概念与架构 量子云计算的服务模式 量子云计算的优势 量子云计算的发展…...

编程日记 2025/6/27 23:04:53