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

apexcharts数据可视化之圆环柱状图

apexcharts数据可视化之圆环柱状图

有完整配套的Python后端代码。

本教程主要会介绍如下图形绘制方式:

  • 基础圆环柱状图
  • 多组数据圆环柱状图
  • 图片背景
  • 自定义角度
  • 渐变
  • 半个圆环图
  • 虚线圆环图

基础圆环图

import ApexChart from 'react-apexcharts';export function CircleChart() {// 数据序列const series = [70]// 图表选项const options = {chart: {height: 350,type: 'radialBar',},plotOptions: {radialBar: {hollow: {size: '70%',}},},labels: ['实时进度'],}return (<div id="chart"><ApexChart options={options} series={series} type="radialBar" height={550}/></div>)
}

在这里插入图片描述

多值圆环图

import ApexChart from 'react-apexcharts';export function MultiCircleChart() {// 数据序列const series = [44, 55, 67, 83]// 图表选项const options = {chart: {height: 350,type: 'radialBar',},plotOptions: {radialBar: {dataLabels: {name: {fontSize: '22px',},value: {fontSize: '16px',},total: {show: true,label: '合计',formatter: function (w) {// 默认情况下,此函数返回所有序列的平均值。// 下面只是展示自定义格式化器函数使用的一个示例return 249}}}}},labels: ['苹果', '橘子', '香蕉', '葡萄'],}return (<div id="chart"><ApexChart options={options} series={series} type="radialBar" height={550}/></div>)
}

在这里插入图片描述

图片背景

import ApexChart from 'react-apexcharts';export function ImageCircleChart() {// 数据序列const series = [67]// 图表选项const options = {chart: {height: 350, type: 'radialBar',},plotOptions: {radialBar: {// 雷达图图标hollow: {margin: 15,size: '70%',image: '/clock.png',imageWidth: 64,imageHeight: 64,imageClipped: false},dataLabels: {name: {show: false, color: '#fff'}, value: {show: true, color: '#333', offsetY: 70, fontSize: '22px'}}}},// 使用图片填充fill: {type: 'image', image: {src: ['/4274635880_809a4b9d0d_z.jpg'],}},stroke: {lineCap: 'round'},labels: ['波动率'],}return (<div id="chart"><ApexChart options={options} series={series} type="radialBar" height={550}/></div>)
}

在这里插入图片描述

自定义角度

import ApexChart from 'react-apexcharts';export function CustomAngleCircleChart() {// 数据序列const series = [76, 67, 61, 90]// 图表选项const options = {chart: {height: 390,type: 'radialBar',},plotOptions: {radialBar: {offsetY: 0,startAngle: 0, // 开始角度endAngle: 270, // 结束角度hollow: { // 中间图标margin: 5,size: '30%',background: 'transparent',image: undefined,},dataLabels: {name: {show: false,},value: {show: false,}},barLabels: {enabled: true,useSeriesColors: true, // 使用和对应图表相同颜色margin: 8,fontSize: '16px',formatter: function (seriesName, opts) {return seriesName + ":  " + opts.w.globals.series[opts.seriesIndex]},},}},colors: ['#1ab7ea', '#0084ff', '#39539E', '#0077B5'],labels: ['苹果', '橘子', '香蕉', '葡萄'],responsive: [{breakpoint: 480,options: {legend: {show: false}}}]}return (<div id="chart"><ApexChart options={options} series={series} type="radialBar" height={550}/></div>)
}

在这里插入图片描述

渐变

import ApexChart from 'react-apexcharts';export function GradientCircleChart() {// 数据序列const series = [75]// 图表选项const options = {chart: {height: 350,type: 'radialBar',toolbar: {show: true}},plotOptions: {radialBar: {startAngle: -135,endAngle: 225,hollow: {margin: 0,size: '70%',background: '#fff',image: undefined,imageOffsetX: 0,imageOffsetY: 0,position: 'front',dropShadow: {enabled: true,top: 3,left: 0,blur: 4,opacity: 0.24}},track: {background: '#fff',strokeWidth: '67%',margin: 0, // margin is in pixelsdropShadow: {enabled: true,top: -3,left: 0,blur: 4,opacity: 0.35}},// 数据标签dataLabels: {show: true,name: {offsetY: -10,show: true,color: '#888',fontSize: '17px'},value: {formatter: function (val) {return parseInt(val);},color: '#111',fontSize: '36px',show: true,}}}},// 渐变色填充fill: {type: 'gradient',gradient: {shade: 'dark',type: 'horizontal',shadeIntensity: 0.5,gradientToColors: ['#ABE5A1'],inverseColors: true,opacityFrom: 1,opacityTo: 1,stops: [0, 100]}},stroke: {lineCap: 'round'},labels: ['百分比'],}return (<div id="chart"><ApexChart options={options} series={series} type="radialBar" height={550}/></div>)
}

