Vue3 Echarts 3D饼图（3D环形图）实现讲解附带源码

pixle02025-05-15 2:08

文章目录

前言

在数据可视化场景中，3D 饼图凭借立体效果和空间层次感，能让数据展示更具视觉冲击力。ECharts 作为优秀的数据可视化库，通过 echarts-gl 插件轻松支持 3D 图表渲染。本文将详细阐述如何利用 ECharts实现3D饼图、3D环形图

一、准备工作

1. 所需工具

ECharts 核心库：版本需 ≥5.0（支持新特性）

echarts-gl 插件：专门处理 3D 渲染的扩展库

2. 引入依赖

方式一：CDN 快速引入

javascript 复制代码 
<!-- 引入 ECharts 核心库 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<!-- 引入 echarts-gl 3D 插件 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts-gl.min.js"></script>

方式二：npm 本地安装（推荐）

javascript 复制代码 
npm install echarts echarts-gl --save

二、实现原理解析

3D饼图的实现主要通过echarts-gl 3D插件去实现，分为3部分。首先通过 自定义曲面图 （type: "surface"）绘制3D饼图主体，再者通过三维折线图（ type: "line3D"）绘制指示线，最后通过三维散点图（type: "scatter3D"）绘制标签

三、echarts-gl 3D插件 使用回顾

echarts-gl 3D插件使用跟echarts类似，包括xAxis3D、yAxis3D、zAxis3D、grid3D、series等配置项，可以发现就是在echarts基础上后缀加了3D

grid3D 常用通用属性：

  • viewControl 用于鼠标的旋转，缩放等视角控制，是个对象

    viewControl 的属性：

  • distance ：默认视角距离主体的距离，值越大主体显示越小

  • alpha ：视角绕 x 轴，即上下旋转的角度

  • beta ：视角绕 y 轴，即左右旋转的角度

  • zoomSensitivity 缩放操作的灵敏度，值越大越灵敏，设置0可禁用缩放功能

  • rotateSensitivity 旋转操作的灵敏度，值越大越灵敏 ，设置0可禁用旋转功能

  • panSensitivity 平移操作的灵敏度，值越大越灵敏，设置0可禁用平移功能

  • autoRotate 是否开启视角绕物体的自动旋转查看

series 常用通用属性：

  • type :图表类型，支持surface、bar3D、line3D等值
  • itemStyle ：样式包括颜色和透明度。
  • name:系列名称，用于 tooltip 的显示，legend 的图例筛选
  • data:图表项数据

surface（曲面图）常用专属属性：

series ：

  • wireframe：曲面图的网格线设置
  • equation：曲面的函数表达式。如果需要展示的是函数曲面，可以不设置 data，通过 equation 去声明函数表达式
  • parametric：是否为参数曲面。
  • parametricEquation：曲面的参数方程。在data没被设置的时候，可以通过 parametricEquation 去声明参数参数方程。在 parametric 为true时有效。

其中parametricEquation属性是实现3D饼图关键，通过曲面的参数方程（parametricEquation）可以绘制复杂的 3D 曲面和曲线比如球体、圆柱体等 ，通过它 我们可以自定义绘制3D扇形图，最终由多个3D扇形组合成3D饼图。

参数方程（parametricEquation是个对象）通常使用两个参数（ u 和 v）在特定区间内生成点的坐标 (x, y, z)。

参数方程形式：

javascript 复制代码 
parametricEquation：{
  u: { min: 0, max: 2 * Math.PI, step: 0.1 }, // u 参数范围
  v: { min: 0, max: Math.PI, step: 0.1 },     // v 参数范围
  x: function(u, v) { /* 返回 x 坐标 */ },
  y: function(u, v) { /* 返回 y 坐标 */ },
  z: function(u, v) { /* 返回 z 坐标 */ }
}

（1）参数范围 (u 和 v)：

min 和 max 定义参数的取值范围。

step 控制参数步长，影响曲面的细分精度（值越小，曲面越精细，但性能开销越大）。

（2）坐标方程 (x, y, z)

定义曲面形状的核心部分。例如：

  • 圆柱体：
javascript 复制代码 
x: function(u, v) { return Math.cos(u); },
y: function(u, v) { return Math.sin(u); },
z: function(u, v) { return v; }
  • 环面
