React18 apexcharts数据可视化之甜甜圈图
03 甜甜圈图
apexcharts数据可视化之甜甜圈图。
有完整配套的Python后端代码。
本教程主要会介绍如下图形绘制方式:
- 基本甜甜圈图
- 个性图案的甜甜圈图
- 渐变色的甜甜圈图
面包圈
import ApexChart from 'react-apexcharts';export function DonutUpdate() {// 数据序列const series = [44, 55, 13, 33]// 图表选项const options = {// 图表chart: {width: 380,type: 'donut',},dataLabels: {enabled: false},// 响应式responsive: [{breakpoint: 480,options: {chart: {width: 200},legend: {show: false}}}],// 图例legend: {position: 'right',offsetY: 0,height: 230,}}return (<div id="chart"><ApexChart options={options} series={series} type="donut" height={600}/></div>)
}

个性图案
import ApexChart from 'react-apexcharts';export function DonutWithPattern() {// 数据序列const series = [44, 55, 41, 17, 15]// 图表选项const options = {// 图表选项chart: {width: 380,type: 'donut',// 阴影dropShadow: {enabled: true,color: '#111',top: -1,left: 3,blur: 3,opacity: 0.2}},stroke: {width: 0,},// 绘图选项plotOptions: {pie: {donut: {labels: {show: true,total: {showAlways: true,show: true}}}}},labels: ["喜剧片", "动作片", "科幻片", "戏剧片", "恐怖片"],dataLabels: {dropShadow: {blur: 3,opacity: 0.8}},// 填充样式fill: {type: 'pattern',opacity: 1,pattern: {enabled: true,style: ['verticalLines', 'squares', 'horizontalLines', 'circles', 'slantedLines'],},},states: {hover: {filter: 'none'}},// 主题theme: {palette: 'palette2'},// 标题title: {text: "最喜欢的电影类型统计图"},// 响应式responsive: [{breakpoint: 480,options: {chart: {width: 200},legend: {position: 'bottom'}}}]}return (<div id="chart"><ApexChart options={options} series={series} type="donut" height={600}/></div>)
}

渐变
import ApexChart from 'react-apexcharts';export function DonutGradient() {// 数据序列const series = [44, 55, 41, 17, 15]// 图表选项const options = {chart: {width: 380,type: 'donut',},// 绘制选项:自定义开始角度和结束角度plotOptions: {pie: {startAngle: -90,endAngle: 270}},dataLabels: {enabled: false},labels: ["喜剧片", "动作片", "科幻片", "戏剧片", "恐怖片"],// 填充类型:渐变fill: {type: 'gradient',},legend: {formatter: function(val, opts) {return val + " - " + opts.w.globals.series[opts.seriesIndex]}},title: {text: '渐变甜甜圈与自定义的开始角度'},responsive: [{breakpoint: 480,options: {chart: {width: 200},legend: {position: 'bottom'}}}]}return (<div id="chart"><ApexChart options={options} series={series} type="donut" height={550}/></div>)
}