在这里插入图片描述

半个圆环图

import ApexChart from 'react-apexcharts';export function SemiCircleChart() {// 数据序列const series = [75]// 图表选项const options = {chart: {type: 'radialBar',offsetY: -20,sparkline: {enabled: true}},plotOptions: {radialBar: {// 通过角度控制只有一半startAngle: -90,endAngle: 90,track: {background: "#e7e7e7",strokeWidth: '97%',margin: 5, // margin is in pixelsdropShadow: {enabled: true,top: 2,left: 0,color: '#999',opacity: 1,blur: 2}},dataLabels: {name: {show: false},value: {offsetY: -2,fontSize: '22px'}}}},grid: {padding: {top: -10}},fill: {type: 'gradient',gradient: {shade: 'light',shadeIntensity: 0.4,inverseColors: false,opacityFrom: 1,opacityTo: 1,stops: [0, 50, 53, 91]},},labels: ['平均结果'],}return (<div id="chart"><ApexChart options={options} series={series} type="radialBar" height={550}/></div>)
}

在这里插入图片描述

虚线圆环图

import ApexChart from 'react-apexcharts';export function StrokedGaugeCircleChart() {// 数据序列const series = [75]// 图表选项const options = {chart: {height: 350,type: 'radialBar',offsetY: -10},plotOptions: {radialBar: {startAngle: -135,endAngle: 135,dataLabels: {name: {fontSize: '16px',color: undefined,offsetY: 120},value: {offsetY: 76,fontSize: '22px',color: undefined,formatter: function (val) {return val + "%";}}}}},fill: {type: 'gradient',gradient: {shade: 'dark',shadeIntensity: 0.15,inverseColors: false,opacityFrom: 1,opacityTo: 1,stops: [0, 50, 65, 91]},},// 线条stroke: {// 点的数量// 数字越小,越密集dashArray: 3},labels: ['中位数比'],}return (<div id="chart"><ApexChart options={options} series={series} type="radialBar" height={550}/></div>)
}

在这里插入图片描述

相关文章:

apexcharts数据可视化之圆环柱状图

apexcharts数据可视化之圆环柱状图 有完整配套的Python后端代码。 本教程主要会介绍如下图形绘制方式&#xff1a; 基础圆环柱状图多组数据圆环柱状图图片背景自定义角度渐变半个圆环图虚线圆环图 基础圆环图 import ApexChart from react-apexcharts;export function Cir…...

2024ciscn初赛——easycms

什么是CMS&#xff1f; CMS是“Content Management System”的缩写&#xff0c;意为“内容管理系统”。网站的开发者为了方便&#xff0c;制作了不同种类的CMS&#xff0c;可以加快网站开发的速度和减少开发的成本。 常见的CMS&#xff1a; php类cms系统&#xff1a;dedecms、…...

融合神话传说:构建公共开放平台的技术探索

当今科技发展日新月异的时代&#xff0c;我们越来越意识到跨文化的融合和开放共享的重要性。在这篇博客中&#xff0c;我们将探讨如何利用国外与国内古代神兽和神话故事的灵感&#xff0c;来设计一个创新的公共开放平台。 源自神话的灵感 古代神兽在不同文化中都扮演着重要角色…...

鸿蒙应用Stage模型【应用/组件级配置】

应用/组件级配置 在开发应用时&#xff0c;需要配置应用的一些标签&#xff0c;例如应用的包名、图标等标识特征的属性。本文描述了在开发应用需要配置的一些关键标签。 应用包名配置 应用需要在工程的AppScope目录下的[app.json5配置文件]中配置bundleName标签&#xff0c;…...

Python魔法之旅-魔法方法(05)

目录 一、概述 1、定义 2、作用 二、应用场景 1、构造和析构 2、操作符重载 3、字符串和表示 4、容器管理 5、可调用对象 6、上下文管理 7、属性访问和描述符 8、迭代器和生成器 9、数值类型 10、复制和序列化 11、自定义元类行为 12、自定义类行为 13、类型检…...

机器学习笔记(1):sklearn是个啥?

