apexcharts数据可视化之极坐标区域图

apexcharts数据可视化之极坐标区域图

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

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

  • 基础极坐标区域图
  • 单色极坐标区域图

基础极坐标区域图

import ApexChart from 'react-apexcharts';

export function BasicPolar() {
    // 数据序列
    const series = [14, 23, 21, 17, 15, 10, 12, 17, 21]
    // 图表选项
    const options = {
        chart: {
            type: 'polarArea',
        },
        stroke: {
            colors: ['#fff']
        },
        labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月"],
        fill: {
            opacity: 0.8
        },
        responsive: [{
            breakpoint: 480,
            options: {
                chart: {
                    width: 200
                },
                legend: {
                    position: 'bottom'
                }
            }
        }]
    }
    return (
        <div id="chart">
            <ApexChart options={options} series={series} type="polarArea" height={550}/>
        </div>
    )
}

在这里插入图片描述

单色极坐标区域图

import ApexChart from 'react-apexcharts';

export function MonochromePolarArea() {
    // 数据序列
    const series = [14, 23, 21, 17, 15, 10, 12, 17, 21]
    // 图表选项
    const options = {
        chart: {
            type: 'polarArea',
        },
        fill: {
            opacity: 1
        },
        stroke: {
            width: 1,
            colors: undefined
        },
        yaxis: {
            show: false
        },
        legend: {
            position: 'bottom'
        },
        labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月"],
        // 绘制选项
        plotOptions: {
            polarArea: {
                rings: {
                    strokeWidth: 0
                },
                spokes: {
                    strokeWidth: 0
                },
            }
        },
        // 主题
        theme: {
            monochrome: {
                enabled: true,
                shadeTo: 'light',
                shadeIntensity: 0.6
            }
        },
        responsive: [{
            breakpoint: 480,
            options: {
                chart: {
                    width: 200
                },
                legend: {
                    position: 'bottom'
                }
            }
        }]
    }
    return (
        <div id="chart">
            <ApexChart options={options} series={series} type="polarArea" height={550}/>
        </div>
    )
}

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

深入解析多维数组与主对角线元素之和

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、引言&#xff1a;多维数组的奥秘 二、多维数组的基本概念 1. 定义与创建 2. 维度与形…

Linux服务器安装docker,基于Linux(openEuler、CentOS8)

本实验环境为openEuler系统(以server方式安装)&#xff08;CentOS8基本一致&#xff0c;可参考本文) 目录 知识点实验 知识点 Docker 是一个开源的应用容器引擎。它允许开发者将应用及其所有依赖项打包到一个可移植的容器中&#xff0c;并发布到任何支持Docker的流行Linux或Wi…

歌曲转换成mp3格式超简单!快来试试看

在数字音乐时代&#xff0c;我们经常从各种来源下载或收藏到各种音频文件&#xff0c;但有时这些文件可能并不是我们设备所支持的常见格式&#xff0c;尤其是当我们更倾向于使用MP3格式的时候。因此&#xff0c;对于那些希望统一音乐库格式的人来说&#xff0c;将歌曲转换成mp3…

redis面试知识点

Redis知识点 Redis的RDB和AOF机制各是什么&#xff1f;它们有什么区别&#xff1f; 答&#xff1a;Redis提供了RDB和AOF两种数据持久化机制&#xff0c;适用于不同的场景。 RDB是通过在特定的时刻对内存中的完整的数据复制快照进行持久化的。 RDB工作原理&#xff1a; 当执行…

深入理解深度学习中的激活层:Sigmoid和Softmax作为非终结层的应用

深入理解深度学习中的激活层&#xff1a;Sigmoid和Softmax作为非终结层的应用Sigmoid 和 Softmax 激活函数简介Sigmoid函数Softmax函数 Sigmoid 和 Softmax 作为非终结层多任务学习特征变换增加网络的非线性实际案例 注意事项结论 深入理解深度学习中的激活层&#xff1a;Sigmo…

探索研究大语言在生物识别技术——使用ChatGP-4从完成从人脸识别到年龄估计

0.引言 论文提出以下几要点&#xff1a; &#xff08;1&#xff09;. 人脸识别、性别检测和年龄估计的性能评估&#xff1a; 进行了一项研究&#xff0c;使用GPT-4这样的大型语言模型来处理人脸识别、性别检测和年龄估计等任务。这些任务是生物识别技术中的常见应用&#xff…

【评测体验】OrangePi AIpro 系统构建及性能测试

感谢香橙派社区能够邀请我评测这款开发板&#xff0c;祝愿国产开发板发展越来越好&#xff01;在这里能够尽自己的一份力量是我的荣幸。 这篇文章是 OrangePi AIpro 开发板的评测&#xff0c;内容包括开发板简介、系统构建过程、系统性能测试、压缩算法性能测试、内核编译。 到…

分析和设计算法

