当前位置: 首页 > news >正文

Echart实现3D饼图示例

在可视化项目中,很多地方会遇见图表;echart是最常见的;这个示例就是用Echart, echart-gl实现3D饼图效果,复制即可用
在这里插入图片描述
在这里插入图片描述

//需要安装,再引用依赖import * as echarts from "echarts";
import 'echarts-gl';initUserTypeEchart() {let that = this;let chartDom = document.getElementById("echart-id");let myChart = echarts.init(chartDom);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) {isSelected = false;}k = typeof k !== "undefined" ? k : 1 / 3;const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;// 鼠标滑过时外环放大大小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 Math.sin(v) > 0 ? 1 * h * 0.1 : -1;},};}// 饼图数据var optionData = [{ name: '辣条', value: 100, percentage: 25 },{ name: '亲嘴烧', value: 100, percentage: 25  },{ name: '牛奶', value: 100, percentage: 25  },{ name: '可乐', value: 100, percentage: 25  }]function getPie3D(pieData, internalDiameterRatio) {const series = [];let sumValue = 0;let startValue = 0;let endValue = 0;const legendData = [];let colors = ["#FFB82C", "#009EA8", "#2E9CFF", "#BB36DE"];const k =typeof internalDiameterRatio !== "undefined"? (1 - internalDiameterRatio) / (1 + internalDiameterRatio): 1 / 3;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,radius: ["40%", "60%"],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 = getPie3D(optionData, 0.3)series.push(seriesItem);}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,true,k,10 // 在此处传入饼图初始高度h);startValue = endValue;legendData.push({name: series[i].name,textStyle: { color: colors[i] },});}// 准备待返回的配置项,把准备好的series 传入。const option = {title: {show: false,},//   右边提示文本legend: {show: true,type: "scroll",right: 20,top: "center",orient: "vertical", // 纵向icon: "circle", // icon 类型 标记类型包括 'circle'圆, 'rect'方, 'roundRect'圆角, 'triangle'三角形, 'diamond'lin, 'arrow'箭头, 'pin', 'arrow', 'none'itemHeight: 12, // icon高度itemWidth: 12, // icon 宽度itemGap: 10, // 图例间隔 --每个title之间的间隔data: legendData,formatter: (name) => {if (pieData.length) {const item = pieData.filter((item) => item.name === name)[0];// console.log(item, name)var arr = [`{a|${name}}{b|${item.value}户 (${item.percentage}%)}`,];return arr;// return `${name}:${item.value}`}},textStyle: {color: "auto",rich: {//改样式 和下面formatter一起a: {align: "left",color: "#000",width: 80,fontSize: 12, // 字体大小被覆盖了,这里重新定义},b: {align: "right",// color: '#59e6ed',fontSize: 12,},},},},//   每一块区域的颜色color: ["#009EA8", "#2E9CFF", "#FFB82C", "#BB36DE"],tooltip: {trigger: "item",formatter: (params) => {if (params.seriesName !== "mouseoutSeries") {return `${params.marker}${params.seriesName}${pieData[params.seriesIndex].value}`;}return "";},},xAxis3D: { min: -1, max: 1 },yAxis3D: { min: -1, max: 1 },zAxis3D: { min: -1, max: 1 },grid3D: {show: false,boxHeight: 30, // 修改三维场景高度top: -20,width: 200,viewControl: {// 3d效果可以放大、旋转等,alpha: 20, // 上下绕X轴角度beta: 0, //左右绕Y轴角度// projection: 'perspective',//默认为透视投影'perspective',也支持设置为正交投影'orthographic'rotateSensitivity: 1,zoomSensitivity: 0,panSensitivity: 0,autoRotateSpeed: 50, //物体自传的速度autoRotate: false, // 是否自动旋转distance: 270, // 距离越小看到的饼图越大},},series,};return option;}// 可做为调整内环大小 0为实心圆饼图,大于0 小于1 为圆环let option = getPie3D(optionData, 0);myChart.setOption(option);window.addEventListener("resize", function () {myChart.resize();});},

