Echars3D 饼图开发

关于vue echart3D 饼图开发

首先要先下载  "echarts-gl", 放在main.js

npm install echarts-gl --save

<template><div class="cointan"><!-- 3d环形图 --><div class="chart" id="cityGreenLand-charts"></div></div></template><script>export default {name: 'rightCenter',props: {msg: String},data() {return {optionData: [{name: '已用空间',height: 5,value: 20,pieValue: 0,itemStyle: {color: '#00D7E9',opacity: 0.6}}, {name: '可用空间',height: 10,value: 12,pieValue: 0,itemStyle: {color: '#FFDE03',opacity: 0.8}}],totalNum:0,//年级总获奖人数}},mounted(){this.getJiang()},methods:{//各年级获奖人数getJiang() {this.$nextTick(function() {this.init();});},init() {//构建3d饼状图let myChart = this.$echarts.init(document.getElementById('cityGreenLand-charts'));// 传入数据生成 optionthis.option = this.getPie3D(this.optionData, 0);myChart.setOption(this.option);//是否需要label指引线,如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐,并再次setOption// this.option.series.push({//   name: 'pie2d',//   type: 'pie',//   labelLine:{//     length:0,//     length2:0//   },//   startAngle: -20 , //起始角度,支持范围[0, 360]。//   clockwise: false,//饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式//   radius: ['30%', '60%'],//   center: ['10%', '50%'],//没用//   data: this.optionData,//   itemStyle:{//     opacity:0//   }// });myChart.setOption(this.option);this.bindListen(myChart);},getPie3D(pieData, internalDiameterRatio) {//internalDiameterRatio:透明的空心占比let that = this;let series = [];let sumValue = 0;let startValue = 0;let endValue = 0;let legendData = [];let legendBfb = [];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,value: typeof pieData[i].value === 'undefined' ? `series${i}` : pieData[i].value,pieValue: typeof pieData[i].pieValue === 'undefined' ? `series${i}` : pieData[i].pieValue,height: 10 * (i),type: 'surface',parametric: true,wireframe: {show: false},pieData: pieData[i],pieStatus: {selected: false,hovered: false,k: k},// radius: ['50%', '80%'],// center: ['30%', '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,也就是实现每一个扇形。legendData = [];legendBfb = [];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 = this.getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio,false, false, k, series[i].pieData.value);startValue = endValue;let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4);legendData.push({name: series[i].name,value: bfb,});legendBfb.push({name: series[i].name,value: bfb,value:series[i].value,});}let boxHeight = this.getHeight3D(series, 3);//通过传参设定3d饼/环的高度,26代表26px// 准备待返回的配置项,把准备好的 legendData、series 传入。let option = {//   legend: {//     data: legendData,//     orient: 'scroll',//     right: 10,//     top: 10,//     itemGap: 10,//     textStyle: {//       color: '#A1E2FF',//     },//     icon:'roundRect',//图形样式//     show: true,//     formatter: function(param) {//       let item = legendBfb.filter(item => item.name == param)[0];//       // let bfs = that.fomatFloat(item.value * 100, 2) + "%";//       return `${item.name}  ${item.value}`;//     }//   },labelLine: {show: true,lineStyle: {color: '#7BC0CB'}},tooltip: {formatter: params => {if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {// let bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) *//   100).toFixed(2);let bfb = option.series[params.seriesIndex].pieValuereturn `${params.seriesName}<br/>` +`<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +`${ bfb }G`;}}},xAxis3D: {min: -1,max: 1},yAxis3D: {min: -1,max: 1},zAxis3D: {min: -1,max: 1},grid3D: {show: false,boxHeight: boxHeight, //圆环的高度// innerWidth:'100%',top:'-30%',//3d图位置left:'-10%',//3d图位置height:300,//3d图大小viewControl: { //3d效果可以放大、旋转等,请自己去查看官方配置alpha: 30, //角度distance: 400,//调整视角到主体的距离,类似调整zoomrotateSensitivity: 0, //设置为0无法旋转zoomSensitivity: 0, //设置为0无法缩放panSensitivity: 0, //设置为0无法平移autoRotate: false //自动旋转}},series: series,};return option;},//获取3d丙图的最高扇区的高度getHeight3D(series, height) {series.sort((a, b) => {return (b.pieData.value - a.pieData.value);})return height * 30 / series[0].pieData.value;},// 生成扇形的曲面参数方程,用于 series-surface.parametricEquation// h 高度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 * .1;}return Math.sin(v) > 0 ? 1 * h * .5 : -1;}};},fomatFloat(num, n) {var f = parseFloat(num);if (isNaN(f)) {return false;}f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂   var s = f.toString();var rs = s.indexOf('.');//判定如果是整数,增加小数点再补0if (rs < 0) {rs = s.length;s += '.';}while (s.length <= rs + n) {s += '0';}return s;},bindListen(myChart) {// 监听鼠标事件,实现饼图选中效果(单选),近似实现高亮(放大)效果。let that = this;let selectedIndex = '';let hoveredIndex = '';// 监听点击事件,实现选中效果(单选)myChart.on('click', function(params) {// 从 option.series 中读取重新渲染扇形所需的参数,将是否选中取反。let isSelected = !that.option.series[params.seriesIndex].pieStatus.selected;let isHovered = that.option.series[params.seriesIndex].pieStatus.hovered;let k = that.option.series[params.seriesIndex].pieStatus.k;let startRatio = that.option.series[params.seriesIndex].pieData.startRatio;let endRatio = that.option.series[params.seriesIndex].pieData.endRatio;// 如果之前选中过其他扇形,将其取消选中(对 option 更新)if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {that.option.series[selectedIndex].parametricEquation = that.getParametricEquation(that.option.series[selectedIndex].pieData.startRatio, that.option.series[selectedIndex].pieData.endRatio, false, false, k, that.option.series[selectedIndex].pieData.value);that.option.series[selectedIndex].pieStatus.selected = false;}// 对当前点击的扇形,执行选中/取消选中操作(对 option 更新)that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,isSelected,isHovered, k, that.option.series[params.seriesIndex].pieData.value);that.option.series[params.seriesIndex].pieStatus.selected = isSelected;// 如果本次是选中操作,记录上次选中的扇形对应的系列号 seriesIndexisSelected ? selectedIndex = params.seriesIndex : null;// 使用更新后的 option,渲染图表myChart.setOption(that.option);});// 监听 mouseover,近似实现高亮(放大)效果myChart.on('mouseover', function(params) {// 准备重新渲染扇形所需的参数let isSelected;let isHovered;let startRatio;let endRatio;let k;// 如果触发 mouseover 的扇形当前已高亮,则不做操作if (hoveredIndex === params.seriesIndex) {return;// 否则进行高亮及必要的取消高亮操作} else {// 如果当前有高亮的扇形,取消其高亮状态(对 option 更新)if (hoveredIndex !== '') {// 从 option.series 中读取重新渲染扇形所需的参数,将是否高亮设置为 false。isSelected = that.option.series[hoveredIndex].pieStatus.selected;isHovered = false;startRatio = that.option.series[hoveredIndex].pieData.startRatio;endRatio = that.option.series[hoveredIndex].pieData.endRatio;k = that.option.series[hoveredIndex].pieStatus.k;// 对当前点击的扇形,执行取消高亮操作(对 option 更新)that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,isSelected,isHovered, k, that.option.series[hoveredIndex].pieData.value);that.option.series[hoveredIndex].pieStatus.hovered = isHovered;// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空hoveredIndex = '';}// 如果触发 mouseover 的扇形不是透明圆环,将其高亮(对 option 更新)if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {// 从 option.series 中读取重新渲染扇形所需的参数,将是否高亮设置为 true。isSelected = that.option.series[params.seriesIndex].pieStatus.selected;isHovered = true;startRatio = that.option.series[params.seriesIndex].pieData.startRatio;endRatio = that.option.series[params.seriesIndex].pieData.endRatio;k = that.option.series[params.seriesIndex].pieStatus.k;// 对当前点击的扇形,执行高亮操作(对 option 更新)that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,isSelected, isHovered, k, that.option.series[params.seriesIndex].pieData.value + 5);that.option.series[params.seriesIndex].pieStatus.hovered = isHovered;// 记录上次高亮的扇形对应的系列号 seriesIndexhoveredIndex = params.seriesIndex;}// 使用更新后的 option,渲染图表myChart.setOption(that.option);}});// 修正取消高亮失败的 bugmyChart.on('globalout', function() {// 准备重新渲染扇形所需的参数let isSelected;let isHovered;let startRatio;let endRatio;let k;if (hoveredIndex !== '') {// 从 option.series 中读取重新渲染扇形所需的参数,将是否高亮设置为 true。isSelected = that.option.series[hoveredIndex].pieStatus.selected;isHovered = false;k = that.option.series[hoveredIndex].pieStatus.k;startRatio = that.option.series[hoveredIndex].pieData.startRatio;endRatio = that.option.series[hoveredIndex].pieData.endRatio;// 对当前点击的扇形,执行取消高亮操作(对 option 更新)that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,isSelected,isHovered, k, that.option.series[hoveredIndex].pieData.value);that.option.series[hoveredIndex].pieStatus.hovered = isHovered;// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空hoveredIndex = '';}// 使用更新后的 option,渲染图表myChart.setOption(that.option);});}},}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped lang="scss">.cointan{// width: 450px;// height: 302px;width: 100%;height: 100%;// background-image: url('../assets/index/litterbackground.png');background-size: 100%;}.title1{position: absolute;margin: 9px 0 0 10px;font-size: 20px;font-family : '优设标题黑';color: rgba(255, 255, 255, 1);font-weight: 400;}// 3d环形图.chart{position: absolute;width: 100%;height: 300px;// margin: 90px 0 0 30px;// width: 370px;// height: 400px;}.huannum{position: absolute;margin: 141px 0 0 40px;width: 205px;text-align: center;font-size: 24px;font-weight: 700;line-height: 35.52px;color: rgba(255, 255, 255, 1);}.huantxt{position: absolute;margin: 171px 0 0 120px;font-size: 12px;font-weight: 400;line-height: 17.76px;color: rgba(168, 214, 255, 1);}#cityGreenLand-charts{background: url(@/assets/marsServerMonitor/disk-bg.png) no-repeat;background-size: 37% 50%;background-position: 34% 10px}</style>
传数据和更新组件写法

引入组件

  import charts3DPie from '../components/charts3DPie'

组件绑定ref

<charts3DPie ref="chartPie"> </charts3DPie>

对数据传输、更新数据

  let optionData = that.$refs.chartPie.optionData || []optionData.forEach(item => {if (item.name == '可用空间') {item.value = parseInt(that.serverData.diskUnused)item.pieValue = that.serverData.diskUnused} else {//已用空间item.value = parseInt(that.serverData.diskAlready)item.pieValue = that.serverData.diskAlready}})that.$refs.chartPie.optionData = optionData
效果

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

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

相关文章

03. 【Linux教程】安装虚拟机

前面小节介绍了 Linux 和 GUN 项目&#xff0c;本小节开始学习如何在 Windows 上安装虚拟机&#xff0c;虚拟机安装之后可以在虚拟机中安装 Linux 相关的操作系统&#xff0c;常见的虚拟机软件有 VirtualBox、VMware 等等&#xff0c;本教程使用 VMware 虚拟机软件来演示如何安…

java数据结构与算法刷题-----LeetCode198. 打家劫舍

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 很多人觉得动态规划很难&#xff0c;但它就是固定套路而已。其实动态规划只…

Flink CDC 3.0 详解

一、Flink CDC 概述 Flink CDC 是基于数据库日志 CDC&#xff08;Change Data Capture&#xff09;技术的实时数据集成框架&#xff0c;支持全增量一体化、无锁读取、并行读取、表结构变更自动同步、分布式架构等高级特性。配合Flink 优秀的管道能力和丰富的上下游生态&#x…

开启Android学习之旅-1

最近在学习《第一行代码 Android》&#xff0c;两天看书把所有代码都敲了一遍。由于之前没有接触过 Kotlin&#xff0c;导致了囫囵吞枣&#xff0c;跟着书会敲&#xff0c;离开就忘了。Android 大佬开发的各种框架、控件好像大部分都用了 Kotlin。看他们的源码&#xff0c;理解…

【每日一题】7.LeetCode——合并两个有序链表

&#x1f4da;博客主页&#xff1a;爱敲代码的小杨. ✨专栏&#xff1a;《Java SE语法》|《数据结构与算法》 ❤️感谢大家点赞&#x1f44d;&#x1f3fb;收藏⭐评论✍&#x1f3fb;&#xff0c;您的三连就是我持续更新的动力❤️ &#x1f64f;小杨水平有限&#xff0c;欢…

【issue-YOLO】自定义数据集训练YOLO-v7 Segmentation

1. 拉取代码创建环境 执行nvidia-smi验证cuda环境是否可用&#xff1b;拉取官方代码&#xff1b; clone官方代码仓库 git clone https://github.com/WongKinYiu/yolov7&#xff1b;从main分支切换到u7分支 cd yolov7 && git checkout 44f30af0daccb1a3baecc5d80eae229…

C++——日期类

前言&#xff1a;哈喽小伙伴们&#xff0c;在上一篇文章中我们对C类与对象的前半段知识进行了简单的分享&#xff0c;其中比较重要的莫过于C类的六个默认成员函数。 所以这篇文章&#xff0c;我们通过实现一个完整的日期的操作&#xff0c;来对这些成员函数有一个更加深入的理…

RabbitMQ-高级篇

服务异步通信-高级篇 消息队列在使用过程中&#xff0c;面临着很多实际问题需要思考&#xff1a; 1.消息可靠性 消息从发送&#xff0c;到消费者接收&#xff0c;会经理多个过程&#xff1a; 其中的每一步都可能导致消息丢失&#xff0c;常见的丢失原因包括&#xff1a; 发送…

Android 高德地图切换图层

一、默认样式 Android 地图 SDK 提供了几种预置的地图图层&#xff0c;包括卫星图、白昼地图&#xff08;即最常见的黄白色地图&#xff09;、夜景地图、导航地图、路况图层。 findViewById<TextView>(R.id.normal).setOnClickListener {updateSelectedStatus(TYPE_NORMA…

Glide完全解读

一&#xff0c;概述 glide作为android流行的图片加载框架&#xff0c;笔者认为有必要对此完全解读。glide提供了三级缓存、生命周期Destroy后自动移除缓存、自动适配ImageView&#xff0c;以及提供了各种对图片修饰的操作&#xff0c;如剪裁等。本文通过最简单的使用&#xff…

Vue(二十):ElementUI 扩展实现表格组件的拖拽行

效果 源码 注意&#xff1a; 表格组件必须添加 row-key 属性&#xff0c;用来优化表格的渲染 <template><el-row :gutter"10"><el-col :span"12"><el-card class"card"><el-scrollbar><span>注意: 表格组件…

自动化测试再升级,大模型与软件测试相结合

近年来&#xff0c;软件行业一直在迅速发展&#xff0c;为了保证软件质量和提高效率&#xff0c;软件测试领域也在不断演进。如今&#xff0c;大模型技术的崛起为软件测试带来了前所未有的智能化浪潮。 软件测试一直是确保软件质量的关键环节&#xff0c;但传统的手动测试方法存…

编写交互式 Shell 脚本

在日常的系统管理和自动化任务中&#xff0c;使用 Shell 脚本可以为我们节省大量时间和精力。 文章将以输入 IP 为例&#xff0c;通过几个版本逐步完善一个案例。 原始需求 编写一个交互式的 Shell 脚本&#xff0c;运行时让用户可以输入IP地址&#xff0c;并且脚本会将输入…

国辰智企TMS定制化模块,实现智慧园区的全面管理

智慧园区综合管理系统是一种针对园区业务场景的高度定制化解决方案&#xff0c;通过选择性部署相应的模块&#xff0c;实现对园区各方面业务的全面管理。通常情况下&#xff0c;园区都需要有效地管理资产、确保安全&#xff0c;以及进行访客预约。这一全面性的系统通过各个模块…

windows 谷歌浏览器Chrome 怎么禁止更新

1.首先把任务管理器里的谷歌浏览器程序结束&#xff1a; &#xff08;鼠标在任务栏右击&#xff0c;出现任务管理器&#xff09; 2.windowr&#xff0c;输入services.msc 带有Google Update的服务&#xff0c;选择禁用。 3.windowr&#xff0c;输入taskschd.msc 任务计划程序…

二叉搜索树,力扣

目录 题目地址&#xff1a; 题目&#xff1a; 我们直接看题解吧&#xff1a; 解题分析&#xff1a; 解题思路&#xff1a; 代码实现&#xff1a; 代码补充说明&#xff1a; 代码实现(中序遍历)&#xff1a; 题目地址&#xff1a; 98. 验证二叉搜索树 - 力扣&#xff08;LeetCod…

delete、truncate和drop区别

一、从执行速度上来说 drop > truncate >> DELETE 二、从原理上讲 1、DELETE DELETE from TABLE_NAME where xxx1.1、DELETE属于数据库DML操作语言&#xff0c;只删除数据不删除表的结构&#xff0c;会走事务&#xff0c;执行时会触发trigger&#xff08; 触发器…

8. 字符串转换整数 (atoi)-LeetCode(Java)

8. 字符串转换整数 (atoi) 题目&#xff1a;8. 字符串转换整数 (atoi) 请你来实现一个 myAtoi(string s) 函数&#xff0c;使其能将字符串转换成一个 32 位有符号整数&#xff08;类似 C/C 中的 atoi 函数&#xff09;。 函数 myAtoi(string s) 的算法如下&#xff1a; 读入…

AI大语言模型学习笔记之三:协同深度学习的黑魔法 - GPU与Transformer模型

Transformer模型的崛起标志着人类在自然语言处理&#xff08;NLP&#xff09;和其他序列建模任务中取得了显著的突破性进展&#xff0c;而这一成就离不开GPU&#xff08;图形处理单元&#xff09;在深度学习中的高效率协同计算和处理。 Transformer模型是由Vaswani等人在2017年…

2024美赛预测算法 | 回归预测 | Matlab基于WOA-LSSVM鲸鱼算法优化最小二乘支持向量机的数据多输入单输出回归预测

2024美赛预测算法 | 回归预测 | Matlab基于WOA-LSSVM鲸鱼算法优化最小二乘支持向量机的数据多输入单输出回归预测 目录 2024美赛预测算法 | 回归预测 | Matlab基于WOA-LSSVM鲸鱼算法优化最小二乘支持向量机的数据多输入单输出回归预测预测效果基本介绍程序设计参考资料 预测效果…