目录 前言 循环不变式 n位二进制整数相加问题 RAM模型 使用RAM模型分析 代码的最坏情况和平均情况分析 插入排序最坏情况分析 插入排序平均情况分析 设计算法 分治法 总结 前言 循环迭代&#xff0c;分析算法和设计算法作为算法中的三个重要的角色&#xff0c;下面…

【深度 Q 学习-01】 Q学习概念和python实现

文章目录 一、说明二、深度 Q 学习概念三、python实现四、结论 关键词&#xff1a;Deep Q-Networks 一、说明 在强化学习 &#xff08;RL&#xff09; 中&#xff0c;Q 学习是一种基础算法&#xff0c;它通过学习策略来最大化累积奖励&#xff0c;从而帮助智能体导航其环境。它…

2024年618网购节各大电商超级红包二维码集合

一年一度的电商618网购节又要来了&#xff0c;下面收集了淘宝/京东/拼多多的618红包二维码&#xff0c;手机扫描或识别即可每天领红包&#xff0c;可参考好物分享中的商品下单&#xff1a; 淘宝618超级红包&#xff1a;即日起至2024.6.10&#xff0c;每天可领一次 京东618无门…

P9 【力扣+知识点】【算法】【二分查找】C++版

【704】二分查找&#xff08;模板题&#xff09;看到复杂度logN&#xff0c;得想到二分 给定一个 n 个元素有序的&#xff08;升序&#xff09;整型数组 nums 和一个目标值 target &#xff0c;写一个函数搜索 nums 中的 target&#xff0c;如果目标值存在返回下标&#xff0…

RUST 和 GO 如何管理它们的内存

100编程书屋_孔夫子旧书网 Go 中的内存管理 Go 中的内存不会在缓存键被驱逐时立即释放。 相反&#xff0c;垃圾收集器会经常运行以发现任何没有引用的内存并释放它。 换句话说&#xff0c;内存会一直挂起&#xff0c;直到垃圾收集器可以评估它是否真正不再使用&#xff0c;而…

SpringCloud:Nacos配置管理

程序员老茶 &#x1f648;作者简介&#xff1a;练习时长两年半的Java up主 &#x1f649;个人主页&#xff1a;程序员老茶 &#x1f64a; P   S : 点赞是免费的&#xff0c;却可以让写博客的作者开心好久好久&#x1f60e; &#x1f4da;系列专栏&#xff1a;Java全栈&#…

01--nginx基础

前言&#xff1a; 本文用来整理一下nginx的用法&#xff0c;应该是本人中间件专栏的第一篇文章&#xff0c;这里开始概念和实操将会同样重要&#xff0c;面试时基本概念的理解非常重要&#xff0c;深有体会&#xff0c;不会再让概念成为压死骆驼的稻草。 1、nginx简介 Nginx…

vue连接mqtt实现收发消息组件超级详细

基本概念&#xff1a; MQTT&#xff08;Message Queuing Telemetry Transport&#xff09;是一种基于发布/订阅模式的轻量级消息传输协议&#xff0c;专为低带宽、高延迟或不稳定的网络环境设计。以下是MQTT实现收发消息的基本原理&#xff1a; 客户端-服务器模型&#xff1a…

【数据结构】-- 栈

栈 引入&#xff1a; 一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。 进行数据插入和删除操作的一端 称为栈顶&#xff0c;另一端称为栈底。栈中的元素遵循先进后出的原则&#xff0c;先入栈的元素总是先后出栈。 压栈&#xff1a;栈的插入操作叫…

HCIP-Datacom-ARST自选题库__OSPF多选【62道题】

1.如图所示&#xff0c;路由器所有的接口开启OSPF&#xff0c;图中标识的IP地址为设备的LoopbackO接口的IP地址&#xff0c;R1、R2、R3的LoopbackO通告在区域1&#xff0c;R4的Loopback0通告在区域0&#xff0c;R5的LoopbackO通告在区域2&#xff0c;下列哪些IP地址之间可以相互…

Docker CIG使用

Docker CIG是什么 CIG为&#xff1a;CAdvisor监控收集、InfluxDB存储数据、Granfana图表展示 这个组合是一个常见的监控 Docker 容器的解决方案,它包括以下三个组件: cAdvisor (Container Advisor): cAdvisor 是一个开源的容器资源监控和性能分析工具。它能够收集有关正在运行的…

【Linux系统】进程间通信

本篇博客整理了进程间通信的方式管道、 system V IPC的原理&#xff0c;结合大量的系统调用接口&#xff0c;和代码示例&#xff0c;旨在让读者透过进程间通信去体会操作系统的设计思想和管理手段。 目录 一、进程间通信 二、管道 1.匿名管道 1.1-通信原理 1.2-系统调用 …

【VTKExamples::Utilities】第十五期 ShepardMethod

很高兴在雪易的CSDN遇见你 VTK技术爱好者 QQ:870202403 公众号:VTK忠粉 前言 本文分享VTK样例ShepardMethod,并解析接口vtkShepardMethod,希望对各位小伙伴有所帮助! 感谢各位小伙伴的点赞+关注,小易会继续努力分享,一起进步! 你的点赞就是我的动力(^U^)ノ…