基于Vue的3D饼图

先看效果：在这里插入图片描述
再看代码：

<template><div class="container"><div style="height: 100%;width: 100%;" id="bingtu3D"></div></div></template>
<script>
import "echarts-liquidfill";
import 'echarts-gl';
import * as echarts from "echarts";export default {mounted () {this.BingTu3D()},methods: {BingTu3D(){const myCharts = echarts.init(document.getElementById('bingtu3D'));function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k,height) {// 计算let midRatio = (startRatio + endRatio) / 2;let startRadian = startRatio * Math.PI * 2;let endRadian = endRatio * Math.PI * 2;let midRadian = midRatio * Math.PI * 2;// 如果只有一个扇形，则不实现选中效果。if (startRatio === 0 && endRatio === 1) {isSelected = false;}// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）k = typeof k !== 'undefined' ? k : 1 / 3 ;// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;// 计算高亮效果的放大比例（未高亮，则比例为 1）let 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: function(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: function(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: function(u, v) {if (u < - Math.PI * 0.5 ) {return Math.sin(u);}if (u > Math.PI * 2.5 ){return Math.sin(u);}return Math.sin(v) > 0 ? 1*height : -1;}};}// 生成模拟 3D 饼图的配置项function getPie3D(pieData, internalDiameterRatio) {let series = [];let sumValue = 0;let startValue = 0;let endValue = 0;let legendData = [];let k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio): 1 / 3;// 为每一个饼图数据，生成一个 series-surface 配置for (let i = 0; i < pieData.length; i++) {sumValue += pieData[i].value;let 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: k}};if (typeof pieData[i].itemStyle != 'undefined') {let itemStyle = {};typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;typeof 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，也就是实现每一个扇形。for (let i = 0; i < series.length; i++) {endValue = startValue + series[i].pieData.value;console.log(series[i]);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,series[i].pieData.value);startValue = endValue;legendData.push(series[i].name);}// // 补充一个透明的圆环，用于支撑高亮功能的近似实现。series.push({name: 'mouseoutSeries',type: 'surface',parametric: true,wireframe: {show: false,},itemStyle: {opacity: 0.1,color: '#E1E8EC',},parametricEquation: {u: {min: 0,max: Math.PI * 2,step: Math.PI / 20,},v: {min: 0,max: Math.PI,step: Math.PI / 20,},x: function (u, v) {return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;},y: function (u, v) {return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;},z: function (u, v) {return Math.cos(v) > 0 ? -0.5 : -5;},},});// 补充一个透明的圆环，用于支撑高亮功能的近似实现。series.push({name: 'mouseoutSeries',type: 'surface',parametric: true,wireframe: {show: false,},itemStyle: {opacity: 0.1,color: '#E1E8EC',},parametricEquation: {u: {min: 0,max: Math.PI * 2,step: Math.PI / 20,},v: {min: 0,max: Math.PI,step: Math.PI / 20,},x: function (u, v) {return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;},y: function (u, v) {return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;},z: function (u, v) {return Math.cos(v) > 0 ? -5 : -7;},},});series.push({name: 'mouseoutSeries',type: 'surface',parametric: true,wireframe: {show: false,},itemStyle: {opacity: 0.1,color: '#E1E8EC',},parametricEquation: {u: {min: 0,max: Math.PI * 2,step: Math.PI / 20,},v: {min: 0,max: Math.PI,step: Math.PI / 20,},x: function (u, v) {return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.2;},y: function (u, v) {return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.2;},z: function (u, v) {return Math.cos(v) > 0 ? -7 : -7;},},});return series;}// 传入数据生成 optionconst optionsData = [{name: 'name1',value: 95,itemStyle: {//   opacity: 0.5,color: '#dc3545',},},{name: 'name2',value: 5,itemStyle: {//   opacity: 0.5,color: '#efb72c',},},{name: 'name3',value: 60,itemStyle: {//   opacity: 0.5,color: '#00b2ff',},},];const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);series.push({name: 'pie2d',type: 'pie',label: {show:true,opacity: 1,lineHeight: 20,textStyle: {fontSize: 16,color:'#fff'},},labelLine: {length: 30,length2: 60,},startAngle: -30, //起始角度，支持范围[0, 360]。clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式radius: ['20%', '50%'],center: ['50%', '50%'],data: optionsData,itemStyle: {opacity: 0,},});// 准备待返回的配置项，把准备好的 legendData、series 传入。const option = {legend: {tooltip: {show: true,},data: ['name1', 'name2', 'name3'],bottom: '1%',right:'10%',textStyle: {color: '#fff',fontSize: 16,},},animation: true,// tooltip: {//   formatter: params => {//     if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {//       return `${params.seriesName}<br/><span style="display:inline-block;margin-right:5px;border-radius:5px;width:10px;height:10px;background-color:${params.color};"></span>${option.series[params.seriesIndex].pieData.value }`;//     }//   },//   textStyle : {//     fontSize : 16//   },// },title: {x: 'center',top: '20',},// backgroundColor: '#333',label: {show: true,position: 'outside',formatter: '{b} \n{c} {d}%',},xAxis3D: {min: -1,max: 1,},yAxis3D: {min: -1,max: 1,},zAxis3D: {min: -1,max: 1,},grid3D: {show: false,boxHeight: 0.5,bottom: '50%',viewControl:{distance:180,alpha:25,beta:60,autoRotate: false, // 自动旋转},},series: series,};// 绘制图表myCharts.setOption(option)//自适应大小window.onresize = () => {myCharts.resize()}},}
}
</script>
<style lang="less" scoped>
/*正文开始*/
.container{width:1920px;height:900px;background-color: #5b81ee;
}
body {width: 1920px;overflow: hidden;height: 1080px;
}
</style>

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

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

相关文章

MySQL 实战（一）：实现“附近的人”功能

MySQL 实战（一）：实现“附近的人”功能

❤️ 个人主页&#xff1a;水滴技术 &#x1f680; 支持水滴&#xff1a;点赞&#x1f44d; 收藏⭐ 留言&#x1f4ac; &#x1f338; 订阅专栏&#xff1a;MySQL 教程&#xff1a;从入门到精通 文章目录 ST_Distance_Sphere 函数示例一&#xff1a;计算北京站到北京西站的距…
阅读更多...
两阶段提交：详解数据库宕机引起的主从不一致问题、redolog与binlog的两阶段提交

两阶段提交：详解数据库宕机引起的主从不一致问题、redolog与binlog的两阶段提交

0、基础知识and问题 从基础上我们了解&#xff1a; &#xff08;1&#xff09;redolog作为数据库保证持久化的日志&#xff0c;在update事务提交后就会按一定的策略刷入磁盘中&#xff0c;在刷入后&#xff0c;即使数据库断电宕机&#xff0c;mysql也能从redolog中恢复数据到磁…
阅读更多...
NineData中标移动云数据库传输项目（2023）

NineData中标移动云数据库传输项目（2023）

近日&#xff0c;玖章算术NineData智能数据管理平台成功中标《2023年移动云数据库传输服务软件项目》&#xff0c;中标金额为406万。这标志着玖章算术NineData平台已成功落地顶级运营商行业&#xff0c;并在数据管理方面实现了大规模应用实践。 NineData中标2023移动云数据库传…
阅读更多...
OpenCV使用CMake和MinGW-w64的编译安装

OpenCV使用CMake和MinGW-w64的编译安装

OpenCV使用CMake和MinGW-w64的编译安装中的问题 问题&#xff1a;gcc: error: long: No such file or directory** C:\PROGRA~2\Dev-Cpp\MinGW64\bin\windres.exe: preprocessing failed. modules\core\CMakeFiles\opencv_core.dir\build.make:1420: recipe for target ‘modul…
阅读更多...
基于nginx禁用访问ip

基于nginx禁用访问ip

一、背景 网络安全防护时&#xff0c;禁用部分访问ip,基于nginx可快速简单实现禁用。 二、操作 1、创建 conf.d文件夹 在nginx conf 目录下创建conf.d文件夹 Nginx 扩展配置文件一般在conf.d mkdir conf.d 2、新建blocksip.conf文件 在conf.d目录新建禁用ip的扩展配置文…
阅读更多...
Bandicam 班迪录屏 安装使用教程

Bandicam 班迪录屏 安装使用教程

Bandicam是一款非常流行的录屏软件&#xff0c;可以在Windows系统上轻松录制游戏或其他应用程序的视频&#xff0c;支持高清、压缩方式选择、多媒体编码、按键记录、水印等。下面是Bandicam安装使用教程。 1、下载Bandicam安装程序 在官方网站或其他可靠的下载站点上下载Band…
阅读更多...
如何保障Facebook账号登录稳定

如何保障Facebook账号登录稳定

当谈到保障Facebook账号的稳定性时&#xff0c;我们不得不提到那些令人头疼的情况——Facebook账号被封。尽管我们已经踏入数字化的未来&#xff0c;但是被封号似乎是一个时常困扰着社交媒体用户的问题。那么&#xff0c;让我们来看看一些常见的Facebook账号被封的原因&#xf…
阅读更多...
python爬虫实战(3)--爬取某乎热搜

python爬虫实战(3)--爬取某乎热搜

1. 分析爬取地址 打开某乎首页&#xff0c;点击热榜 这个就是我们需要爬取的地址&#xff0c;取到地址某乎/api/v3/feed/topstory/hot-lists/total?limit50&desktoptrue 定义好请求头&#xff0c;从Accept往下的请求头全部复制&#xff0c;转换成json headers {Accep…
阅读更多...
基于Python科研论文绘制学习 - task2

基于Python科研论文绘制学习 - task2

Matplotlib 1、subplot&#xff08;&#xff09; matplotlib.pyplot模块提供了一个 subplot() 函数&#xff0c;它可以均等地划分画布&#xff0c;该函数的参数格式如下&#xff1a; plt.subplot(nrows, ncols, index) nrows 与 ncols 表示要划分几行几列的子区域&#xff0…
阅读更多...
【工程优化问题】基于鲸鱼、萤火虫、灰狼优化算法的张力、压缩弹簧设计问题研究（Matlab代码实现）

【工程优化问题】基于鲸鱼、萤火虫、灰狼优化算法的张力、压缩弹簧设计问题研究（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…
阅读更多...
问道管理：数字经济概念走势强劲，竞业达、久其软件等涨停，观想科技等大涨

问道管理：数字经济概念走势强劲，竞业达、久其软件等涨停，观想科技等大涨

信创、智慧政务等数字经济概念22日盘中走势微弱&#xff0c;截至发稿&#xff0c;观想科技、慧博云通涨超15%&#xff0c;竞业达、中远海科、久其软件等涨停&#xff0c;云赛智联、延华智能、汇纳科技涨约9%&#xff0c;天玑科技、安硕信息、思特奇、零点稀有涨逾7%。 音讯面上…
阅读更多...
MyBatis的核心技术掌握，简单易懂

MyBatis的核心技术掌握，简单易懂

目录 一.MyBatis中的动态SQL 二.MyBatis中的模糊查询 1. # 符号 2. $ 符号 ---问题 ---所以大家知道 # 和 $ 在MyBatis中的模糊查询中的区别了嘛&#xff1f;&#xff1f; 三.MyBatis 中的结果映射 1. resultType&#xff1a; 2. resultMap&#xff1a; ---问题 ---…
阅读更多...
PHP求职招聘系统Dreamweaver开发mysql数据库web结构php编程计算机网页

PHP求职招聘系统Dreamweaver开发mysql数据库web结构php编程计算机网页

一、源码特点 PHP 求职招聘系统是一套完善的web设计系统&#xff0c;对理解php编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 源码 https://download.csdn.net/download/qq_41221322/88240283 论文 https://down…
阅读更多...
ORB-SLAM系列算法演进

ORB-SLAM系列算法演进

ORB-SLAM算法是特征点法的代表&#xff0c;当前最新发展的ORB-SLAM3已经将相机模型抽象化&#xff0c;适用范围非常广&#xff0c;虽然ORB-SLAM在算法上的创新并不是很丰富&#xff0c;但是它在工程上的创新确实让人耳目一新&#xff0c;也能更好的为AR、机器人的算法实现落地。…
阅读更多...
裂缝检测，只依赖OPENCV，基于YOLO8S

裂缝检测，只依赖OPENCV，基于YOLO8S

裂缝检测&#xff0c;只依赖OPENCV&#xff0c;YOLOV8S 现在YOLOV8S训练目标非常方便&#xff0c;可以直接转换成ONNX让OPENCV调用&#xff0c;支持C/PYTHON&#xff0c;原理很简单&#xff0c;自己找博客&#xff0c;有兴趣相互交流
阅读更多...
Java学习笔记37

Java学习笔记37

Java笔记37 TCP案例 TCP实现发送消息 下面我们来分别编写一个客户端程序和一个服务端程序&#xff0c;使用用户端给服务端发送一句消息&#xff0c;然后使用服务端接收用户端发送过来的这句消息并打印输出。 客户端&#xff1a; 创建一个与服务端Socket类的实例对象&#xf…
阅读更多...
基于swing的教务管理系统java jsp学生教师信息mysql源代码

基于swing的教务管理系统java jsp学生教师信息mysql源代码

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 基于swing的教务管理系统 系统有3权限&#xff1a;管…
阅读更多...
伦敦金短线好还是长线好

伦敦金短线好还是长线好

在伦敦金投之中&#xff0c;长期有一个争论很久的问题&#xff0c;那就是伦敦金投资究竟是长线好还是短线好&#xff1f;不同的投资者对这个问题有不同的看法&#xff0c;一般认为&#xff0c;伦敦金投资比较适合短线交易。笔者也将讨论这个问题&#xff0c;看看伦敦金投资是不…
阅读更多...
谁偷走了我的存储容量？预留空间OP参上！

谁偷走了我的存储容量？预留空间OP参上！

大家好&#xff0c;我是五月。 前言 不知道你有没有发现&#xff0c;每当买回来一块U盘&#xff0c;插入电脑发现永远比所标的容量小。 到底是谁偷走了我的容量&#xff1f; 真凶就是预留空间&#xff08;Over Provisioning&#xff09;&#xff0c;简称OP。 预留空间OP是…
阅读更多...
【Go语言】基于Socket编程的P2P通信程序示例

【Go语言】基于Socket编程的P2P通信程序示例

Go语言的Socket编程实现为开发者提供了一种高效且强大的方式来实现网络通信。通过Go语言的并发模型和内置的网络库&#xff0c;如net包&#xff0c;开发者可以轻松地创建基于套接字的通信应用。Go语言的goroutine和channel机制使并发处理变得简单&#xff0c;能够轻松处理多个连…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023