javascript 复制代码 
x: function(u, v) {
  return (2 + Math.cos(v)) * Math.cos(u);
},
y: function(u, v) {
  return (2 + Math.cos(v)) * Math.sin(u);
},
z: function(u, v) {
  return Math.sin(v);
}

快速示例：绘制球体

javascript 复制代码 
option = {
  xAxis3D: { type: 'value' },
  yAxis3D: { type: 'value' },
  zAxis3D: { type: 'value' },
  grid3D: {},
  series: [{
    type: 'surface',
    parametric: true, // 启用参数方程模式
    parametricEquation: {
      u: { min: 0, max: 2 * Math.PI, step: 0.1 }, // u 参数范围
      v: { min: 0, max: Math.PI, step: 0.1 },     // v 参数范围
      x: function(u, v) {
        return Math.sin(v) * Math.cos(u); // x 坐标方程
      },
      y: function(u, v) {
        return Math.sin(v) * Math.sin(u); // y 坐标方程
      },
      z: function(u, v) {
        return Math.cos(v); // z 坐标方程
      }
    },
    itemStyle: {
      color: '#2290ff', // 曲面颜色
      opacity: 0.7
    }
  }]
};

更多属性请查看官方文档

四、代码实战

以vue3为代码为示例，实现3D饼图、环形图

4.1 封装一个echarts通用组件

echarts.vue

javascript 复制代码 
<template>
	<div class="echarts-box">
		<div ref="echartRef" class="charts" ></div>
	</div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount, watch, nextTick, markRaw } from 'vue';
import * as echarts from 'echarts';
const props = defineProps({
	// 图表配置
	data: {
		type: Object,
		default: () => {},
	},
});
const echartRef = ref();

let dom = null;

//设置图表配置
const setOptions = (options) => {
	//清除画布
	dom && dom.clear();
	//重新渲染
	dom && dom.setOption(options);
};


watch(
	() => props.data,
	(val) => {
		nextTick(() => {
			//默认关闭动画
			setOptions({animation: false,...val});
		});
	},
	{ deep: true, immediate: true }
);
const emits= defineEmits(['click'])
onMounted(() => {
	//初始化
	dom = markRaw(echarts.init(echartRef.value));
	//点击事件
    dom.on('click',  (param)=> {
		emits('click',param)
	  } )
});
onBeforeUnmount(() => {
	//离开销毁
	echarts.dispose(dom);
	dom = null;
});

