echarts-pie---------3D曲状环形饼图实现!!!
示例(参考此处饼图修改https://www.isqqw.com/viewer?id=37497)

话不多说直接上代码
此套代码可以直接再echarts官网中的此处运行

let selectedIndex = '';
let hoveredIndex = '';
option = getPie3D([{name: '数学',value: 60,itemStyle: {color: '#1890FF',},},{name: '难啊',value: 44,itemStyle: {color: '#1EE7E7',},},],0.9 // 可做为调整内环大小
);
// 生成扇形的曲面参数方程
function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {// 计算const midRatio = (startRatio + endRatio) / 2;const startRadian = startRatio * Math.PI * 2;const endRadian = endRatio * Math.PI * 2;const midRadian = midRatio * Math.PI * 2;// 如果只有一个扇形,则不实现选中效果。if (startRatio === 0 && endRatio === 1) {// eslint-disable-next-line no-param-reassignisSelected = false;}// 通过扇形内径/外径的值,换算出辅助参数 k(默认值 1/3)// eslint-disable-next-line no-param-reassignk = typeof k !== 'undefined' ? k : 1 / 3;// 计算选中效果分别在 x 轴、y 轴方向上的位移(未选中,则位移均为 0)const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;// 计算高亮效果的放大比例(未高亮,则比例为 1)const hoverRate = isHovered ? 1.05 : 1; // 可以做为调整外环大小// 返回曲面参数方程return {u: {min: -Math.PI,max: Math.PI * 3,step: Math.PI / 32,},v: {min: 0,max: Math.PI * 2,step: Math.PI / 20,},x(u, v) {if (u < startRadian) {return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;}if (u > endRadian) {return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;}return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;},y(u, v) {if (u < startRadian) {return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;}if (u > endRadian) {return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;}return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;},z(u, v) {// if (u < -Math.PI * 0.5) {// return Math.sin(u);// }// if (u > Math.PI * 2.5) {// return Math.sin(u) * h * 0.1;// }// 当前图形的高度是Z根据h(每个value的值决定的)return 1.3 * Math.sin(v)// return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;},};
}
// 生成模拟 3D 饼图的配置项
function getPie3D(pieData, internalDiameterRatio) {const series = [];// 总和let sumValue = 0;let startValue = 0;let endValue = 0;const legendData = [];const k =typeof internalDiameterRatio !== 'undefined'? (1 - internalDiameterRatio) / (1 + internalDiameterRatio): 1 / 3;// 为每一个饼图数据,生成一个 series-surface 配置for (let i = 0; i < pieData.length; i += 1) {sumValue += pieData[i].value;const seriesItem = {name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,type: 'surface',parametric: true,wireframe: {show: false,},pieData: pieData[i],pieStatus: {selected: false,hovered: false,k,},};if (typeof pieData[i].itemStyle !== 'undefined') {const { itemStyle } = pieData[i];// eslint-disable-next-line no-unused-expressionstypeof pieData[i].itemStyle.color !== 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null;// eslint-disable-next-line no-unused-expressionstypeof pieData[i].itemStyle.opacity !== 'undefined'? (itemStyle.opacity = pieData[i].itemStyle.opacity): null;seriesItem.itemStyle = itemStyle;}series.push(seriesItem);}// 使用上一次遍历时,计算出的数据和 sumValue,调用 getParametricEquation 函数,// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation,也就是实现每一个扇形。console.log(series);for (let i = 0; i < series.length; i += 1) {endValue = startValue + series[i].pieData.value;series[i].pieData.startRatio = startValue / sumValue;series[i].pieData.endRatio = endValue / sumValue;series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio,series[i].pieData.endRatio,false,false,k,// 我这里做了一个处理,使除了第一个之外的值都是10series[i].pieData.value === series[0].pieData.value ? 10 : 10);startValue = endValue;legendData.push(series[i].name);}// 准备待返回的配置项,把准备好的 legendData、series 传入。const option = {legend:{show: true},title: {text: '3D 曲状饼图展示',x: 'center',top:170,textStyle: {color: '#000',fontSize: 14,}},// animation: false,tooltip: {formatter: (params) => {if (params.seriesName !== 'mouseoutSeries') {return `${params.seriesName}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>${option.series[params.seriesIndex].pieData.value}`;}return '';},},xAxis3D: {min: -1,max: 1,},yAxis3D: {min: -1,max: 1,},zAxis3D: {min: -1,max: 1,},grid3D: {show: false,boxHeight: 5,top: '-20%',viewControl: {// 3d效果可以放大、旋转等,请自己去查看官方配置alpha: 20,// beta: 30,rotateSensitivity: 1,zoomSensitivity: 0,panSensitivity: 0,autoRotate: true,distance: 300,},// 后处理特效可以为画面添加高光、景深、环境光遮蔽(SSAO)、调色等效果。可以让整个画面更富有质感。postEffect: {// 配置这项会出现锯齿,请自己去查看官方配置有办法解决enable: false,bloom: {enable: true,bloomIntensity: 0.1,},SSAO: {enable: true,quality: 'medium',radius: 2,},// temporalSuperSampling: {// enable: true,// },},},series,};return option;
}
// // 修正取消高亮失败的 bug
// // 监听 mouseover,近似实现高亮(放大)效果
// option.title.text = option.series[0].name + ' '+option.series[0].pieData.value
// function handleOver(params) {
// // 准备重新渲染扇形所需的参数
// let isSelected;
// let isHovered;
// let startRatio;
// let endRatio;
// let k;
// let i;// // 如果触发 mouseover 的扇形当前已高亮,则不做操作
// if (hoveredIndex === params.seriesIndex) {
// return;// // 否则进行高亮及必要的取消高亮操作
// } else {
// // 如果当前有高亮的扇形,取消其高亮状态(对 option 更新)
// if (hoveredIndex !== '') {
// // 从 option.series 中读取重新渲染扇形所需的参数,将是否高亮设置为 false。
// isSelected = option.series[hoveredIndex].pieStatus.selected;
// isHovered = false;
// startRatio = option.series[hoveredIndex].pieData.startRatio;
// endRatio = option.series[hoveredIndex].pieData.endRatio;
// k = option.series[hoveredIndex].pieStatus.k;
// i = option.series[hoveredIndex].pieData.value === option.series[0].pieData.value ? 35 : 10;
// // 对当前点击的扇形,执行取消高亮操作(对 option 更新)
// option.series[hoveredIndex].parametricEquation = getParametricEquation(
// startRatio,
// endRatio,
// isSelected,
// isHovered,
// k,
// i
// );
// option.series[hoveredIndex].pieStatus.hovered = isHovered;// // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
// hoveredIndex = '';
// }// // 如果触发 mouseover 的扇形不是透明圆环,将其高亮(对 option 更新)
// if (params.seriesName !== 'mouseoutSeries') {
// option.title.text=' ' +option.series[seriesIndex].name + ' ' + option.series[params.seriesIndex].pieData.value
// // 从 option.series 中读取重新渲染扇形所需的参数,将是否高亮设置为 true。
// isSelected = option.series[params.seriesIndex].pieStatus.selected;
// isHovered = true;
// startRatio = option.series[params.seriesIndex].pieData.startRatio;
// endRatio = option.series[params.seriesIndex].pieData.endRatio;
// k = option.series[params.seriesIndex].pieStatus.k;// // 对当前点击的扇形,执行高亮操作(对 option 更新)
// option.series[params.seriesIndex].parametricEquation = getParametricEquation(
// startRatio,
// endRatio,
// isSelected,
// isHovered,
// k,
// option.series[params.seriesIndex].pieData.value + 5
// );
// option.series[params.seriesIndex].pieStatus.hovered = isHovered;// // 记录上次高亮的扇形对应的系列号 seriesIndex
// hoveredIndex = params.seriesIndex;
// }// // 使用更新后的 option,渲染图表
// myChart.setOption(option);
// }
// }
// myChart.on('mouseover', function (params) {
// handleOver(params)
// });// function handleOut() {
// if (hoveredIndex !== '') {
// // 从 option.series 中读取重新渲染扇形所需的参数,将是否高亮设置为 true。
// isSelected = option.series[hoveredIndex].pieStatus.selected;
// isHovered = false;
// k = option.series[hoveredIndex].pieStatus.k;
// startRatio = option.series[hoveredIndex].pieData.startRatio;
// endRatio = option.series[hoveredIndex].pieData.endRatio;
// // 对当前点击的扇形,执行取消高亮操作(对 option 更新)
// i = option.series[hoveredIndex].pieData.value === option.series[0].pieData.value ? 35 : 10;
// option.series[hoveredIndex].parametricEquation = getParametricEquation(
// startRatio,
// endRatio,
// isSelected,
// isHovered,
// k,
// i
// );
// option.series[hoveredIndex].pieStatus.hovered = isHovered;// // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
// hoveredIndex = '';
// }// // 使用更新后的 option,渲染图表
// myChart.setOption(option);
// }
// // 修正取消高亮失败的 bug
// myChart.on('globalout', function () {
// handleOut()
// });
// console.log(option)
// let seriesIndex = 0
// setInterval(() => {
// handleOver({seriesIndex:seriesIndex})
// seriesIndex++
// if (seriesIndex === option.series.length) {
// seriesIndex = 0
// }
// }, 3000)相关文章:
echarts-pie---------3D曲状环形饼图实现!!!
示例(参考此处饼图修改https://www.isqqw.com/viewer?id37497) 话不多说直接上代码 此套代码可以直接再echarts官网中的此处运行 let selectedIndex ; let hoveredIndex ; option getPie3D([{name: 数学,value: 60,itemStyle: {color: #1890FF,},},{…...
合并两个有序链表(leetcode)
题目 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 输入:l1 [1,2,4], l2 [1,3,4] 输出:[1,1,2,3,4,4]思路 每次递归都会比较当前两个节点的值,选择较小的节点作为合并后的链…...
CAS之AtomicReference原理解析
如果你了解了AtomicInteger的工作原理,或者看了如下文章,知道了AtomicInteger只能对当个int类型共享变量做cas的缺点。 CAS之AtomicInteger原理解析_z275598733的博客-CSDN博客 那么AtomicReference就是来解决这个问题的。原理很类似,只是A…...
JS/JQ实现字符串加密成 HEX(十六进制) 字符串
应用场景: 1、数据传输:在网络通信或数据存储中,将字符串转换为十六进制格式可以确保数据的可靠传输和存储。十六进制字符串只包含数字和字母,而不涉及控制字符或其他特殊字符,因此避免了特殊字符在传输过程中引起的问…...
骨传导耳机怎么样?盘点五款适合室外佩戴的骨传导耳机
不知道各位出去玩的时候,有没有觉得外面的世界太喧嚣,需要一副耳机开启自己的小天地,相信有很多人都有这种习惯,在路上戴着耳机享受属于自己的那一片天地,可是市面上种类这么多耳机,该如何选择呢࿰…...
【flink】使用flink-web-ui提交作业报错
使用WebUI提交作业出现错误。 错误截图: 弹框信息: Server Response Message: org.apache.flink.runtime.rest.handler.RestHandlerException: Could not execute application.at org.apache.flink.runtime.webmonitor.handlers.JarRunHandler.lambda$h…...
「从零入门推荐系统」22:chatGPT、大模型在推荐系统中的应用
作者 | gongyouliu 编辑 | gongyouliu 提示:全文2.5万字,预计阅读时长2小时,可以先收藏再慢慢阅读。 我们在上一章介绍了chatGPT、大模型的基本概念、核心技术原理等基础知识,有了这些背景知识的铺垫,下面我们来介绍ch…...
机器学习---概述(一)
文章目录 1.人工智能、机器学习、深度学习2.机器学习的工作流程2.1 获取数据集2.2 数据基本处理2.3 特征工程2.3.1 特征提取2.3.2 特征预处理2.3.3 特征降维 2.4 机器学习2.5 模型评估 3.机器学习的算法分类3.1 监督学习3.1.1 回归问题3.1.2 分类问题 3.2 无监督学习3.3 半监督…...
概念解析 | AutoFed:面向异构数据的联邦多模态自动驾驶的学习框架
AutoFed:面向异构数据的联邦多模态自动驾驶的学习框架 注1:本文系“概念解析”系列之一,致力于简洁清晰地解释、辨析复杂而专业的概念。本次辨析的概念是:面向异构数据的联邦学习在自动驾驶中的应用。 参考文献:Zheng T, Li A, Chen Z, et al. AutoFed: Heterogeneity-Aware F…...
vue3+uniapp自定义tabbar
首先把tabbar中的元素写在一个list中用v-for进行渲染 用一个interface进行定义接口,这样别人在review你的代码就可以清晰知道你的tabbar包含什么元素。 利用typescript特性进行类型定义,可以省去很多麻烦 import { reactive } from "vue" imp…...
stable diffusion webui 安装
安装环境:cuda10.2-cudnn8-devel-ubuntu18.04 torchtorchvision:[pytorch]pytorch官方安装法_torch1.13.1cu117_FL1623863129的博客-CSDN博客 error:RuntimeError: Couldnt determine Stable Diffusions hash: 69ae4b35e0a0f6ee1af8bb9a5d0016ccb27e36dc. 解决方法…...
csdn文章编辑器必备语法备用
前言 本文是为了记录csdn文章编辑器的必备语法,为写作小白提供更详细的写作规范技巧 csdn的质量分查询地址:质量分查询 这里的跳转链接,可以使用ctrlshift L 来输入链接 亦可以使用 链接: link. 🚀🚀🚀 &a…...
机器学习鲁棒性笔记
鲁棒性(Robustness)在统计学和数据分析中是一个重要的概念。它指的是某个统计方法或模型对于异常值或偏离数据集正常分布的情况的敏感程度。一个鲁棒性较好的方法能够在存在异常值或数据分布不符合假设的情况下依然给出可靠的结果,而不会被极…...
ubuntu 有 1 个软件包没有被完全安装或卸载
ubuntu 有 1 个软件包没有被完全安装或卸载,安装时出现问题,一直卡在 rti-connext-dds-5.3.1 安装问题上。 下面是我安装 sqlite3 出现的问题: sukaiG7-7500:~/1/111/workspace_ros_car_noetic$ sudo apt-get install sqlite3 正在读取软件…...
【QT调用ST-link-使用QT编写程序-调用ST-LINK_CLI.exe-烧写STM32F4xxx-基础样例】
【QT结合ST-link,使用QT编写程序,调用ST-LINK_CLI.exe,烧写STM32F4xxx-基础样例】 1、前言2、实验环境3、先前了解-自我总结4、实验过程(0)硬件连接与供电(1)安装&使用STM32 ST-LINK Utility࿰…...
高并发下的Java项目解决方案
高并发下的Java项目解决方案 在当今的互联网时代,高并发是Java项目在设计和开发过程中必须要考虑的重要因素之一。本文将详细介绍如何在Java项目中处理高并发的问题,并提供具体的解决方案。我们将主要讨论四个主要的主题:服务器扩展…...
华为推出手机系统云翻新服务:什么是云翻新?如何使用?
华为手机系统云翻新是华为推出的一项功能,旨在通过云服务提供系统翻新的服务。它可以帮助用户对手机的系统进行优化和更新,以提高手机的性能和流畅度。具体而言,华为手机系统云翻新功能提供了免费的云空间,用户可以将手机中的系统…...
修改时间和创建时间的设计问题
记录一次 在django框架开发中遇到问题: 想要的逻辑: 当在保存数据时,create_time字段只会在新建数据时被设置为当前时间,并且之后不会再修改,而modify_time字段在每次保存数据时都会被设置为当前时间也可以为空&…...
CentOS 搭建 Harbor 镜像仓库(图文详解)
本文目录 1. 下载 Harbor 安装包2. 解压3. 修改配置文件4. 安装 Harbor5. 修改 docker 配置6. docker 登录方式7. 访问 Harbor Web 界面8. 创建证书9. 生成证书10. 更新配置11. 网页登录 说明:在搭建 Harbor 镜像仓库之前,虚拟机要先安装 docker 和 dock…...
【云原生】k8s组件架构介绍与K8s最新版部署
个人主页:征服bug-CSDN博客 kubernetes专栏:kubernetes_征服bug的博客-CSDN博客 目录 1 集群组件 1.1 控制平面组件(Control Plane Components) 1.2 Node 组件 1.3 插件 (Addons) 2 集群架构详细 3 集群搭建[重点] 3.1 mi…...
R语言AI模型部署方案:精准离线运行详解
R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...
java 实现excel文件转pdf | 无水印 | 无限制
文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...
OkHttp 中实现断点续传 demo
在 OkHttp 中实现断点续传主要通过以下步骤完成,核心是利用 HTTP 协议的 Range 请求头指定下载范围: 实现原理 Range 请求头:向服务器请求文件的特定字节范围(如 Range: bytes1024-) 本地文件记录:保存已…...
使用 SymPy 进行向量和矩阵的高级操作
在科学计算和工程领域,向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能,能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作,并通过具体…...
CSS | transition 和 transform的用处和区别
省流总结: transform用于变换/变形,transition是动画控制器 transform 用来对元素进行变形,常见的操作如下,它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...
(一)单例模式
一、前言 单例模式属于六大创建型模式,即在软件设计过程中,主要关注创建对象的结果,并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计,从而隐藏了类对象的实例是如何被创建的,封装了软件系统使用的具体对象类型。 六大创建型模式包括…...
上位机开发过程中的设计模式体会(1):工厂方法模式、单例模式和生成器模式
简介 在我的 QT/C 开发工作中,合理运用设计模式极大地提高了代码的可维护性和可扩展性。本文将分享我在实际项目中应用的三种创造型模式:工厂方法模式、单例模式和生成器模式。 1. 工厂模式 (Factory Pattern) 应用场景 在我的 QT 项目中曾经有一个需…...
【Kafka】Kafka从入门到实战:构建高吞吐量分布式消息系统
Kafka从入门到实战:构建高吞吐量分布式消息系统 一、Kafka概述 Apache Kafka是一个分布式流处理平台,最初由LinkedIn开发,后成为Apache顶级项目。它被设计用于高吞吐量、低延迟的消息处理,能够处理来自多个生产者的海量数据,并将这些数据实时传递给消费者。 Kafka核心特…...
绕过 Xcode?使用 Appuploader和主流工具实现 iOS 上架自动化
iOS 应用的发布流程一直是开发链路中最“苹果味”的环节:强依赖 Xcode、必须使用 macOS、各种证书和描述文件配置……对很多跨平台开发者来说,这一套流程并不友好。 特别是当你的项目主要在 Windows 或 Linux 下开发(例如 Flutter、React Na…...
uni-app学习笔记三十五--扩展组件的安装和使用
由于内置组件不能满足日常开发需要,uniapp官方也提供了众多的扩展组件供我们使用。由于不是内置组件,需要安装才能使用。 一、安装扩展插件 安装方法: 1.访问uniapp官方文档组件部分:组件使用的入门教程 | uni-app官网 点击左侧…...