相关文章:

Echart实现3D饼图示例

在可视化项目中&#xff0c;很多地方会遇见图表&#xff1b;echart是最常见的&#xff1b;这个示例就是用Echart&#xff0c; echart-gl实现3D饼图效果&#xff0c;复制即可用 //需要安装&#xff0c;再引用依赖import * as echarts from "echarts"; import echar…...

UE5 Debug的一些心得

1、BUG粗略可分为两类&#xff1a; 一种是显性的&#xff0c;编译直接就通不过&#xff0c;必须马上解决。 第二种是隐性的&#xff0c;新功能完成后&#xff0c;编译成功顺利运行&#xff0c;洋洋自得&#xff0c;而问题隐藏在幕后&#xff0c;测试之后才逐渐发现有问题&…...

java中多线程的一些常见操作

Java 中的多线程是通过并发编程来提高应用程序的效率和响应速度。Java 提供了多个机制和类来支持多线程编程&#xff0c;包括继承 Thread 类、实现 Runnable 接口、使用线程池等。以下是 Java 中一些常见的多线程操作和应用场景。 1. 创建线程 1.1 通过继承 Thread 类创建线程…...

【gopher的java学习笔记】什么是Spring - IoC和DI

一聊到java&#xff0c;离不开的一个东西就是spring&#xff1b;当我想了解什么是spring的时候&#xff0c;一查&#xff0c;基本上都是围绕着两个词来展开的&#xff1a;IoC和AOP。 对于我自己来说&#xff0c;AOP我觉得比较好理解&#xff0c;因为不管是之前写golang还是pyt…...

【开源免费】基于SpringBoot+Vue.JS校园社团信息管理系统(JAVA毕业设计)

本文项目编号 T 107 &#xff0c;文末自助获取源码 \color{red}{T107&#xff0c;文末自助获取源码} T107&#xff0c;文末自助获取源码 目录 一、系统介绍二、数据库设计三、配套教程3.1 启动教程3.2 讲解视频3.3 二次开发教程 四、功能截图五、文案资料5.1 选题背景5.2 国内…...

设计模式 创建型 工厂模式(Factory Pattern)与 常见技术框架应用 解析

工厂模式&#xff08;Factory Pattern&#xff09;是一种创建型设计模式&#xff0c;它提供了一种封装对象创建过程的方式&#xff0c;使得对象的创建与使用分离&#xff0c;从而提高了系统的可扩展性和可维护性。 一、核心思想 工厂模式的核心思想是将“实例化对象”的操作与…...

pip 下载安装时使用国内源配置

pip 是 Python 的包管理工具&#xff0c;用于安装和管理第三方库。然而&#xff0c;在某些情况下&#xff0c;默认的 PyPI&#xff08;Python Package Index&#xff09;源可能由于网络原因导致下载速度慢或者连接不稳定。幸运的是&#xff0c;我们可以轻松地配置 pip 使用国内…...

【数据结构】数据结构简要介绍

数据结构是计算机科学中用于组织、管理和存储数据的方式&#xff0c;以便于高效地访问和修改数据。 数据结构的分类&#xff1a; 数据结构可以大致分为两类&#xff1a;线性结构和非线性结构。 1. 线性结构 线性结构中的数据按顺序排列&#xff0c;每个元素有唯一的前驱和后…...

数据分析-Excel

数据类型和函数初步 Excel中有文本类型和数值类型–但是无法用肉眼分辨出来isnumber来区分是否是数值类型text和value函数可以完成数值类型以及文本类型的转换单元格第一位输入’方式明确输入的是文本sum函数必须是数值类型 文本连接-and-or-not-if-mod-max函数 字符串的连接…...

Yocto项目—机器配置文件详解

