React18 apexcharts数据可视化之甜甜圈图

news/2024/6/20 22:56:09/文章来源:https://blog.csdn.net/qq_37703224/article/details/139230922

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>)
}

在这里插入图片描述

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

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

相关文章

信息标记形式 (XML, JSON, YAML)

文章目录 &#x1f5a5;️介绍&#x1f5a5;️三种形式&#x1f3f7;️XML (Extensible Markup Language)&#x1f516;规范&#x1f516;注释&#x1f516;举例&#x1f516;其他 &#x1f3f7;️JSON (JavaScript Object Notation)&#x1f516;规范&#x1f516;注释&#x…

Hexo最新实战:(一)Hexo7.0+GitHub Pages博客搭建

前言 很多平台都能写博客还有创作激励&#xff0c;为什么我又要搭一个&#xff1f;为什么这次要选择用Hexo框架&#xff1f; 对应的原因是流量自由和省钱&#xff0c;第一个&#xff0c;很多平台能写但不是都有收益&#xff0c;而且平台有自身的规则&#xff0c;比如会屏蔽一…

关于在子线程中获取不到HttpServletRequest对象的问题

这篇文章主要分享一下项目里遇到的获取request对象为null的问题&#xff0c;具体是在登录的时候触发的邮箱提醒&#xff0c;获取客户端ip地址&#xff0c;然后通过ip地址定位获取定位信息&#xff0c;从而提示账号在哪里登录。 但是登录却发现获取request对象的时候报错了。 具…

Linux线程:管理与控制

一、引言 随着计算机硬件技术的飞速发展&#xff0c;尤其是多核CPU的普及&#xff0c;多线程编程已成为充分利用系统资源、提高程序并发性和响应速度的关键技术。 多线程编程允许一个程序中同时运行多个线程&#xff0c;每个线程可以独立地执行不同的任务。这种并行处理的方式…

Excel中怎样将第一行建立好的规则套用到每一行?

考虑使用条件格式来完成&#xff0c;有两种方式可以尝试&#xff1a; 一、一次性创建条件格式 1.选中需要设置条件格式的区域&#xff0c;如果是不连续的区域&#xff0c;可以按住Ctrl键&#xff0c;然后用鼠标依次选中需要的数据区域 2.点击 开始选项卡&#xff0c;条件格式…

HBase安装

安装HBase 提示&#xff1a;需要安装好hadoop和zookeeper 安装zookeeper可参考 一、确定HBase版本 去网站确认 https://hbase.apache.org/book.html#hadoop二、下载HBase安装包 去清华大学镜像站下载 https://mirrors.tuna.tsinghua.edu.cn/apache/hbase/三、安装HBase …

部署Prometheus + Grafana实现监控数据指标

1.1 Prometheus安装部署 Prometheus监控服务 主机名IP地址系统配置作用Prometheus192.168.110.27/24CentOS 7.94颗CPU 8G内存 100G硬盘Prometheus服务器grafana192.168.110.28/24CentOS 7.94颗CPU 8G内存 100G硬盘grafana服务器 监控机器 主机名IP地址系统配置k8s-master-0…

python mp3转mp4工具

成品UI 安装moviepy库 pip install moviepy 转换demo from moviepy.editor import *# 创建一个颜色剪辑&#xff0c;时长与音频相同 audioclip AudioFileClip(r"C:\Users\Administrator\PycharmProjects\pythonProject44\test4\赵照 - 灯塔守望人.mp3") videoclip…

linux学习(六)

1.网络管理 (1)查看 ifconfig: root用户可以查看网卡状态, 普通用户: /sbin/ifconfig(需要加上命令的完整路径) (2)修改网络配置 通过命令修改网络配置 设置网卡的ip地址;禁用网卡和启用网卡了。 添加网关: (3)网络故障查询 ①ping 检测当前主机和目标主机是…

心链4---搜索页面前后端业务实现以及分布式session的共享实现

心链 — 伙伴匹配系统 搜索详情页面 之前前端的代码写到了搜索页面可以挑选搜索标签&#xff0c;并没有去根据具体标签搜索用户。这里就开始实现。 新建SearchResultPage.vue&#xff0c;并添加相关路由。 在搜索页添加搜索按钮&#xff0c;和触发点击。搜索页选择标签&#x…

