Echarts图表库推荐以及使用Echarts实现饼图端头弧形效果

推荐Echarts图表库官方链接http://www.ppchart.com/#/

下面是一段实现饼图端头弧形效果的Echarts代码

虽然有了上面的图表库,里面案例也挺多,但是就是没找到我想要的这种效果,索性就手写了一个

下面代码可以直接去我上面的图标库运行看效果也可以看我下面贴的效果图

// 实现步骤以及注意事项
// 1. max:16,定义的是一圈的份数,也就是16份
// 2. radiusAxis下面的data,是极坐标轴(radiusAxis)的类目数据。极坐标轴类目数据用于指定环形图的每个环的标签。每个类目代表环形图的一个环,因此在示例中,['1', '2', '3', '4', '5'] 表示有五个环,如果新增的话继续往后面加即可,也可以写['1','1','1','1','1'],为了标签不重复,也可以['A','B','C','D','E'],建议按照我那样写即可
// 3. polar下面的radius是一个数组,调整极坐标系的内径和外径,使所有环的半径统一调整,值为百分比
// 4. series下面每一项都是一个数据,每个数据项里面的stack都绑定同一个,用于设置了堆叠的分组名。这样可以将所有的圆环都堆叠到一起(这种圆角圆环的实现本质就是多个圆环堆叠到一起实现的视觉效果,如果不以某一个参考作为堆叠的话,就会显得不整齐)
// 5. series下面每一项的data数据为每个圆环的配置(这段是我个人理解的:就是有几个圆环就在每个配置项的data里面前面补几个圆环,最后一个才是数据项,但这个值参考的是max,也就是总份数16,当前数据也就是相当于在16份里面的一个占比,也就是所有圆环的份数相加必须小于等于16,后面新增一个圆环就要在所有的配置项的data里面最前面新增一个0,后面保持不变,就这样)
// 6. legend下面的data是一个图例,也就是每个图标都有的一些小圆点标志,鼠标悬浮上去可以高亮当前数据option = {angleAxis: {clockwise: false, // 刻度增长是否按顺时针,默认顺时针(true)。axisLine: {show: false},axisLabel: {show: false},splitLine: {show: false},axisTick: {show: false},min: 0,max: 16, //一圈的刻度值startAngle: 0 //初始角度},radiusAxis: {type: 'category',data: ['1', '1', '1', '1','1'], // 极坐标径向轴中的类目,这边有几个数,// 就代表径向轴分了几份,和series中的data对应,这样就可以撑开圆环z: 10,axisLine: {show: false},axisTick: {show: false},axisLabel: {show: false},},polar: {radius: ['30%', '70%'] // 这里调整了极坐标系的内径和外径,使所有环的半径统一调整},series: [{type: 'bar',data: [0, 0, 0, 0, 2],coordinateSystem: 'polar',name: 'A',roundCap: true,stack: 'a',itemStyle: {color: '#Fb4035', // 设置系列 A 的颜色}}, {type: 'bar',data: [0, 0, 0, 0, 8], // 前面的0,累计还是0,这样径向轴上的对应的分区总数就是0,不会显示圆环coordinateSystem: 'polar',name: 'B',stack: 'a',roundCap: true,itemStyle: {color: '#dbdce5', // 设置系列 B 的颜色}}, {type: 'bar',data: [0, 0, 0, 0, 4],coordinateSystem: 'polar',name: 'C',stack: 'a',roundCap: true,itemStyle: {color: '#162c7a', // 设置系列 C 的颜色}},{type: 'bar',data: [0, 0, 0, 0, 2],coordinateSystem: 'polar',name: 'D',stack: 'a',roundCap: true,itemStyle: {color: '#000000', // 设置系列 D 的颜色}}],legend: {show: true,data: ['A', 'B', 'C', 'D']}
};

效果图

在这里插入图片描述

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

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

相关文章

书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)

书籍学习平台 目录 基于SprinBootvue的书籍学习平台 一、前言 二、系统设计 三、系统功能设计 1平台功能模块 2后台功能模块 5.2.1管理员功能模块 5.2.2用户功能模块 5.2.3作者功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 …

工程机械比例阀电流采集方案——IPEhub2与IPEmotion APP

自从国家实施一带一路和新基建计划以来,工程机械的需求量呈现出快速增长的趋势。而关于工程机械,其比例阀的控制问题不容忽视。比例阀是一种新型的液压控制装置——在普通压力阀、流量阀和方向阀上,用比例电磁铁替代原有的控制部分&#xff0…

如何使用Cloudways搭建WordPress网站

如今,搭建网站已经变得非常简单,这主要得益于开源的CMS建站系统的兴起。即使是不懂编程的人也能轻松搭建自己的网站,这些CMS系统提供了丰富的主题模板和插件,使用户可以通过简单的拖放和配置操作来建立自己的网站。 WordPress是目…

大语言模型实战——搭建纯本地迷你版RAG

1. 概念 RAG(Retrieval Augmented Generation)检索增强生成,它结合了搜索技术和大语言模型的提示词功能,以搜索算法找到的信息作为背景上下文,来辅助大语言模型(Large Language Model, LLM)生成…

Oracle数据库操作问题汇总

