基于Vue的3D饼图_vue 3d立体饼状图

最新推荐文章于 2025-06-13 08:30:00 发布
最新推荐文章于 2025-06-13 08:30:00 发布
阅读量640 收藏
点赞数 2
CC 4.0 BY-SA版权
分类专栏： 程序员 文章标签： vue.js 3d 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/2401_84411557/article/details/138396328

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。

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

<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) {


### 最后

你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『**难的不会，会的不难**』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.youkuaiyun.com/topics/618166371)**

**我特地针对初学者整理一套前端学习资料**

![前端路线图](https://img-blog.csdnimg.cn/img_convert/c013a84da6c496ac78364df2bc84d767.webp?x-oss-process=image/format,png)

产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.youkuaiyun.com/topics/618166371)**

**我特地针对初学者整理一套前端学习资料**

[外链图片转存中...(img-eUATvT5w-1714643798314)]

![vue.js的36个技巧](https://img-blog.csdnimg.cn/img_convert/1b2512427b8e119340423ab7c27ff4cd.webp?x-oss-process=image/format,png)
vue实现3D饼状图
Incandescence__的博客
06-15 1499
vue+highcharts实现3D饼图
vue3之echarts3D环柱饼图
时光清浅处，一步一安然
01-29 1671
【代码】vue3之echarts3D环柱饼图。
vue实现3D饼图（echart三维饼图）
weixin_39921970的博客
10-06 1万+
效果如图： 1、图表依赖：echartjs、echart-gl npm install echarts npm install echarts-gl 2、DOM <!--3D饼图 GO--> <div class="m-warning"> <div class="warning-pie" id="pieChart"></div> </div> 3、JS引入，与处理 ①引入 import echarts from 'ech
【vue echart-gl】实现一个立体的饼状图
最新发布
weixin_41747256的博客
06-13 254
【vue echart-gl】实现一个立体的饼状图
Vue3 Echarts 3D饼图（3D环形图）实现讲解附带源码
pixle的博客
05-12 3439
本文介绍了如何利用 ECharts 和 echarts-gl 插件实现 3D 饼图和 3D 环形图。首先，准备工作包括引入 ECharts 核心库和 echarts-gl 插件，支持通过 CDN 或 npm 安装。3D 饼图的实现原理主要依赖于 echarts-gl 插件，通过自定义曲面图、三维折线图和三维散点图分别绘制饼图主体、指示线和标签。文章详细解析了 echarts-gl 插件的常用配置项，如 grid3D 和 series，并重点介绍了曲面图的参数方程（parametricEquation）
ehcarts示例
Go_South_的博客
03-02 341
【代码】ehcarts示例。
用echarts在vue2中实现3d饼图
蜗牛~~
10-20 1万+
1、修改3d饼图大小，在大概244行的位置，grid3D的对象里面，修改distance属性，即可调整。在3d饼图中设置下面这两属性是没用的，所以这里请注意一下，记得去grid3D里面修改他的位置。4、修改饼图位置，这个常用，也是在grid3D这个属性里面设置，在大概240行的位置。3、修改3d饼图颜色，直接在data中的optionData里面修改就行了。2、修改3d饼图视角高度，在大概161行的位置，修改函数的第二个参数。二、在main.js中引入。直接复制粘贴吧，省事。
vue中实现3d饼图
......
07-17 1581
【代码】vue中实现3d饼图。
3d环形图开发（vue3+vite+ts）
Alone_Endeavor的博客
10-07 1998
【代码】3d环形图开发。
基于Vue的3D饼图，可进行拖动旋转、缩放、自动旋转~
08-22
基于Vue的3D饼图，可进行拖动旋转、缩放、自动旋转~
第一篇：VUE 使用 HighCharts 画 3D环 饼图_vue 3d饼图
2401_85124892的博客
05-28 594
4.书写 3D饼/环 需要的相关数据和相关配置。
在Vue中使用highCharts绘制3d饼图的方法
11-30
highcharts是国外知名基于javascript的图表库。由于中文官网的vue中使用highcharts配置繁琐并且需要引入jquery作为依赖，所以弃用。 接下来，给各位伙伴简要的讲叙下highcharts在vue中的使用和配置方法。 首先使用 npm在你的项目中安装vue-highcharts npm install vue-highcharts --save 由于vue-highcharts依赖于highcharts，我们还需要安装后者 npm install highcharts --save 安装完成后，进入项目main.js进行配置： import highchart
前端 threejs 3D饼图 通过一些配置可以实现3D饼图的生成
06-19
通过threejs实现的3D饼图图表，数据可视化的高度应用场景中2D图表居多，3D相关的数据可视化比较少，不知收费贵而且资源少之又少，在项目中需要使用时对于初步接触的开发的人员很不友好，希望大家通过本案例可以快速...
2024年基于Vue的3D饼图_vue 3d立体饼状图(1)，JavaScript命名标识符规范
2401_84419493的博客
05-07 652
技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）// 计算高亮效果的放大比例（未高亮，则比例为 1）1.05 : 1;// 返回曲面参数方程return {u: {},v: {min: 0,},},},
echarts3d饼图，环形图（包含透明效果）
热门推荐
weixin_41326021的博客
09-09 9万+
先看效果图： 饼图： 环形图： 带透明度的环形图： 安装echarts "echarts":"^5.1.2" "echarts-gl":"^2.0.8" import Vue from 'vue' import * as echarts from 'echarts' import 'echarts-gl' // 3d图表库 Vue.prototype.$echarts = echarts .vue文件 <template> &l...
3d饼图 vue_在Vue中使用highCharts绘制3d饼图
weixin_39980129的博客
12-19 243
highcharts是国外知名基于javascript的图表库。由于中文官网的vue中使用highcharts配置繁琐并且需要引入jquery作为依赖，所以弃用。接下来，给各位伙伴简要的讲叙下highcharts在vue中的使用和配置方法。首先使用 npm在你的项目中安装vue-highchartsnpm install vue-highcharts --save由于vue-highcharts依...
3d饼图在vue里面的使用
qq_34873263的博客
02-26 672
效果图 第一步 在html文件里面引入相关js <script src="http://oemcustom.gsdata.cn/hjdp/static/js/three.min.js"></script> <script src="https://johnson2heng.github.io/three.js-demo/lib/threebsp.js"></script> 第二步 3d饼图组件代码 <!-- --> <templat
vue实现3d饼图-Highcharts
webtext的博客
12-10 1759
vue实现3d饼图-Highcharts
vue加d3js实现3d饼图
weixin_41897680的博客
04-02 1万+
vue加d3js实现3d饼图
vue echarts 立体3d饼状图
02-26
### Vue 中使用 ECharts 实现立体 3D 饼状图 #### DOM 层引入 为了在 Vue 项目中集成并展示 3D 饼状图，需先安装 `echarts` 和 `echarts-gl` 库。通过命令行工具执行如下指令完成依赖包的安装： ```bash npm ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值