defineExpose({
	setOptions,
});
</script>
<style lang="scss" scoped>
.echarts-box {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

.charts {
	width: 100%;
	height: 100%;
}
</style>

上述代码封装了一个echarts通用组件，只需传入data图表配置数据就会重新渲染，需要注意的是组件默认继承父元素的宽高（100%），所以父元素需要设置尺寸。

4.2 实现3D饼图主体

3D饼图主体不包含指示线和标签

demo.vue

javascript 复制代码 
<template>
  <div class="container">
    <div class="echarts-view">
      <Echarts :data="options" />
    </div>
  </div>
</template>
<script setup>
import { ref, computed } from "vue";
import Echarts from "./echarts.vue";

//数据
const data = ref([
  { name: "已完成", value: 25, color: "#D13DF2" },
  { name: "申请中", value: 45, color: "#6442ee" },
  { name: "已撤销", value: 12, color: "#6DCDE6" },
  { name: "审核中", value: 7, color: "#2F54F3" },
  { name: "已驳回", value: 3, color: "#8E56E0" },
]);

// 图表配置
const options = computed(() => {
  //总数
  let total = data.value.reduce((a, b) => a + b.value, 0);
  //当前累加值
  let sumValue = 0;
  //辅助参数,控制饼图半径，（0-1）范围内控制环形大小，值越小环形内半径越大
  let k = 1;

  //series配置（每个扇形）
  let series = data.value.map((item) => {
    //当前扇形起始位置占饼图比例
    let startRatio = sumValue / total;
    //值累加
    sumValue += item.value;
    //当前扇形结束位置占饼图比例
    let endRatio = sumValue / total;

    return {
      name: item.name ?? null,
      type: "surface", //曲面图
      itemStyle: {
        color: item.color ?? null, //颜色
      },

      wireframe: {
        show: false, //不显示网格线
      },
      pieData: item, //数据
      //饼图状态
      pieStatus: {
        k, //辅助参数
        startRatio, //起始位置比例
        endRatio, //结束位置比例
        value: item.value, //数值
      },
      parametric: true, //参数曲面
      //曲面的参数方程
      parametricEquation: getParametricEquation(
        startRatio,
        endRatio,
        k,
        item.value
      ),
    };
  });


  //返回配置
  return {
    //提示框
    tooltip: {
      formatter: (params) => {
        if (
          params.seriesName !== "mouseoutSeries" &&
          params.seriesName !== "pie2d"
        ) {
          return `${
            params.seriesName
          }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
            params.color
          };"></span>${series[params.seriesIndex].pieData.value}`;
        }
        return "";
      },
    },
    xAxis3D: {
      min: -1,
      max: 1,
    },
    yAxis3D: {
      min: -1,
      max: 1,
    },
    zAxis3D: {
      min: -1,
      max: 1,
    },
    //
    grid3D: {
      show: false, //不显示坐标系
      boxHeight: 15, //饼图高度
      // 用于鼠标的旋转，缩放等视角控制
      viewControl: {
        alpha: 30, //视角
        distance: 300, //距离，值越大饼图越小
        rotateSensitivity: 0, //禁止旋转
        zoomSensitivity: 0, //禁止缩放
        panSensitivity: 0, //禁止平移
        autoRotate: false, //禁止自动旋转
      },
    },
    series,
  };
});

/**
 * 获取面的参数方程
 * @param {*} startRatio 扇形起始位置比例
 * @param {*} endRatio 扇形结束位置比例
 * @param {*} k 辅助参数,控制饼图半径
 * @param {*} value 数值
 */
const getParametricEquation = (startRatio, endRatio, k, value) => {
  const startRadian = startRatio * Math.PI * 2;
  const endRadian = endRatio * Math.PI * 2;

  k = typeof k === "number" && !isNaN(k) ? k : 1 / 3; //默认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(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(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(u, v) {
      if (u < -Math.PI * 0.5) {
        return Math.sin(u);
      }
      if (u > Math.PI * 2.5) {
        return Math.sin(u) * value * 0.1;
      }
      // 扇形高度根据value值计算
      return Math.sin(v) > 0 ? value * 0.1 : -1;
    },
  };
};


</script>
<style scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #203598;
  align-items: center;
}
.echarts-view {
  height: 700px;
  width: 1200px;
}
</style>

运行效果：

4.2 添加指示线和标签

javascript 复制代码 
....
....
....
// 图表配置
const options = computed(() => {
   
   //总数
  let total = data.value.reduce((a, b) => a + b.value, 0);
  //当前累加值
  let sumValue = 0;
  //辅助参数,控制饼图半径，（0-1）范围内控制环形大小，值越小环形内半径越大
  let k = 1;

//series配置（每个扇形）
let series =....
    ....
    .....

/新增/

//添加指示线
  series.forEach((item, index) => {
    let {
      itemStyle: { color },
      pieStatus: { startRatio, endRatio, value },
    } = item;

    addLabelLine(series, startRatio, endRatio, value, k, index, color);
  });
///



  return {
  ....
  ....
  ....
  }
})


///新增//
//添加label指示线
/**
 * @param {*} series 配置
 * @param {*} startRatio 扇形起始位置比例
 * @param {*} endRatio 扇形结束位置比例
 * @param {*} value 数值
 * @param {*} k 辅助参数，饼图半径相关
 * @param {*} i  在series中索引
 * @param {*} color 指示线颜色
 */
