当前位置: 首页 > 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;首先就…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

重启Eureka集群中的节点,对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

NPOI Excel用OLE对象的形式插入文件附件以及插入图片

static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...

SQL Server 触发器调用存储过程实现发送 HTTP 请求

文章目录 需求分析解决第 1 步:前置条件,启用 OLE 自动化方式 1:使用 SQL 实现启用 OLE 自动化方式 2:Sql Server 2005启动OLE自动化方式 3:Sql Server 2008启动OLE自动化第 2 步:创建存储过程第 3 步:创建触发器扩展 - 如何调试?第 1 步:登录 SQL Server 2008第 2 步…...

论文阅读:Matting by Generation

今天介绍一篇关于 matting 抠图的文章&#xff0c;抠图也算是计算机视觉里面非常经典的一个任务了。从早期的经典算法到如今的深度学习算法&#xff0c;已经有很多的工作和这个任务相关。这两年 diffusion 模型很火&#xff0c;大家又开始用 diffusion 模型做各种 CV 任务了&am…...

【若依】框架项目部署笔记

参考【SpringBoot】【Vue】项目部署_no main manifest attribute, in springboot-0.0.1-sn-CSDN博客 多一个redis安装 准备工作&#xff1a; 压缩包下载&#xff1a;http://download.redis.io/releases 1. 上传压缩包&#xff0c;并进入压缩包所在目录&#xff0c;解压到目标…...

电脑桌面太单调,用Python写一个桌面小宠物应用。

下面是一个使用Python创建的简单桌面小宠物应用。这个小宠物会在桌面上游荡&#xff0c;可以响应鼠标点击&#xff0c;并且有简单的动画效果。 import tkinter as tk import random import time from PIL import Image, ImageTk import os import sysclass DesktopPet:def __i…...

2025.6.9总结(利与弊)

凡事都有两面性。在大厂上班也不例外。今天找开发定位问题&#xff0c;从一个接口人不断溯源到另一个 接口人。有时候&#xff0c;不知道是谁的责任填。将工作内容分的很细&#xff0c;每个人负责其中的一小块。我清楚的意识到&#xff0c;自己就是个可以随时替换的螺丝钉&…...

LUA+Reids实现库存秒杀预扣减 记录流水 以及自己的思考

目录 lua脚本 记录流水 记录流水的作用 流水什么时候删除 我们在做库存扣减的时候&#xff0c;显示基于Lua脚本和Redis实现的预扣减 这样可以在秒杀扣减的时候保证操作的原子性和高效性 lua脚本 // ... 已有代码 ...Overridepublic InventoryResponse decrease(Inventor…...