vue3之echarts3D环柱饼图

vue3之echarts3D环柱饼图

效果:
在这里插入图片描述

版本
"echarts": "^5.4.1", "echarts-gl": "^2.0.9"

核心代码:

<template><div class="content"><div ref="eCharts" class="chart"></div></div>
</template><script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import "echarts-gl";const eCharts = ref(null);
let myChart = null;let boxHeight;
let optionData = ref([{name: "林地",value: 5,itemStyle: {color: "#22c4ff",},},{name: "草地",value: 13,itemStyle: {color: "#aaff00",},},{name: "耕地",value: 38,itemStyle: {color: "#bbaaf1",},},
]);const getParametricEquation = (startRatio,endRatio,isSelected,isHovered,k,h
) => {// 计算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) * h * 0.1;}return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;},};
};const getPie3D = (pieData, internalDiameterRatio) => {// internalDiameterRatio:透明的空心占比let series = [];let sumValue = 0;let startValue = 0;let endValue = 0;let k = 1 - internalDiameterRatio;pieData.sort((a, b) => {return b.value - a.value;});// 为每一个饼图数据,生成一个 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,},center: ["10%", "50%"],};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,false,false,k,series[i].pieData.value // 控制各模块高度一致100   控制各模块高度根据value改变);startValue = endValue;}boxHeight = getHeight3D(series, 26); //通过传参设定3d饼/环的高度,26代表26PXreturn series;
};const getHeight3D = (series, height) => {series.sort((a, b) => {return b.pieData.value - a.pieData.value;});return (height * 25) / series[0].pieData.value;
};const initCharts = () => {myChart = echarts.init(eCharts.value);const series = getPie3D(optionData.value, 0);series.push({name: "pie2d",type: "pie",label: {opacity: 1,fontSize: 28,lineHeight: 20,},labelLine: {length: 20,length2: 50,},startAngle: -40, //起始角度,支持范围[0, 360]。clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式radius: ["50%", "32%"],center: ["50%", "50%"],data: optionData.value,itemStyle: {opacity: 0,},});optionData.value.forEach((item) => {item.label = {color: item.itemStyle.color,show: true,formatter: (item) => {return `{b|${item.name} \n}`;},rich: {b: {fontSize: 16,lineHeight: 20,},},};});let option = {xAxis3D: {min: -1,max: 1,},yAxis3D: {min: -1,max: 1,},zAxis3D: {min: -1,max: 1,},grid3D: {show: false,top: 0, // 距离上边的间距boxHeight, // 圆环的高度viewControl: {// 3d效果可以放大、旋转等,请自己去查看官方配置alpha: 22, // 角度distance: 400, // 调整视角到主体的距离,类似调整zoomrotateSensitivity: 0, // 设置为0无法旋转zoomSensitivity: 0, // 设置为0无法缩放panSensitivity: 0, // 设置为0无法平移autoRotate: false, // 自动旋转},},series,};myChart?.setOption(option);
};onMounted(() => {initCharts();
});
</script><style lang="scss" scoped>
.content {position: relative;.chart {position: absolute;top: -20px;left: -20px;width: 500px;height: 300px;}
}
</style>

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

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

相关文章

【uniapp·微信登录】

一、新建文件夹&#xff08;登录&#xff09; 在HBuilderX中开发微信小程序的步骤如下&#xff1a; 在HBuilderX中新建一个uniapp项目。 在HBuilderX中配置安装的微信开发者工具路径&#xff0c;可以通过点击 工具》设置》运行配置–小程序运行配置 进行配置。 在HBuilderX中修…

【MySQL】聚集函数注意事项

聚集函数注意事项 除了 COUNT(*) 不会忽略列值为 NULL 的行&#xff0c;其他的聚集函数都会忽略。 MAX() 也可以返回文本中的最大值&#xff0c;返回排序后的最后一行。 MIN() 也可以返回文本中的最小值&#xff0c;返回排序后的第一行。 使用标准的算术操作符&#xff08;加…

动网格-网格重构之弹性光顺局部重构法(四)

弹性光顺法的基本特点 弹性光顺法中&#xff0c;网格线类似于弹簧&#xff0c;两端节点(node)作弹性移动 弹性光顺法有如下特点。 (1)节点的数量和节点之间的连接关系均不变&#xff0c;即节点之间的连接属性不变。 (2)单独使用时&#xff0c;仅限于变形非常小的情况&#xff…

while 和 do-while

签名&#xff1a;但行好事&#xff0c;莫问前程。 文章目录 前言一、while1、基本语法2、执行过程3、示例 二、do-while1、基本语法2、执行过程3、小练习&#xff08;ATM存款取款机&#xff09; 总结 前言 记录一下while 和 do-while 的使用。 一、while 1、基本语法 ①初始…

【Java万花筒】Java引擎加速:GPU计算与并行处理库助力你的应用翱翔

加速未来&#xff1a;掌握GPU计算&#xff0c;助力Java应用飞跃 前言 随着计算需求的不断增加&#xff0c;GPU计算和并行处理技术成为提高应用程序性能的关键。在Java生态系统中&#xff0c;有许多强大的库和工具&#xff0c;可以帮助开发者充分利用GPU的并行计算能力&#x…

Navicat连接MySQL出现Host is not allowed to connect to this MySQL server 解决方法

翻译 &#xff1a;‘不允许主机连接到此MySQL服务器’ &#xff08;意思是本地账号连接可以登录&#xff0c;但是远程登陆不行&#xff09; 解决方案&#xff1a; 1、输入mysql账号密码&#xff0c;登录mysql mysql -uroot -p2、进入mysql库 use mysql; 3、修改root账号的host…

Java:SpringBoot整合Hashids,实现数据ID加密隐藏

引入依赖 <dependency><groupId>org.hashids</groupId><artifactId>hashids</artifactId><version>1.0.3</version> </dependency>步骤 1、自定义注解 Documented Retention(RetentionPolicy.RUNTIME) Target({ElementType…

OpenHarmony—ArkTS限制throw语句中表达式的类型

规则&#xff1a;arkts-limited-throw 级别&#xff1a;错误 ArkTS只支持抛出Error类或其派生类的实例。禁止抛出其他类型&#xff08;例如number或string&#xff09;的数据。 TypeScript throw 4; throw ; throw new Error();ArkTS throw new Error();限制省略函数返回类…

el-tree实现多选、反选、指定选择

最近项目中遇到实现设备多选的需求&#xff0c;虽然这个需求很常见&#xff0c;但功能需求的不同&#xff0c;实现过程也大相径庭&#xff0c;我们的需求时只提供子级选择&#xff0c;父级不做选择&#xff0c;只提供层级显示&#xff1b; el-tree是elementPlus的组件&#xf…

Codeforces Round 835 (Div. 4)

目录 A. Medium Number B. Atilla’s Favorite Problem C. Advantage D. Challenging Valleys E. Binary Inversions F. Quests G. SlavicG’s Favorite Problem A. Medium Number 中位数,排序之后处于中间位置的数 void solve() {n3;vector<int> a(n);for(auto&a…

漏油检测时间大幅缩短!漏油传感器的检测原理是什么?

在油类化工厂、输油管道、油库等工业生产场所&#xff0c;漏油情况时有发生&#xff0c;如果不能及时发现&#xff0c;往往产生非常严重的后果。因此&#xff0c;由漏油控制器和漏油检测绳组合而成的漏油传感器被广泛应用了起来&#xff0c;能够在发生漏油时及时发出告警&#…

AHK学习,诡异的早起,舒畅地打篮球——2024 第4周总结

活神仙 引言颓 周六周日理清当前老问题新问题 总结当前之前的老问题 学习的AHKAHK历程AHK作用和适合人群 我帮别人解决的AHK例子我自用的AKH功能结尾 引言 今天才写周总结 是因为这两天有点颓 颓在哪里呢&#xff1f; 请听我细细说来 水文 技术有 AHK的&#xff0c;不想看可以…

【React教程】(1) React简介、React核心概念、React初始化

目录 ReactReact 介绍React 特点React 的发展历史React 与 Vue 的对比技术层面开发团队社区Native APP 开发 相关资源链接 EcmaScript 6 补充React 核心概念组件化虚拟 DOM 起步初始化及安装依赖Hello World React React 介绍 React 是一个用于构建用户界面的渐进式 JavaScrip…

Java-12.Spring 中通过 ThreadPoolTaskExecutor 和 AsyncConfigurerSupport 配置默认异步线程池

Java-12a.Spring 中通过 TaskDecorator 配置默认异步线程池 前言 虽然在 SpringBoot 2.7.x 中已经有关于异步线程池的默认配置&#xff0c;但如果还是要自定义的需求&#xff0c;仍然值得学习了解一下。 例如&#xff1a;想要在多线程池中添加 traceId&#xff1b;使用 tran…

【DC-DC】AP5125 降压恒流驱动器 60W LED电源驱动方案PCB+BOM表

这是一款60WLED驱动方案,线路图如下 ​ 祥单表&#xff1a; 实物图&#xff1a; 产品描述 特点应用领域应用原理图AP5125 是一款外围电路简单的 Buck 型平均电流检测模式的 LED 恒流驱动器&#xff0c;适用于 8-100V 电压范围的非隔离式大功率恒流 LED 驱动领域。芯片采用固定…

APUE学习之进程间通信(IPC)(下篇)

目录 一、进程间通信&#xff08;IPC&#xff09; 二、信号量&#xff08;Semaphore&#xff09; 1、基本概念 2、同步关系与互斥关系 3、临界区与临界资源 4、信号量的工作原理 5、信号量编程 6、实战演练 三、共享内存&#xff08;Shared Memory&#xff09; 1、…

如何使用 Maltego 情报调查保姆级教程(附链接)

前言 使用软件需要挂梯子 一、介绍 Maltego 是一种开放源代码的情报和数据连接工具&#xff0c;专注于网络情报收集和图形化分析。它为用户提供了一个交互式的界面&#xff0c;用于收集、分析和可视化有关目标的信息。Maltego 被广泛用于网络侦查、威胁情报、渗透测试和安全…

Windows、Linux、Mac数据库的安装(mysql、MongoDB、Redis)

数据库的安装 作为数据存储的重要部分&#xff0c;数据库同样是必不可少的&#xff0c;数据库可以分为关系型数据库和非关系型数据库。 关系型数据库如 SQLite、MySQL、Oracle、SQL Server、DB2 等&#xff0c;其数据库是以表的形式存储&#xff1b;非关系型数据库如 MongoDB…

科普类——遥操作中的延时问题(二)

遥操作中的延时问题 遥操作中延时&#xff08;Latency&#xff09;问题是一个关键挑战&#xff0c;因为延时会导致操作员的指令不能及时传递给无人驾驶车辆&#xff0c;从而影响车辆的响应速度和安全性。为了解决或减轻延时问题&#xff0c;可以采取以下措施&#xff1a; 优化通…

我用Rust开发Rocketmq name server

我是蚂蚁背大象(Apache EventMesh PMC&Committer)&#xff0c;文章对你有帮助给Rocketmq-rust star,关注我GitHub:mxsm&#xff0c;文章有不正确的地方请您斧正,创建ISSUE提交PR~谢谢! Emal:mxsmapache.com 1. Rocketmq-rust namesrv概述 经过一个多月的开发&#xff0c;终…