const addLabelLine = (
  series,
  startRatio,
  endRatio,
  value,
  k,
  i,
  color = "#fff"
) => {
  //计算扇形中心弧度
  const midRadian = (startRatio + endRatio) * Math.PI;

  // 计算起点位置坐标（扇形边缘中心）
  const radius = 1 + k; // 外径
  const posX = Math.cos(midRadian) * radius; //x坐标
  const posY = Math.sin(midRadian) * radius; //y坐标
  const posZ = 0.1 * value; //z坐标

  let flag =
    (midRadian >= 0 && midRadian <= Math.PI / 2) ||
    (midRadian >= (3 * Math.PI) / 2 && midRadian <= Math.PI * 2)
      ? 1
      : -1;

  //计算拐点坐标
  let turningPosArr = [
    posX * 1.1 + i * 0.1 * flag + (flag < 0 ? -0.2 : 0),
    posY * 1.1 + i * 0.1 * flag + (flag < 0 ? -0.2 : 0),
    posZ,
  ];
  //计算结束位置坐标
  let endPosArr = [
    posX * 1.2 + i * 0.1 * flag + (flag < 0 ? -0.2 : 0),
    posY * 1.2 + i * 0.1 * flag + (flag < 0 ? -0.2 : 0),
    posZ * 3,
  ];

  //添加label+指示线
  series.push(
    //  指示线
    {
      type: "line3D",
      lineStyle: {
        color: "#fff",//线颜色
        width:2,//线宽
      },
      data: [[posX, posY, posZ], turningPosArr, endPosArr],
    },
    //label
    {
      type: "scatter3D",
      label: {
        show: true,
        distance: 0,
        position: "center",
        textStyle: {
          color: "#fff",//文字颜色
          backgroundColor: "rgba(0,0,0,0)", //透明背景
          fontSize: 18,//文字尺寸
          fontWeight :'bold', //文字加粗
          padding: 5,
        },
        formatter: "{b}",
      },
      symbolSize: 0,
      data: [
        {
          name: series[i].name + "：" + value+'个',
          value: endPosArr,
        },
      ],
    }
  );
};
//

运行效果：

完整代码：

demo.vue

javascript 复制代码 
<template>
  <div class="container">
    <div class="echarts-view">
      <Echarts :data="options" />
    </div>
  </div>
</template>
<script setup>
import { ref, computed } from "vue";
import Echarts from "./echarts.vue";

//数据
const data = ref([
  { name: "已完成", value: 25, color: "#D13DF2" },
  { name: "申请中", value: 45, color: "#6442ee" },
  { name: "已撤销", value: 12, color: "#6DCDE6" },
  { name: "审核中", value: 7, color: "#2F54F3" },
  { name: "已驳回", value: 3, color: "#8E56E0" },
]);

// 图表配置
const options = computed(() => {
  //总数
  let total = data.value.reduce((a, b) => a + b.value, 0);
  //当前累加值
  let sumValue = 0;
  //辅助参数,控制饼图半径，（0-1）范围内控制环形大小，值越小环形内半径越大
  let k = 1;

  //series配置（每个扇形）
  let series = data.value.map((item) => {
    //当前扇形起始位置占饼图比例
    let startRatio = sumValue / total;
    //值累加
    sumValue += item.value;
    //当前扇形结束位置占饼图比例
    let endRatio = sumValue / total;

    return {
      name: item.name ?? null,
      type: "surface", //曲面图
      itemStyle: {
        color: item.color ?? null, //颜色
      },

      wireframe: {
        show: false, //不显示网格线
      },
      pieData: item, //数据
      //饼图状态
      pieStatus: {
        k, //辅助参数
        startRatio, //起始位置比例
        endRatio, //结束位置比例
        value: item.value, //数值
      },
      parametric: true, //参数曲面
      //曲面的参数方程
      parametricEquation: getParametricEquation(
        startRatio,
        endRatio,
        k,
        item.value
      ),
    };
  });

  //添加指示线
  series.forEach((item, index) => {
    let {
      itemStyle: { color },
      pieStatus: { startRatio, endRatio, value },
    } = item;

    addLabelLine(series, startRatio, endRatio, value, k, index, color);
  });

  //返回配置
  return {
    //提示框
    tooltip: {
      formatter: (params) => {
        if (
          params.seriesName !== "mouseoutSeries" &&
          params.seriesName !== "pie2d"
        ) {
          return `${
            params.seriesName
          }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
            params.color
          };"></span>${series[params.seriesIndex].pieData.value}`;
        }
        return "";
      },
    },
    xAxis3D: {
      min: -1,
      max: 1,
    },
    yAxis3D: {
      min: -1,
      max: 1,
    },
    zAxis3D: {
      min: -1,
      max: 1,
    },
    //
    grid3D: {
      show: false, //不显示坐标系
      boxHeight: 15, //饼图高度
      // 用于鼠标的旋转，缩放等视角控制
      viewControl: {
        alpha: 30, //视角
        distance: 300, //距离，值越大饼图越小
        rotateSensitivity: 0, //禁止旋转
        zoomSensitivity: 0, //禁止缩放
        panSensitivity: 0, //禁止平移
        autoRotate: false, //禁止自动旋转
      },
    },
    series,
  };
});