Hono 框架使用经验谈

Hono&#x1f525;是一个小型、快速并开源的 Serverless Web 框架&#xff0c;用 TypeScript 写就。它适用于任何JavaScript运行时&#xff1a;Cloudflare Workers&#xff0c;Fastly ComputeEdge&#xff0c;Deno&#xff0c;Bun&#xff0c;Vercel&#xff0c;Netlify&#x…

大模型基础知识

文章目录 1. 位置编码1.1 绝对位置编码1.2 相对位置编码1.3 旋转位置编码2. 注意力机制2.1 MHA(muti head attention)2.2 MQA(muti query attention)2.3 GQA(grouped query attention)3. 大模型分类4. 微调方法4.1 Prompt Tuning4.2 Prefix Tuning4.3 Lora4.4 QLora5. La…

Vue进阶之Vue项目实战(四)

Vue项目实战 出码功能知识介绍渲染器性能调优使用 vue devtools 进行分析使用“渲染”进行分析判断打包构建的产物是否符合预期安装插件使用位置使用过程使用lighthouse分析页面加载情况使用performance分析页面加载情况应用自动化部署与发布CI/CD常见的CI/CD服务出码功能 出码…

新零售收银解决方案:传统门店超市的数字化-亿发

在数字化浪潮的推动下&#xff0c;零售行业正经历着前所未有的变革。阿里巴巴提出的“新零售”概念&#xff0c;不仅仅是一个商业口号&#xff0c;它代表了一种全新的商业模式和运营理念。随着时代的进步和消费需求的不断升级&#xff0c;新零售的兴起已成为行业发展的必然趋势…

【算法】递归、搜索与回溯——汉诺塔

题解&#xff1a;汉诺塔(递归、搜索与回溯算法) 目录 1.题目2.题目背景(拓展了解)3.题解4.参考代码5.细节6.总结 1.题目 题目链接&#xff1a;LINK 2.题目背景(拓展了解) 汉诺塔问题是一个通过隐式使用递归栈来进行实现的一个经典问题&#xff0c;该问题最早的发明人是法国…

科技引领未来:高速公路可视化

高速公路可视化监控系统利用实时视频、传感器数据和大数据分析&#xff0c;通过图扑 HT 可视化展示交通流量、车速、事故和路况信息。交通管理人员可以实时监控、快速响应突发事件&#xff0c;并优化交通信号和指挥方案。这一系统不仅提高了道路安全性和车辆通行效率&#xff0…

景源畅信电商:做抖音运营怎么开始第一步?

在数字化时代的浪潮中&#xff0c;抖音作为一款短视频平台迅速崛起&#xff0c;成为许多人表达自我、分享生活的重要舞台。随着用户量的激增&#xff0c;如何做好抖音运营&#xff0c;尤其是迈出成功的第一步&#xff0c;成为了众多内容创作者和品牌主们关注的焦点。接下来&…

动态规划之买卖股票大集合

目录 引言 1.只能进行一次买卖股票&#xff08;最多只能买一股股票&#xff09; 2.可以进行多次股票买卖&#xff0c;且没有手续费&#xff08;最多只能买一股股票&#xff09; 3.可以进行多次股票买卖&#xff0c;但是有冷冻期&#xff0c;无手续费&#xff08;最多只能买一…

深入探究Java自动拆箱与装箱的实现原理

哈喽&#xff0c;各位小伙伴们&#xff0c;你们好呀&#xff0c;我是喵手。运营社区&#xff1a;C站/掘金/腾讯云&#xff1b;欢迎大家常来逛逛 今天我要给大家分享一些自己日常学习到的一些知识点&#xff0c;并以文字的形式跟大家一起交流&#xff0c;互相学习&#xff0c;一…

对北京新发地当时菜品三十天内价格分布式爬取(1)---(获取当时菜品数据并构建请求数据推入redis)

本次项目网页url 北京新发地: http://www.xinfadi.com.cn/priceDetail.html 我们首先创建一个爬虫用于收集url与请求的data然后b,c,d使用RedisCrawlSpider来对数据进行分布式爬取 在此篇中我们仅介绍爬虫a 一.获取当天所有菜品数据 这是一条请求的负载我们只需要对pubDateSta…