sklearn 简介 Sklearn是一个基于Python语言的开源机器学习库。全称Scikit-Learn&#xff0c;是建立在诸如NumPy、SciPy和matplotlib等其他Python库之上&#xff0c;为用户提供了一系列高质量的机器学习算法&#xff0c;其典型特点有&#xff1a; 简单有效的工具进行预测数据分…...

C++与C语言 通过指针改变const变量的值

一、问题描述 当一个变量声明为const时&#xff0c;通常是不可以改变它的值的&#xff0c;程序设计过程中也不应该这么做。 const int num 666;//我们不应该对num的值进行修改 // num 777; 此语句是错误的 当然&#xff0c;如果我们写以下语句&#xff0c;程序编译也会出现…...

OpenJDK优化技术之标量替换(Scalar Replacement)

标量替换 (SR) 是 OpenJDK 中一项强大的优化技术&#xff0c;旨在通过将复杂对象分解为更简单、更易于管理的标量变量来提高 Java 应用程序的性能。 1.前言 OpenJDK JVM 有两个即时编译器&#xff0c;C1 和 C2。C2 是一种应用许多优化来生成非常高效的编译版本程序的编译器。…...

优思学院|研发工程师获取六西格玛证书有用吗?

在现代的工业领域中&#xff0c;研发工程师不仅需要具备强大的技术能力&#xff0c;还需要掌握有效的管理方法&#xff0c;以确保产品的高质量和高效开发。六西格玛&#xff08;Six Sigma&#xff09;作为一种系统的质量管理方法&#xff0c;已经被广泛应用于各种行业。对于研发…...

C++第二十二弹---vector深度剖析及模拟实现(下)

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】 目录 1、容量操作 2、内容修改操作 3、打印函数 4、迭代器失效 4.1、什么是迭代器失效 4.2、哪些操作会引起迭代器失效 总结 1、容量操作 size()…...

GD32F470+lwip 丢包问题分析及解决

最近在用GD32和管理机之间用TCP协议开发一个功能&#xff0c;功能都没问题&#xff0c;后面跑大量发包时候的连续测试时&#xff0c;总是会出现偶发性的&#xff0c;大概几分钟到数十分钟的一次丢包。尽管在应用层做了超时机制&#xff0c;一旦超时就会重新建立socket链接并重新…...

好用的电子杂志制作平台分享

随着数字媒体的发展&#xff0c;电子杂志逐渐成为了一种流行的新媒体形式。它不仅能够吸引读者的眼球&#xff0c;还能够帮助创作者展示自己的才华。现在&#xff0c;许多电子杂志制作平台应运而生&#xff0c;让创作者可以轻松地制作出高质量的作品。 今天就给大家推荐一款好用…...

“云原生安全:构建弹性且安全的云上环境的关键要素“

云原生安全是指在设计和实施云原生应用时&#xff0c;从一开始就将安全性融入到每一个环节&#xff0c;确保云环境既具备弹性又安全可靠。构建一个既弹性又安全的云上环境&#xff0c;关键要素包括以下几个方面&#xff1a; 1. 微服务架构&#xff1a;采用微服务架构可以提高系…...

燃气安全阀检验维修:守护家庭安全的必备知识

燃气作为现代生活中不可或缺的重要能源&#xff0c;其安全使用直接关系到人民群众的生命财产安全。 燃气安全阀作为保障燃气系统安全运行的关键部件&#xff0c;一旦发生泄露&#xff0c;必须迅速采取有效措施进行排查、检验、维修&#xff0c;并建立长效机制进行预防和维护。…...

【JavaEE】多线程(1)

&#x1f386;&#x1f386;&#x1f386;个人主页&#x1f386;&#x1f386;&#x1f386; &#x1f386;&#x1f386;&#x1f386;JavaEE专栏&#x1f386;&#x1f386;&#x1f386; &#x1f386;&#x1f386;&#x1f386;计算机是怎么工作的&#x1f386;&#x1f3…...

相对位姿估计

相对位姿估计 示意图 理论推导 离线数据库&#xff1a; P的位置 P [ X , Y , Z ] T P[X,Y,Z]^{T} P[X,Y,Z]T 相机内参 k 1 k_{1} k1​ 安卓手机&#xff1a; 相机内参 k 2 k_{2} k2​ 两个像素点位置 &#xff1a; p 1 和 p 2 p_1和p_2 p1​和p2​ 公式一&#xff1a;…...

记一次 .NET某工业设计软件 崩溃分析