/**
 * 获取面的参数方程
 * @param {*} startRatio 扇形起始位置比例
 * @param {*} endRatio 扇形结束位置比例
 * @param {*} k 辅助参数,控制饼图半径
 * @param {*} value 数值
 */
const getParametricEquation = (startRatio, endRatio, k, value) => {
  const startRadian = startRatio * Math.PI * 2;
  const endRadian = endRatio * Math.PI * 2;

  k = typeof k === "number" && !isNaN(k) ? k : 1 / 3; //默认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(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(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(u, v) {
      if (u < -Math.PI * 0.5) {
        return Math.sin(u);
      }
      if (u > Math.PI * 2.5) {
        return Math.sin(u) * value * 0.1;
      }
      // 扇形高度根据value值计算
      return Math.sin(v) > 0 ? value * 0.1 : -1;
    },
  };
};

//添加label指示线
/**
 * @param {*} series 配置
 * @param {*} startRatio 扇形起始位置比例
 * @param {*} endRatio 扇形结束位置比例
 * @param {*} value 数值
 * @param {*} k 辅助参数，饼图半径相关
 * @param {*} i  在series中索引
 * @param {*} color 指示线颜色
 */
const addLabelLine = (
  series,
  startRatio,
  endRatio,
  value,
  k,
  i,
  color = "#fff"
) => {
  //计算扇形中心弧度
  const midRadian = (startRatio + endRatio) * Math.PI;

  // 计算起点位置坐标（扇形边缘中心）
  const radius = 1 + k; // 外径
  const posX = Math.cos(midRadian) * radius; //x坐标
  const posY = Math.sin(midRadian) * radius; //y坐标
  const posZ = 0.1 * value; //z坐标

  let flag =
    (midRadian >= 0 && midRadian <= Math.PI / 2) ||
    (midRadian >= (3 * Math.PI) / 2 && midRadian <= Math.PI * 2)
      ? 1
      : -1;

  //计算拐点坐标
  let turningPosArr = [
    posX * 1.1 + i * 0.1 * flag + (flag < 0 ? -0.2 : 0),
    posY * 1.1 + i * 0.1 * flag + (flag < 0 ? -0.2 : 0),
    posZ,
  ];
  //计算结束位置坐标
  let endPosArr = [
    posX * 1.2 + i * 0.1 * flag + (flag < 0 ? -0.2 : 0),
    posY * 1.2 + i * 0.1 * flag + (flag < 0 ? -0.2 : 0),
    posZ * 3,
  ];

  //添加label+指示线
  series.push(
    //  指示线
    {
      type: "line3D",
      lineStyle: {
        color: "#fff",//线颜色
        width:2,//线宽
      },
      data: [[posX, posY, posZ], turningPosArr, endPosArr],
    },
    //label
    {
      type: "scatter3D",
      label: {
        show: true,
        distance: 0,
        position: "center",
        textStyle: {
          color: "#fff",//文字颜色
          backgroundColor: "rgba(0,0,0,0)", //透明背景
          fontSize: 18,//文字尺寸
          fontWeight :'bold', //文字加粗
          padding: 5,
        },
        formatter: "{b}",
      },
      symbolSize: 0,
      data: [
        {
          name: series[i].name + "：" + value+'个',
          value: endPosArr,
        },
      ],
    }
  );
};
</script>
<style scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #203598;
  align-items: center;
}
.echarts-view {
  height: 700px;
  width: 1200px;
}
</style>

控制参数说明：

代码中几个比较重要的控制参数需要注意，根据实际需求修改：

  • k（第28行）：辅助参数，用来控制饼图大小，一般设置（0-1）范围，当值为小于1时会出现环形，值越小环形内半径越大
  • boxHeight（第113行）：饼图高度主要控制参数（不是唯一影响参数，高度视觉效果还受到距离影响）
  • viewControl （第115行）：用于鼠标的旋转，缩放等视角控制，其中 alpha控制3D视角角度，distance控制眼睛与3D饼图距离，值越大饼图越显小。rotateSensitivity开启鼠标旋转功能，zoomSensitivity开启鼠标缩放功能。

通过调整参数实现3D环形图：