相关文章:
React18 apexcharts数据可视化之甜甜圈图
03 甜甜圈图 apexcharts数据可视化之甜甜圈图。 有完整配套的Python后端代码。 本教程主要会介绍如下图形绘制方式: 基本甜甜圈图个性图案的甜甜圈图渐变色的甜甜圈图 面包圈 import ApexChart from react-apexcharts;export function DonutUpdate() {// 数据…...
如何通过OpenHarmony的音频模块实现录音变速功能?
简介 OpenAtom OpenHarmony(以下简称“OpenHarmony”)是由开放原子开源基金会孵化及运营的开源项目,是面向全场景、全连接、全智能时代的智能物联网操作系统。 多媒体子系统是OpenHarmony系统中的核心子系统,为系统提供了相机、…...
探索 Rust 语言的精髓:深入 Rust 标准库
探索 Rust 语言的精髓:深入 Rust 标准库 Rust,这门现代编程语言以其内存安全、并发性和性能优势而闻名。它不仅在系统编程领域展现出强大的能力,也越来越多地被应用于WebAssembly、嵌入式系统、分布式服务等众多领域。Rust 的成功࿰…...
Log360:护航安全,远离暗网风险
暗网有时候就像是一个神秘的地下世界,是互联网的隐蔽角落,没有任何规则。这是一个被盗数据交易、网络犯罪分子策划下一步攻击的地方。但仅仅因为它黑暗,不意味着你要对潜在的威胁视而不见。 暗网 这就是ManageEngine Log360的用武之地&…...
react使用antd警告:Warning: findDOMNode is deprecated in StrictMode.
警告信息: Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DOMWrap which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: htt…...
Docker Swarm - 删除 worker 节点
1、前提:集群环境已经运行 在manager节点上执行: # 查看节点信息 >>> docker node lsID HOSTNAME STATUS AVAILABILITY MANAGER STATUS ENGINE VERSION jr06s8pbrclkrxt7jpy7wae8t * iZ2ze78653g2…...
AI视频智能分析技术赋能营业厅:智慧化管理与效率新突破
一、方案背景 随着信息技术的快速发展,图像和视频分析技术已广泛应用于各行各业,特别是在营业厅场景中,该技术能够有效提升服务质量、优化客户体验,并提高安全保障水平。TSINGSEE青犀智慧营业厅视频管理方案旨在探讨视频监控和视…...
骨折分类数据集1129张10类别
数据集类型:图像分类用,不可用于目标检测无标注文件 数据集格式:仅仅包含jpg图片,每个类别文件夹下面存放着对应图片 图片数量(jpg文件个数):1129 分类类别数:10 类别名称:["avulsion_fracture",…...
Follow Your Pose: Pose-Guided Text-to-Video Generation using Pose-Free Videos
清华深&港科&深先进&Tencent AAAI24https://github.com/mayuelala/FollowYourPose 问题引入 本文的任务是根据文本来生成高质量的角色视频,并且可以通过pose来控制任务的姿势;当前缺少video-pose caption数据集,所以提出一个两…...
记录一次开源 MaxKey 安装部署
官方文档:https://www.maxkey.top/doc/docs/intro/ 开源代码:https://toscode.mulanos.cn/dromara/MaxKey 发行版:https://toscode.mulanos.cn/dromara/MaxKey/releases 一、准备工作 yum install -y yum-utils yum-config-manager --add-r…...
k8s基础命令
#查看pod kubectl get pod -n 命名空间 或者 kubectl get pod -n 命名控江 -o wide 例如: kubectl get pod -n databank-dev #查看deployment控制器 kubectl get deploy -n 命名空间 kubectl get deploy -n databank-dev #查看命名控制(namespace&am…...
【云原生_K8S系列】认识 Kubernetes
在当今数字化转型的浪潮中,企业对于构建高效、灵活的软件架构有了更高的期望。而在这个迅速变化的环境中,容器化技术如雨后春笋般涌现,为解决传统部署和管理软件所带来的挑战提供了一种全新的解决方案。在众多容器编排工具中,Kube…...
性能猛兽:OrangePi Kunpeng Pro评测!
1.引言 随着物联网和嵌入式系统的不断发展,对于性能强大、资源消耗低的单板计算机的需求也日益增加。在这个快节奏的技术时代,单板计算机已成为各种应用场景中不可或缺的组成部分,从家庭娱乐到工业自动化,再到科学研究࿰…...
六一儿童节创意项目:教你用HTML5和CSS3制作可爱的雪糕动画
六一儿童节快到了,这是一个充满童趣和欢乐的日子。为了给孩子们增添一份节日惊喜,我们决定用HTML5和CSS3制作一个生动有趣的雪糕动画。通过这个项目,不仅能提升你的前端技能,还能带给孩子们一份特别的节日礼物。无论你是前端开发新…...
日用百货元宇宙 以科技创新培育产业新质生产力
当前,我国乳品工业的科技创新进入深水区,不仅对科技的需求加大,还具有跨学科、多领域交叉的显著特征,在引领我国乳制品行业现代化产业体系建设过程中,不断催生新产业、新模式、新动能,面向行业未来的新质生…...
云服务器购买之后到部署项目的流程
1.通过账号密码登录百度智能云控制台; 2.进入对应的服务器‘云服务器BBC’ 找到’实例‘即找到对应的服务器列表; 此时通过本地电脑 1.cmd命令提示符 PING 服务器公网地址不通; 2.通过本地电脑进行远程桌面连接不通 原因:没有关联安全组,或者…...
2025秋招计算机视觉面试题(二)
面试题目录 Yolov5中的objectness的作用目标检测设置不同的anchor改善小目标及非正常尺寸目标的性能在目标Crowded的场景下经常出现误检的原因Unet网络结构中四次降采样的必要性为什么UNet++可以被剪枝在不同场景下进行目标的标记及训练以取得好的效果如何修改Yolov5目标检测实…...
ECU 关键通讯信息安全事件记录清单
车辆变速箱ECU(电子控制单元)控制器的通信信息安全对于确保车辆的正常运行和驾驶安全至关重要。以下是一些关键的通信信息安全事件,应当进行日志记录: 通信协议异常:记录任何不符合既定通信协议的数据包,这…...
webpack5基础和开发模式配置
运行环境 nodejs16 webpack基础 webpack打包输出的文件是bundle 打包就是编译组合 webpack本身功能 仅能编译js文件 开始使用 基本配置 五大核心概念 准备webpack配置文件 1.在根目录 2.命名为webpack.config.js 开发模式介绍 处理样式资源 处理css样式资源文件…...
11111111111111
11111111111111...
ES6从入门到精通:前言
ES6简介 ES6(ECMAScript 2015)是JavaScript语言的重大更新,引入了许多新特性,包括语法糖、新数据类型、模块化支持等,显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var…...
树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频
使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源: http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...
条件运算符
C中的三目运算符(也称条件运算符,英文:ternary operator)是一种简洁的条件选择语句,语法如下: 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true,则整个表达式的结果为“表达式1”…...
uniapp微信小程序视频实时流+pc端预览方案
方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度WebSocket图片帧定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐RTMP推流TRTC/即构SDK推流❌ 付费方案 (部分有免费额度&#x…...
【论文阅读28】-CNN-BiLSTM-Attention-(2024)
本文把滑坡位移序列拆开、筛优质因子,再用 CNN-BiLSTM-Attention 来动态预测每个子序列,最后重构出总位移,预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵(S…...
ArcGIS Pro制作水平横向图例+多级标注
今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作:ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等(ArcGIS出图图例8大技巧),那这次我们看看ArcGIS Pro如何更加快捷的操作。…...
Xen Server服务器释放磁盘空间
disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...
人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式
今天是关于AI如何在教学中增强学生的学习体验,我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育,这并非炒作,而是已经发生的巨大变革。教育机构和教育者不能忽视它,试图简单地禁止学生使…...
Vue ③-生命周期 || 脚手架
生命周期 思考:什么时候可以发送初始化渲染请求?(越早越好) 什么时候可以开始操作dom?(至少dom得渲染出来) Vue生命周期: 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...
HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力:训练时既扩散也回归,但推理时则扩散
前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说,在叠衣服的过程中,我会带着团队对比各种模型、方法、策略,毕竟针对各个场景始终寻找更优的解决方案,是我个人和我司「七月在线」的职责之一 且个人认为,…...