一&#xff1a;背景 1. 讲故事 前些天有位朋友找到我&#xff0c;说他的软件在客户那边不知道什么原因崩掉了&#xff0c;从windows事件日志看崩溃在 clr 里&#xff0c;让我能否帮忙定位下&#xff0c;dump 也抓到了&#xff0c;既然dump有了&#xff0c;接下来就上 windbg …...

2020 6.s081——Lab5:Lazy page allocation

再来是千年的千年 不变是眷恋的眷恋 飞越宇宙无极限 我们永不说再见 ——超兽武装 完整代码见&#xff1a;SnowLegend-star/6.s081 at lazy (github.com) Eliminate allocation from sbrk() (easy) 顾名思义&#xff0c;就是去掉sbrk()中调用growproc()的部分。1s完事儿。 Laz…...

华为认证学习笔记:生成树

以太网交换网络中为了进行链路备份&#xff0c;提高网络可靠性&#xff0c;通常会使用冗余链路。但是使用冗余链路会在交换网络上产生环路&#xff0c;引发广播风暴以及MAC地址表不稳定等故障现象&#xff0c;从而导致用户通信质量较差&#xff0c;甚至通信中断。为解决交换网络…...

leetcode 97.交错字符串

思路&#xff1a;LCS 其实也是同一个类型的题目&#xff0c;一般涉及到这种子序列的字符串问题的时候&#xff0c;状态的设置基本上都应该是以...结尾为状态的。这里同样&#xff0c;设置用dp[i][j]为s1,s2字符以i&#xff0c;j结尾能否拼接成s3[ij]。 那么&#xff0c;首先就…...

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

【Linux系统】Linux环境变量:系统配置的隐形指挥官

。# Linux系列 文章目录 前言一、环境变量的概念二、常见的环境变量三、环境变量特点及其相关指令3.1 环境变量的全局性3.2、环境变量的生命周期 四、环境变量的组织方式五、C语言对环境变量的操作5.1 设置环境变量&#xff1a;setenv5.2 删除环境变量:unsetenv5.3 遍历所有环境…...

MyBatis中关于缓存的理解

MyBatis缓存 MyBatis系统当中默认定义两级缓存&#xff1a;一级缓存、二级缓存 默认情况下&#xff0c;只有一级缓存开启&#xff08;sqlSession级别的缓存&#xff09;二级缓存需要手动开启配置&#xff0c;需要局域namespace级别的缓存 一级缓存&#xff08;本地缓存&#…...

Python 高效图像帧提取与视频编码:实战指南

Python 高效图像帧提取与视频编码:实战指南 在音视频处理领域,图像帧提取与视频编码是基础但极具挑战性的任务。Python 结合强大的第三方库(如 OpenCV、FFmpeg、PyAV),可以高效处理视频流,实现快速帧提取、压缩编码等关键功能。本文将深入介绍如何优化这些流程,提高处理…...

comfyui 工作流中 图生视频 如何增加视频的长度到5秒

comfyUI 工作流怎么可以生成更长的视频。除了硬件显存要求之外还有别的方法吗&#xff1f; 在ComfyUI中实现图生视频并延长到5秒&#xff0c;需要结合多个扩展和技巧。以下是完整解决方案&#xff1a; 核心工作流配置&#xff08;24fps下5秒120帧&#xff09; #mermaid-svg-yP…...

WEB3全栈开发——面试专业技能点P7前端与链上集成

一、Next.js技术栈 ✅ 概念介绍 Next.js 是一个基于 React 的 服务端渲染&#xff08;SSR&#xff09;与静态网站生成&#xff08;SSG&#xff09; 框架&#xff0c;由 Vercel 开发。它简化了构建生产级 React 应用的过程&#xff0c;并内置了很多特性&#xff1a; ✅ 文件系…...

怎么开发一个网络协议模块(C语言框架)之(六) ——通用对象池总结(核心)

+---------------------------+ | operEntryTbl[] | ← 操作对象池 (对象数组) +---------------------------+ | 0 | 1 | 2 | ... | N-1 | +---------------------------+↓ 初始化时全部加入 +------------------------+ +-------------------------+ | …...

拟合问题处理

在机器学习中&#xff0c;核心任务通常围绕模型训练和性能提升展开&#xff0c;但你提到的 “优化训练数据解决过拟合” 和 “提升泛化性能解决欠拟合” 需要结合更准确的概念进行梳理。以下是对机器学习核心任务的系统复习和修正&#xff1a; 一、机器学习的核心任务框架 机…...