javascript 复制代码 
k=0.2 //半径相关
boxHeight:8 //高度
distance: 180, //距离
rotateSensitivity: 1, //开启鼠标控制旋转
autoRotate: true, //开启自动旋转

运行效果：

3D环形图完整代码：

demo.vue

javascript 复制代码 
<template>
  <div class="container">
    <div class="echarts-view">
      <Echarts :data="options" />
    </div>
  </div>
</template>
<script setup>
import { ref, computed } from "vue";
import Echarts from "./echarts.vue";

//数据
const data = ref([
  { name: "已完成", value: 25, color: "#D13DF2" },
  { name: "申请中", value: 45, color: "#6442ee" },
  { name: "已撤销", value: 12, color: "#6DCDE6" },
  { name: "审核中", value: 7, color: "#2F54F3" },
  { name: "已驳回", value: 3, color: "#8E56E0" },
]);

// 图表配置
const options = computed(() => {
  //总数
  let total = data.value.reduce((a, b) => a + b.value, 0);
  //当前累加值
  let sumValue = 0;
  //辅助参数,控制饼图半径，（0-1）范围内控制环形大小，值越小环形内半径越大
  let k = 0.2;

  //series配置（每个扇形）
  let series = data.value.map((item) => {
    //当前扇形起始位置占饼图比例
    let startRatio = sumValue / total;
    //值累加
    sumValue += item.value;
    //当前扇形结束位置占饼图比例
    let endRatio = sumValue / total;

    return {
      name: item.name ?? null,
      type: "surface", //曲面图
      itemStyle: {
        color: item.color ?? null, //颜色
      },

      wireframe: {
        show: false, //不显示网格线
      },
      pieData: item, //数据
      //饼图状态
      pieStatus: {
        k, //辅助参数
        startRatio, //起始位置比例
        endRatio, //结束位置比例
        value: item.value, //数值
      },
      parametric: true, //参数曲面
      //曲面的参数方程
      parametricEquation: getParametricEquation(
        startRatio,
        endRatio,
        k,
        item.value
      ),
    };
  });

  //添加指示线
  series.forEach((item, index) => {
    let {
      itemStyle: { color },
      pieStatus: { startRatio, endRatio, value },
    } = item;

    addLabelLine(series, startRatio, endRatio, value, k, index, color);
  });

  //返回配置
  return {
    //提示框
    tooltip: {
      formatter: (params) => {
        if (
          params.seriesName !== "mouseoutSeries" &&
          params.seriesName !== "pie2d"
        ) {
          return `${
            params.seriesName
          }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
            params.color
          };"></span>${series[params.seriesIndex].pieData.value}`;
        }
        return "";
      },
    },
    xAxis3D: {
      min: -1,
      max: 1,
    },
    yAxis3D: {
      min: -1,
      max: 1,
    },
    zAxis3D: {
      min: -1,
      max: 1,
    },
    //
    grid3D: {
      show: false, //不显示坐标系
      boxHeight: 8, //饼图高度
      // 用于鼠标的旋转，缩放等视角控制
      viewControl: {
        alpha: 30, //视角
        distance: 180, //距离，值越大饼图越小
        rotateSensitivity: 1, //禁止旋转
        zoomSensitivity: 0, //禁止缩放
        panSensitivity: 0, //禁止平移
        autoRotate: true, //禁止自动旋转
      },
    },
    series,
  };
});

/**
 * 获取面的参数方程
 * @param {*} startRatio 扇形起始位置比例
 * @param {*} endRatio 扇形结束位置比例
 * @param {*} k 辅助参数,控制饼图半径
 * @param {*} value 数值
 */
const getParametricEquation = (startRatio, endRatio, k, value) => {
  const startRadian = startRatio * Math.PI * 2;
  const endRadian = endRatio * Math.PI * 2;

  k = typeof k === "number" && !isNaN(k) ? k : 1 / 3; //默认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(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(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(u, v) {
      if (u < -Math.PI * 0.5) {
        return Math.sin(u);
      }
      if (u > Math.PI * 2.5) {
        return Math.sin(u) * value * 0.1;
      }
      // 扇形高度根据value值计算
      return Math.sin(v) > 0 ? value * 0.1 : -1;
    },
  };
};

