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.rhkb.cn/news/249776.html

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

相关文章

【2024美国大学生数学建模竞赛】2024美赛C题网球运动中的势头,网球教练4.0没人比我更懂这个题了!!!

【2023美国大学生数学建模竞赛】2024美赛C题 问题分析、数学模型、实现代码、完整论文 引言 本人是计算机博士&#xff0c;拥有10年网球球龄&#xff0c;2023年的温网决赛&#xff0c;熬夜到半夜全称观看完了直播&#xff0c;对于网球规则、比赛的数据非常熟悉&#xff0c;这个…

【数据结构】 归并排序详解

1.基本思想 归并排序&#xff08;MERGE-SORT&#xff09;是建立在归并操作上的一种有效的排序算法,该算法是采用分治法&#xff08;Divide andConquer&#xff09;的一个非常典型的应用。 将已有序的子序列合并&#xff0c;得到完全有序的序列&#xff0c;即先使每个子序列有序…

Linux内核源码

记得看目录哦&#xff01; 1. 为什么要阅读Linux内核2. Linux0.01内核源码3. 阅读linux内核源码技巧4. linux升级内核5. linux的备份和恢复5.1 安装dump和restore5.2 使用dump完成备份5.3 使用restore完成恢复 1. 为什么要阅读Linux内核 2. Linux0.01内核源码 3. 阅读linux内核…

MTTR、MTBF、MTTF的大白话理解

目录 前言1. 基本知识2. 扩展 前言 理解这方面的知识对系统架构会有宏观的认识&#xff0c;也方便日后的开发 对于这方面的知识也推荐阅读&#xff1a;MTTR、MTBF、MTTF、可用性、可靠性傻傻分不清楚&#xff1f; 1. 基本知识 系统可靠性和可用性相关的指标: MTTR&#xf…

STM32存储左右互搏 QSPI总线读写FLASH W25QXX

STM32存储左右互搏 QSPI总线读写FLASH W25QXX FLASH是常用的一种非易失存储单元&#xff0c;W25QXX系列Flash有不同容量的型号&#xff0c;如W25Q64的容量为64Mbit&#xff0c;也就是8MByte。这里介绍STM32CUBEIDE开发平台HAL库Qual SPI总线操作W25Q各型号FLASH的例程。 W25Q…

python给word插入脚注

1.需求 最近因为工作需要&#xff0c;需要给大量文本的脚注插入内容&#xff0c;我就写了个小程序。 2.实现 下面程序是我已经给所有脚注插入了两次文本“幸福”&#xff0c;给脚注2到4再插入文本“幸福” from win32com import clientdef add_text_to_specific_footnotes(…

外包干了8个月,技术退步明显...

先说一下自己的情况&#xff0c;大专生&#xff0c;18年通过校招进入武汉某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落! 而我已经在一个企业干了四年的功能测…

前端小案例——导航回顶部(HTML+CSS+JS, 附源码)

一、前言 实现功能&#xff1a; 这个案例实现了页面滚动到一定位置时显示"回到顶部"按钮&#xff0c;并且点击按钮能够平滑滚动回页面顶部的功能。 实现逻辑&#xff1a; 页面结构&#xff1a;通过HTML标签定义了页面的基本结构。页面主要由多个div.content组成&am…

【居然比GPT还好用】KnowLM:知识图谱 + 大模型,实现更有效的信息抽取和知识管理

KnowLM 知识图谱 大模型&#xff1a;实现信息抽取 KnowLM 原理KnowLM 部署KnowLM 应用1. 命名实体识别&#xff08;NER&#xff09;2. 关系抽取&#xff08;RE&#xff09;3. 事件抽取&#xff08;EE&#xff09; KnowLM 原理 代码&#xff1a;https://github.com/zjunlp/Kno…

如何使用内网穿透工具在公网实现实时监测DashDot服务器仪表盘

文章目录 1. 本地环境检查1.1 安装docker1.2 下载Dashdot镜像 2. 部署DashDot应用3. 本地访问DashDot服务4. 安装cpolar内网穿透5. 固定DashDot公网地址 本篇文章我们将使用Docker在本地部署DashDot服务器仪表盘&#xff0c;并且结合cpolar内网穿透工具可以实现公网实时监测服务…