引言 在Yocto项目中&#xff0c;机器配置文件&#xff08;Machine Configuration File&#xff09;是系统定制化的重要组成部分&#xff0c;直接决定了构建的目标平台硬件特性和能力。本文将深入探讨Yocto项目中的机器配置文件&#xff0c;从其作用、结构到具体配置方法&#…...

30天开发操作系统 第 10 天 -- 叠加处理

前言 得益于昨天的努力&#xff0c;我们终于可以进行内存管理了。不过仔细一看会注意到&#xff0c;bootpack.c都已经有254行了。笔者感觉这段程序太长了&#xff0c;决定整理一下&#xff0c;分出一部分到memory.c中去。(整理中)…好了&#xff0c;整理完了。现在bootpack.c变…...

第十讲 比特币的社会与文化影响

比特币作为一种革命性的数字货币&#xff0c;不仅在经济领域产生了深远的影响&#xff0c;也在社会和文化层面引发了广泛的讨论和变革。本文将探讨比特币如何塑造我们的社会观念、文化趋势以及对未来的展望。 一、比特币与社会观念的变迁 比特币的出现挑战了传统的货币观念和…...

Unity2D无限地图的实现(简单好抄)

说明&#xff1a;本教程实现的是在2D游戏中玩家在游戏中上下左右移动的时候自动进行地图拼接的功能&#xff0c;如果你只想实现左右移动的无限地图&#xff0c;那么这篇博客也能起到一定参考作用。 思路 第一步&#xff1a; 创建一个10*10的2D游戏对象当做地图 第二步创建一个…...

TCP网络编程(一)—— 服务器端模式和客户端模式

这篇文章将会编写基本的服务器网络程序&#xff0c;主要讲解服务器端和客户端代码的原理&#xff0c;至于网络名词很具体的概念&#xff0c;例如什么是TCP协议&#xff0c;不会过多涉及。 首先介绍一下TCP网络编程的两种模式&#xff1a;服务器端和客户端模式&#xff1a; 首先…...

03-类和对象(上)

一、类的概述 1.类的引入 类的封装&#xff1a;将数据和方法封装在一起&#xff0c;加以权限区分&#xff0c;用户只能通过公共方法访问私有数据。 为什么要将数据和方法封装在一起呢&#xff0c;而且还要通过公共方法才能访问私有数据&#xff1f; C语言中数据和方法分开可…...

PCL点云库入门——PCL库点云滤波算法之统计滤波(StatisticalOutlierRemoval)

1、算法原理 统计滤波算法是一种利用统计学原理对点云数据进行处理的方法。它主要通过计算点云中每个点的统计特性&#xff0c;如均值、方差等&#xff0c;来决定是否保留该点。算法首先会设定一个统计阈值&#xff0c;然后对点云中的每个点进行分析。如果一个点的统计特性与周…...

【机器学习】Kaggle实战信用卡反欺诈预测(场景解析、数据预处理、特征工程、模型训练、模型评估与优化)

构建信用卡反欺诈预测模型 建模思路 本项目需解决的问题 本项目通过利用信用卡的历史交易数据&#xff0c;进行机器学习&#xff0c;构建信用卡反欺诈预测模型&#xff0c;提前发现客户信用卡被盗刷的事件。 项目背景 数据集包含由欧洲持卡人于2013年9月使用信用卡进行交的…...

【RISC-V CPU debug 专栏 4 -- RV CSR寄存器介绍】

文章目录 Overview1. CSR寄存器访问指令2. 为何CSR地址不是4字节对齐(1) CSR寄存器空间是独立的地址空间(2) 节省编码空间(3) 对硬件实现的简化 3. CSR的物理大小和对齐无关4. RISC-V 中的 GPR 寄存器及其作用GPR 的详细用途CSR&#xff08;控制状态寄存器&#xff09;与 GPR 的…...

Object.defineProperty() 完整指南

