echarts实现3D饼图

先看下最终效果

3d饼图旋转效果

实现思路

使用echarts-gl的曲面图(surface)类型
通过parametric绘制曲面参数实现3D效果

代码实现

<template><div id="surfacePie"></div>
</template>
<script setup>import {onMounted} from 'vue'import * as echarts from "echarts";import "echarts-gl";// 图表数据const chartData = [{ name: '性能测试',value: 134},{ name: '安全',value: 56},{ name: '功能',value: 57},{ name: '代码',value: 11},{ name: '易用性',value: 51}]// 自定义颜色const colorList = ['rgba(23,122,219)','rgba(219,129,2)','rgba(113,74,219)','rgba(12,255,246)','rgba(37,26,231)','rgba(219,91,23)',]// 生成扇形的曲面参数方程,用于 series-surface.parametricEquationfunction getParametricEquation(startRatio, endRatio, k, h) {// 计算let startRadian = startRatio * Math.PI * 2;let endRadian = endRatio * Math.PI * 2;// 通过扇形内径/外径的值,换算出辅助参数 k(默认值 1/3)k = typeof k !== 'undefined' ? k : 1 / 3;// 返回曲面参数方程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 Math.cos(startRadian) * (1 + Math.cos(v) * k);}if (u > endRadian) {return Math.cos(endRadian) * (1 + Math.cos(v) * k);}return Math.cos(u) * (1 + Math.cos(v) * k);},y: function (u, v) {if (u < startRadian) {return Math.sin(startRadian) * (1 + Math.cos(v) * k);}if (u > endRadian) {return  Math.sin(endRadian) * (1 + Math.cos(v) * k);}return Math.sin(u) * (1 + Math.cos(v) * k);},z: function (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;}return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;},};}// 生成模拟 3D 饼图的配置项function getPie3D(pieData, internalDiameterRatio) {let series = [];let sumValue = 0; // 总值 计算比例用let startValue = 0;let endValue = 0;// 根据传入的内外径比例,计算饼图空心大小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]};// 为每一项设置颜色和透明度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;series[i].pieData.startRatio = startValue / sumValue; // 曲面开始位置series[i].pieData.endRatio = endValue / sumValue; // 当前曲面结束位置series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio,series[i].pieData.endRatio,k,series[i].pieData.value);startValue = endValue;}// 准备待返回的配置项,把准备好的 legendData、series 传入。let option = {// 图例legend: {type:'scroll',pageIconSize: 12,icon: 'none', // 需求要显示实心点 提供类型没有 所以这个设置不显示data: pieData.map((dItem,dIndex) => {return {...dItem,// 设置单个图例项的文本样式textStyle: {rich: {// 用富文本为每一个图例项画一个对应颜色的实心点iconName: {width: 4,height: 4,borderRadius: 5,backgroundColor: colorList[dIndex],},}},}}),top: 'bottom',left: 'center',itemGap: 5,selectedMode: false, // 关闭图例选择width: '100%',//  统一设置图例的文本样式textStyle: {color: '#fff',fontSize: 12,fontFamily: 'Source Han Sans CN',rich: {// 富文本统一设置 图例的样式name: {fontSize: 12,padding: [0, 0, 0, 10],width: 50,},percent: {fontSize: 12,padding: [0, 0, 0, 5],width: 15,},unit: {fontSize: 12,padding: [0, 0, 0, 1]}}},// 格式化图例formatter: name => {let obj = pieData.find(item => item.name === name);let total = 0;let target = obj.valuefor (let i = 0; i < pieData.length; i++) {total += Number(pieData[i].value);}const legendStyle = `{iconName|}{name|${name}}{percent|${((target / total) * 100).toFixed(0)}}{unit|%}`return legendStyle}},xAxis3D: {},yAxis3D: {},zAxis3D: {},// 设置三维笛卡尔坐标系grid3D: {viewControl: {autoRotate: true, // 自动旋转},left: 'center',top: '-8%',show: false, // 坐标系设置不显示boxHeight: 100,boxWidth: 150,boxDepth: 150,},series: series,};return option;}</script>