2024年美国大学生数学建模F题思路分析 - 减少非法野生动物贸易

# 1 赛题 问题F&#xff1a;减少非法野生动物贸易 非法的野生动物贸易会对我们的环境产生负面影响&#xff0c;并威胁到全球的生物多样性。据估计&#xff0c;它每年涉及高达265亿美元&#xff0c;被认为是全球第四大非法交易。[1]你将开发一个由数据驱动的5年项目&#xff0c…

CCSIP中国网络安全行业全景册(第六版)发布 飞驰云联入选7大领域

2024年1月24日&#xff0c; FreeBuf咨询正式发布《CCSIP 2023中国网络安全行业全景册&#xff08;第六版&#xff09;》。Ftrans飞驰云联的产品凭借优秀的市场表现&#xff0c;强势入选网络隔离/网闸、工业网络隔离系统/网闸、数据安全管控&#xff08;平台型&#xff09;、数据…

[Tcpdump] 网络抓包工具使用教程

往期回顾 海思 tcpdump 移植开发详解海思 tcpdump 移植开发详解 前言 上一节&#xff0c;我们已经讲解了在海思平台如何基于静态库生成 tcpdump 工具&#xff0c;本节将作为上一节的拓展内容。 一、tcpdump 简介 「 tcpdump 」是一款强大的网络抓包工具&#xff0c;它基于…

deque容器的相关概念及常用接口

deque的基本概念 作用&#xff1a;作为双端数组&#xff0c;可以很方便的对头尾进行插入和删除操作 注意&#xff1a;适用deque时需包含头文件deque deque与vector的区别 1、vector对数组头部的插入和删除操作效率低&#xff0c;时间复杂度高。数据量越大&#xff0c;效率越…

Python学习03 -- 函数相关内容

1.def --- 这个是定义函数的关键字 \n --- 这个在print()函数中是换行符号 1.注意是x, 加个空格之后再y 1.形式参数数量是不受限制的&#xff08;参数间用&#xff0c;隔开&#xff09;&#xff0c;传实参给形参的时候要一一对应 返回值 --- 函数返还的结果捏 1.写None的时…

2023年09月CCF-GESP编程能力等级认证Python编程五级真题解析

Python等级认证GESP(1~6级)全部真题・点这里 一、单选题(共15题,共30分) 第1题 近年来,线上授课变得普遍,很多有助于改善教学效果的设备也逐渐流行,其中包括比较常用的手写板,那么它属于哪类设备?( ) A:输入 B:输出 C:控制 D:记录 答案:A 第2题 以下关于…

学习Android的第一天

目录 什么是 Android&#xff1f; Android 官网 Android 应用程序 Android 开发环境搭建 Android 平台架构 Android 应用程序组件 附件组件 Android 第一个程序 HelloWorld 什么是 Android&#xff1f; Android&#xff08;发音为[ˈnˌdrɔɪd]&#xff0c;非官方中文…

【selenium方式】获取微博指定用户指定日期内所有帖子详细数据

这篇文章主要放源代码&#xff0c;思路不会介绍特别清楚&#xff0c;详细思路可以看评论区的b站讲解视频。 1.场景需求 获取微博肖战超话内容部分用户的帖子数据&#xff0c;日期范围限定在近2个月&#xff0c;要求获得帖子的发布时间、帖子文本内容、转发数据、评论数据和点…

【Go 快速入门】包及依赖管理 | Go 第三方包发布 | 接口 | 反射

文章目录 包和依赖管理依赖管理go modgo get go.mod 文件go.sum 文件Go Modules 发布包 接口空接口接口值类型断言 反射reflect.TypeOfreflect.ValueOf结构体反射 项目代码地址&#xff1a;04-PackageInterfaceReflection 包和依赖管理 Go 使用包来支持代码模块化和代码复用&…

市场复盘总结 20240201

仅用于记录当天的市场情况&#xff0c;用于统计交易策略的适用情况&#xff0c;以便程序回测 短线核心&#xff1a;不参与任何级别的调整&#xff0c;采用龙空龙模式 一支股票 10%的时候可以操作&#xff0c; 90%的时间适合空仓等待 昨日主题投资 连板进级率 6/27 22.2% 二进…