//添加label指示线
/**
 * @param {*} series 配置
 * @param {*} startRatio 扇形起始位置比例
 * @param {*} endRatio 扇形结束位置比例
 * @param {*} value 数值
 * @param {*} k 辅助参数，饼图半径相关
 * @param {*} i  在series中索引
 * @param {*} color 指示线颜色
 */
const addLabelLine = (
  series,
  startRatio,
  endRatio,
  value,
  k,
  i,
  color = "#fff"
) => {
  //计算扇形中心弧度
  const midRadian = (startRatio + endRatio) * Math.PI;

  // 计算起点位置坐标（扇形边缘中心）
  const radius = 1 + k; // 外径
  const posX = Math.cos(midRadian) * radius; //x坐标
  const posY = Math.sin(midRadian) * radius; //y坐标
  const posZ = 0.1 * value; //z坐标

  let flag =
    (midRadian >= 0 && midRadian <= Math.PI / 2) ||
    (midRadian >= (3 * Math.PI) / 2 && midRadian <= Math.PI * 2)
      ? 1
      : -1;

  //计算拐点坐标
  let turningPosArr = [
    posX * 1.1 + i * 0.1 * flag + (flag < 0 ? -0.2 : 0),
    posY * 1.1 + i * 0.1 * flag + (flag < 0 ? -0.2 : 0),
    posZ,
  ];
  //计算结束位置坐标
  let endPosArr = [
    posX * 1.2 + i * 0.1 * flag + (flag < 0 ? -0.2 : 0),
    posY * 1.2 + i * 0.1 * flag + (flag < 0 ? -0.2 : 0),
    posZ * 3,
  ];

  //添加label+指示线
  series.push(
    //  指示线
    {
      type: "line3D",
      lineStyle: {
        color: "#fff",//线颜色
        width:2,//线宽
      },
      data: [[posX, posY, posZ], turningPosArr, endPosArr],
    },
    //label
    {
      type: "scatter3D",
      label: {
        show: true,
        distance: 0,
        position: "center",
        textStyle: {
          color: "#fff",//文字颜色
          backgroundColor: "rgba(0,0,0,0)", //透明背景
          fontSize: 18,//文字尺寸
          fontWeight :'bold', //文字加粗
          padding: 5,
        },
        formatter: "{b}",
      },
      symbolSize: 0,
      data: [
        {
          name: series[i].name + "：" + value+'个',
          value: endPosArr,
        },
      ],
    }
  );
};
</script>
<style scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #203598;
  align-items: center;
}
.echarts-view {
  height: 700px;
  width: 1200px;
}
</style>

总结

通过echarts-gl 3D插件灵活应用我们成功实现了 基础版3D 饼图、3D环形图。你可以根据实际需求，进一步调整图表的样式和参数，创造出更加美观、实用、符合实际需求的可视化效果。

相关推荐
像素工坊可视化44 分钟前
WebGL 开发的前沿探索：开启 3D 网页的新时代
3d·webgl
apcipot_rain3 小时前
【应用密码学】实验五 公钥密码2——ECC
前端·数据库·python
ShallowLin3 小时前
vue3学习——组合式 API：生命周期钩子
前端·javascript·vue.js
Nejosi_念旧3 小时前
Vue API 、element-plus自动导入插件
前端·javascript·vue.js
互联网搬砖老肖3 小时前
Web 架构之攻击应急方案
前端·架构
麻芝汤圆4 小时前
MapReduce 入门实战：WordCount 程序
大数据·前端·javascript·ajax·spark·mapreduce
juruiyuan1116 小时前
FFmpeg3.4 libavcodec协议框架增加新的decode协议
前端
Peter 谭6 小时前
React Hooks 实现原理深度解析：从基础到源码级理解
前端·javascript·react.js·前端框架·ecmascript
LuckyLay8 小时前
React百日学习计划——Deepseek版
前端·学习·react.js
热门推荐
01YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03KGG转MP3工具|非KGM文件|解密音频04DeepSeek各版本说明与优缺点分析05【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！06Coze扣子平台完整体验和实践（附国内和国际版对比）07VMware虚拟机安装Win7专业版保姆级教程（附镜像包）08YOLOv5改进 | 添加CA注意力机制 + 增加预测层 + 更换损失函数之GIoU09苍穹外卖面试总结10PyCharm 无法识别 Conda 环境的解决方案