补充说明

  1. echarts版本5.51
  2. echarts-gl版本2.0.9
  3. vue版本3.4.29
  4. vite版本5.3.1

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

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

相关文章

简单的找到自己需要的flutter ui 模板

简单的找到自己需要的flutter ui 模板 网站 https://flutterawesome.com/ 简介 我原本以为会很难用 实际上不错 很简单 打开后界面类似于,右上角可以搜索 点击view github 相当简单 很oks

RabbitMq,通过prefetchCount限制消费并发数

1.问题:项目瓶颈,通过rabbitMq来异步上传图片,由于并发上传的图片过多导致阿里OSS异常, 解决方法:通过prefetchCount限制图片上传OSS的并发数量 2.定义消费者 Component AllArgsConstructor Slf4j public class ReceiveFaceImageEvent {private final UPloadService uploadSe…

【见刊通知】MVIPIT 2023机器视觉、图像处理与影像技术国际会议

MVIPIT 2023&#xff1a;https://ieeexplore.ieee.org/xpl/conhome/10578343/proceeding 入库Ei数据库需等20-50天左右 第二届会议征稿启动&#xff08;MVIPIT 2024&#xff09; The 2nd International Conference on Machine Vision, Image Processing & Imaging Techn…

MacOS和Windows中怎么安装Redis

希望文章能给到你启发和灵感&#xff5e; 如果觉得文章对你有帮助的话&#xff0c;点赞 关注 收藏 支持一下博主吧&#xff5e; 阅读指南 开篇说明一、基础环境说明1.1 硬件环境1.2 软件环境 二、MacOS中Redis的安装2.1 HomeBrew 安装&#xff08;推荐&#xff09;2.2 通过官方…

70.WEB渗透测试-信息收集- WAF、框架组件识别(10)

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易锦网校会员专享课 上一个内容&#xff1a;69.WEB渗透测试-信息收集- WAF、框架组件识别&#xff08;9&#xff09; 关于waf相应的识…

arcgis js 4.x实现类似openalayers加载tilewms图层效果

一、普通wms与tilewms区别 相同点&#xff1a;都是加载WMS服务。 不同点&#xff1a;TitleWMS会把当前可视窗口根据网格&#xff08;开发者可以在调用OpenLayers api的时候自定义&#xff09;切分&#xff0c;一片一片地返回回来&#xff0c;在前端进行整合。而ImageWMS则不会…

Springboot 配置 log4j 时的注意事项

感谢博主 https://www.cnblogs.com/fishlittle/p/17950944 依赖 SpringBoot 的 starter 自带的是 logback 日志&#xff0c;若要使用 log4j2 日志&#xff0c;需要引入对应依赖。logback 日志和 log4j2 日志都是对 slf4j 门面的实现&#xff0c;只能存在一个&#xff0c;且必…

江协科技51单片机学习- p25 无源蜂鸣器

&#x1f680;write in front&#x1f680; &#x1f50e;大家好&#xff0c;我是黄桃罐头&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流 &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd;​…

环信IM实现小米、oppo推送详细步骤

本文教大家集成环信IM后如何实现小米、oppo推送。 一、小米推送 步骤一、在小米开放平台创建应用。 在 小米开放平台 创建应用&#xff0c;开启推送服务。详见小米官方网站的 推送服务接入指南。 步骤二、上传推送证书。 注册完成后&#xff0c;需要在环信即时通讯云控制台…

WebSocket 双向通信

WebSocket 是一种在前端开发中用于实现双向通信的网络技术。它与传统的 HTTP 请求-响应模式不同&#xff0c;允许客户端和服务器之间实时、双向的数据传输。 1. 实时性 能够实现数据的即时推送和接收&#xff0c;无需轮询服务器&#xff0c;大大降低了延迟。 2. 双向通信 客…

LeetCode-刷题记录-前缀和合集(本篇blog会持续更新哦~)

一、前缀和&#xff08;Prefix Sum&#xff09;算法概述 前缀和算法通过预先计算数组的累加和&#xff0c;可以在常数时间内回答多个区间和相关的查询问题&#xff0c;是解决子数组和问题中的重要工具。 它的基本思想是通过预先计算和存储数组的前缀和&#xff0c;可以在 O(1)…

初步理解六__《面向互联网大数据的威胁情报 并行挖掘技术研究 》

初步理解 六 STIX 提出了一种标准化的网络威胁情报格式(Structured Threat Information eXpression, STIX) gtp STIX&#xff08;Structured Threat Information eXpression&#xff09;是一种用于标准化描述和共享网络威胁情报的格式和语言。它的设计目标是提供一个通用的…

7.8作业

一、思维导图 二、 1】按值修改 2】按值查找&#xff0c;返回当前节点的地址 &#xff08;先不考虑重复&#xff0c;如果有重复&#xff0c;返回第一个&#xff09; 3】反转 4】销毁链表 //按值修改 int value_change(linklistptr H,datatype e,int value) {if(HNULL||empty(H…

Greenplum(二)【SQL】

前言 Greenplum 的剩余部分主要其实主要就是 DDL 和之前学的 MySQL 不大一样&#xff0c;毕竟 Greenplum 是基于 PostgreSQL 数据库的&#xff0c;不过那些 DML 和 MySQL、Hive 基本上大差不差&#xff0c;所以就没有必要浪费时间了。 1、DDL 1.1、库操作 1.1.1、创建数据库…

python爬虫加入进度条

安装tqdm和requests库 pip install tqdm -i https://pypi.tuna.tsinghua.edu.cn/simplepip install requests -i https://pypi.tuna.tsinghua.edu.cn/simple带进度条下载 import time # 引入time模块&#xff0c;用于处理时间相关的功能 from tqdm import * # 从tqdm包中…

算法力扣刷题 三十六【二叉树迭代遍历】

前言 记录三十五 介绍了二叉树基础&#xff0c;和递归法模版及遍历方式&#xff1b; 递归&#xff1a;代码简单&#xff0c;但要想清楚三步&#xff1a; 确定参数和返回值&#xff1b;确定终止条件&#xff0c;并return什么&#xff1f;&#xff1b;终止条件外的逻辑&#xf…

【AI大模型】赋能儿童安全:楼层与室内定位实践与未来发展

文章目录 引言第一章&#xff1a;AI与室内定位技术1.1 AI技术概述1.2 室内定位技术概述1.3 楼层定位的挑战与解决方案 第二章&#xff1a;儿童定位与安全监控的需求2.1 儿童安全问题的现状2.2 智能穿戴设备的兴起 第三章&#xff1a;技术实现细节3.1 硬件设计与选择传感器选择与…

SpringSecurity中文文档(Servlet Authorization Architecture )

Authorization 在确定了用户将如何进行身份验证之后&#xff0c;还需要配置应用程序的授权规则。 Spring Security 中的高级授权功能是其受欢迎的最有说服力的原因之一。无论您选择如何进行身份验证(无论是使用 Spring Security 提供的机制和提供者&#xff0c;还是与容器或其…

两张图片合并(右上角添加水印,兼容矢量图)保留原来的颜色

无缝合并两张图片&#xff08;封面右上角添加logo&#xff09;-- opencv &#xff1a; 进行添加logo(水印)由于使用了cv2.seamlessClone&#xff0c;cv2.seamlessClone使用了泊松克隆&#xff08;Poisson Cloning&#xff09;&#xff0c;会根据周围的颜色信息进行颜色调整&…

tcp并发设计

4注意&#xff1a;原始代码&#xff0c;如果先关闭服务器端&#xff0c;再次开启服务器的时候会报"connect: Connection refused "错误&#xff0c;这是因为先关服务器端&#xff0c;导致系统认为客户端仍然在与服务器端连接造成。 可以使用setsockopt setsockopt函…