一、简介 Oracle Database,又名Oracle RDBMS,或简称Oracle。是甲骨文公司的一款关系数据库管理系统。它是在数据库领域一直处于领先地位的产品。可以说Oracle数据库系统是世界上流行的关系数据库管理系统,系统可移植性好、使用方便、功能强&…

基于SpringBoot+Vue在线动漫信息平台设计和实现(源码+LW+部署讲解)

🌹作者主页:青花锁 🌹简介:Java领域优质创作者🏆、Java微服务架构公号作者😄 🌹简历模板、学习资料、面试题库、技术互助 🌹文末获取联系方式 📝 🌹推荐一个人…

Ubuntu20.04安装VINS_Mono 和 VINS_Fusion

文章目录 一、问题描述二、依赖环境1. Eigen 安装2. glog 安装3. gflags 安装4. ceres 安装 三、VINS-Mono 安装1. git 下载并安装2. OpenCV 版本冲突3. 运行 四、VINS—Fusion 安装1. git 下载并安装2. OpenCV 版本冲突3. 运行 五、日常bug1. 动静态库链接冲突 一、问题描述 …

今日好料推荐(Altium Designer + 仿真器驱动)

今日好料推荐(Altium Designer 仿真器驱动) 参考资料在文末获取,关注我,获取优质资源。 Altium Designer Altium Designer 是一种高度集成的电子设计自动化 (EDA) 软件工具,广泛应用于电子电路和印刷电路板 (PCB) …

操作系统实验--终极逃课方法

找到图片里的这个路径下的文件 ,结合当前题目名称,把文件内容全部删除,改为print print的内容为下图左下角的预期输出的内容

Java---Cloneable接口---浅克隆和深克隆

在Java中,我们如何实现一个对象的克隆呢? 在Java中实现对象的克隆,我们要用到Cloneable接口。克隆也分为浅克隆和深克隆。 1.实现浅克隆 1.重写clone方法 当我们想直接通过前面已经建立好的对象来调用Object类中的clone方法时,…

解决mybatis/mybatis plus报错:Invalid bound statement (not found) 的方法汇总

org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)问题,即在mybatis中dao接口与mapper配置文件在做映射绑定的时候接口与xml不匹配,要么是找不到,要么是找到了却匹配不到。 我的问题是项目没有把最新的方法x…

正版软件 | Internet Download Manager 下载管理器

前言 IDM 是一个下载加速器,可将下载速度提高多达 8 倍,恢复、组织和安排下载。 30 天免费试用!https://www.internetdownloadmanager.cc/ 新版本 Internet Download Manager v 6.40:添加了 Windows 11 兼容性。改进了媒体采集…

5G工厂长啥样

5G工厂是一种新型的工业互联网基础设施,利用5G为代表的新一代信息通信技术集成,打造新型工业互联网基础设施。在5G工厂中,自动化和智能化设备广泛使用,高度互联的工厂网络得以实现,远程监控和管理成为可能,…

系统测试需求指南(Word版-软件全套资料下载)

1 目的 2 概述 3 测试需求 3.1 测试范围 3.2 测试目标 4 测试需求的现状 5 测试需求的内容 5.1 主体内容 5.2 管理内容 6 测试需求的制定 6.1 需求信息来源 6.2 需求分析 6.2.1 功能性需求 6.2.2 系统功能需求 6.2.3 界面需求 6.2.4 安装需求 6.2.5 业务需求 …

qmt量化交易策略小白学习笔记第8期【qmt编程之获取股票资金流向数据--内置Python】

qmt编程之获取股票资金流向数据 qmt更加详细的教程方法,会持续慢慢梳理。 也可找寻博主的历史文章,搜索关键词查看解决方案 ! 感谢关注,需免费开通量化回测与咨询实盘权限,可以和博主联系! 获取股票资金…

【Unity之FGUI】黑神章Fairy GUI控件详解

👨‍💻个人主页:元宇宙-秩沅 👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍💻 本文由 秩沅 原创 👨‍💻 收录于专栏:就业…

铜镁合金应用领域广泛 我国具备原材料优势

铜镁合金应用领域广泛 我国具备原材料优势 铜镁合金又称铝青铜,是一种变形铝合金,指将镁金属、铝金属和铜金属经合金化反应制成的合金。与普通铝合金相比,铜镁合金具有比强度高、耐磨性好、减振性能佳、轻量化等优势,在金属冶炼、…

【前端】XML和HTML的区别详解

人不走空 🌈个人主页:人不走空 💖系列专栏:算法专题 ⏰诗词歌赋:斯是陋室,惟吾德馨 目录 🌈个人主页:人不走空 💖系列专栏:算法专题 ⏰诗词歌…

猫耳 WebSocket 跨端优化实践

前言 在现代的移动应用程序中,长连接是一种不可或缺的能力,包括但不限于推送、实时通信、信令控制等常见场景。在猫耳FM的直播业务中,我们同样使用了 WebSocket 长连接作为我们实时通信的基础。 在我们推进用户体验优化的工作中,…

IC开发——Ubuntu安装VCS2018

1. 简介 VCS是一种常用的Verilog仿真和综合工具,由Synopsys公司开发。它提供了一个完整的设计验证环境,用于验证硬件设计的正确性和性能。以下是VCS工具的一些主要特点和功能: 仿真功能:VCS支持基于事件驱动的数字电路级仿真&am…