Object.defineProperty() 完整指南 1. 基本概念 Object.defineProperty() 方法允许精确地添加或修改对象的属性。默认情况下&#xff0c;使用此方法添加的属性是不可修改的。 1.1 基本语法 Object.defineProperty(obj, prop, descriptor)参数说明&#xff1a; obj: 要定义…...

postgresql函数创建

postgresql的函数创建 1.创建函数的基本语法&#xff1a; CREATE [OR REPLACE] FUNCTION function_name(parameter_list) RETURNS return_type AS $$ BEGIN -- 函数体 END; $$ LANGUAGE language_name;2.创建函数时传入参数示例:add_user tbl_user表 | id | username | …...

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...

CppCon 2015 学习:Time Programming Fundamentals

Civil Time 公历时间 特点&#xff1a; 共 6 个字段&#xff1a; Year&#xff08;年&#xff09;Month&#xff08;月&#xff09;Day&#xff08;日&#xff09;Hour&#xff08;小时&#xff09;Minute&#xff08;分钟&#xff09;Second&#xff08;秒&#xff09; 表示…...

6.9本日总结

一、英语 复习默写list11list18&#xff0c;订正07年第3篇阅读 二、数学 学习线代第一讲&#xff0c;写15讲课后题 三、408 学习计组第二章&#xff0c;写计组习题 四、总结 明天结束线代第一章和计组第二章 五、明日计划 英语&#xff1a;复习l默写sit12list17&#…...

英国云服务器上安装宝塔面板(BT Panel)

在英国云服务器上安装宝塔面板&#xff08;BT Panel&#xff09; 是完全可行的&#xff0c;尤其适合需要远程管理Linux服务器、快速部署网站、数据库、FTP、SSL证书等服务的用户。宝塔面板以其可视化操作界面和强大的功能广受国内用户欢迎&#xff0c;虽然官方主要面向中国大陆…...

mq安装新版-3.13.7的安装

一、下载包&#xff0c;上传到服务器 https://github.com/rabbitmq/rabbitmq-server/releases/download/v3.13.7/rabbitmq-server-generic-unix-3.13.7.tar.xz 二、 erlang直接安装 rpm -ivh erlang-26.2.4-1.el8.x86_64.rpm不需要配置环境变量&#xff0c;直接就安装了。 erl…...

uni-app学习笔记二十三--交互反馈showToast用法

showToast部分文档位于uniapp官网-->API-->界面&#xff1a;uni.showToast(OBJECT) | uni-app官网 uni.showToast(OBJECT) 用于显示消息提示框 OBJECT参数说明 参数类型必填说明平台差异说明titleString是提示的内容&#xff0c;长度与 icon 取值有关。iconString否图…...

Java求职者面试指南:Spring、Spring Boot、Spring MVC与MyBatis技术点解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、Spring MVC与MyBatis技术点解析 第一轮&#xff1a;基础概念问题 请解释Spring框架的核心容器是什么&#xff1f;它的作用是什么&#xff1f; 程序员JY回答&#xff1a;Spring框架的核心容器是IoC容器&#xff08;控制反转…...

大模型的LoRa通讯详解与实现教程

一、LoRa通讯技术概述 LoRa(Long Range)是一种低功耗广域网(LPWAN)通信技术,由Semtech公司开发,特别适合于物联网设备的长距离、低功耗通信需求。LoRa技术基于扩频调制技术,能够在保持低功耗的同时实现数公里甚至数十公里的通信距离。 LoRa的主要特点 长距离通信:在城…...

暴雨新专利解决服务器噪音与性能悖论

6月1日&#xff0c;我国首部数据中心绿色化评价方面国家标准《绿色数据中心评价》正式实施&#xff0c;为我国数据中心的绿色低碳建设提供了明确指引。《评价》首次将噪音控制纳入国家级绿色评价体系&#xff0c;要求从设计隔声结构到运维定期监测实现闭环管控&#xff0c;加速…...