分享个轮播的3D饼图，分别用Echarts和HighCharts实现

最新推荐文章于 2026-06-15 20:55:56 发布

原创

最新推荐文章于 2026-06-15 20:55:56 发布 · 2.9k 阅读

标签

#echarts #3d #前端 #react #javascript

本文介绍了使用Echarts和HighCharts实现3D饼图轮播及高亮效果的方法。Echarts通过曲面参数方程创建3D饼图，并通过定时器动态改变高亮部分。HighCharts则利用内置3D属性和自定义渲染路径实现类似效果，同时解决了3D饼图渲染下沉的bug。文章还分享了开发过程中的问题和解决方案。

轮播的3D饼图，效果如下

Echarts效果图

在这里插入图片描述

有这方面需求的朋友肯定有在Echarts社区上找过相关3D饼图的方案。
大同小异，所有3D饼图的实现方式，基本上使用了surface曲面的原理，我也是在这个基础上进行的二开。
他的核心代码是使用surface的parametricEquation属性，为每一项数据生成了一个扇形的曲面参数方程，然后生成了不同的曲面，这里的方程完全看不懂，没关系，直接拿来用就行了。

function getParametricEquation(
    startRatio: any,
    endRatio: any,
    isSelected: any,
    isHovered: any,
    k: any,
    h: any
  ) {
   
   
    // 计算
    const midRatio = (startRatio + endRatio) / 2;

    const startRadian = startRatio * Math.PI * 2;
    const endRadian = endRatio * Math.PI * 2;
    const midRadian = midRatio * Math.PI * 2;

    // 如果只有一个扇形，则不实现选中效果。
    if (startRatio === 0 && endRatio === 1) {
   
   
      // eslint-disable-next-line no-param-reassign
      isSelected = false;
    }

    // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
    // eslint-disable-next-line no-param-reassign
    k = typeof k !== "undefined" ? k : 1 / 3;

    // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
    const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
    const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;

    // 计算高亮效果的放大比例（未高亮，则比例为 1）
    // const 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(u: any, v: any) {
   
   
        if (u < startRadian) {
   
   
          return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k);
        }
        if (u > endRadian) {
   
   
          return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k);
        }
        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k);
      },

      y(u: any, v: any) {
   
   
        if (u < startRadian) {
   
   
          return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k);
        }
        if (u > endRadian) {
   
   
          return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k);
        }
        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k);
      },

      z(u: any, v: any) {
   
   
        if (u < -Math.PI * 0.5) {
   
   
          return Math.sin(u);
        }
        if (u > Math.PI * 2.5) {
   
   
          return Math.sin(u) * h * 0.1;
        }
        // 当前图形的高度是Z根据h（每个value的值决定的）
        return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
      },
    };
  }

强调一下：我的需求是个轮播，只需要当前这部分“高”起来，其他的部分统一高度即可。因此我的getParametricEquation函数的第六个参数h完全可以写死。需要展示不同高度的朋友这里的k就要根据实际情况传了。

接着来说一下轮播的原理

定义一个currentIndex变量，用来存放当前“高”的是哪个

let curIndex = 0;

获取到Echarts图表的实例，用ref存起来，后期轮播需要setOptions。我这里是React，如果是原生就更好获取了。

const eChartsDom = useRef<any>();
<EChartsReact
   option={
   
   option}
   style={
   
   {
   
    width: "700px", height: "500px"}}
   ref={
   
   (e) => {
   
   eChartsDom.current = e;pipeAnimation()}} // 示例获取完就可以执行动画了
 />

定时器循环currentIndex并setOptions

  // 示例获取完执行
  const pipeAnimation = async () => {
   
   
    let timer = setInterval(() => {
   
   
      curIndex = curIndex +1
      if(curIndex === 5) curIndex = 0
      highLight({
   
   
        seriesIndex: curIndex,
        seriesName: data[curIndex].name
      })
    }, 2000);
  };

  // 把需要高的那一项的高度h调高，然后setOption
  const highLight = (params: any)=>{
   
   
    let myChart = eChartsDom.current.getEchartsInstance();
    let isSelected;
    let isHovered;
    let startRatio;
    let endRatio;
    let k;
    // 如果触发 mouseover 的扇形当前已高亮，则不做操作
    if (hoveredIndex === params.seriesIndex) {
   
   
      return;
      // 否则进行高亮及必要的取消高亮操作
    } else {
   
   
      // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
      if (hoveredIndex !== "") {
   
   
        // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
        isSelected = option.series[hoveredIndex].pieStatus.selected;
        isHovered = false;
        startRatio = option.series[hoveredIndex].pieData.startRatio;
        endRatio = option.series[hoveredIndex].pieData.endRatio;
        k = option.series[hoveredIndex].pieStatus.k;
        // 取消之前高的
        option.series[hoveredIndex].parametricEquation =
          getParametricEquation(
            startRatio,
            endRatio,
            isSelected,
            isHovered,
            k,
            30
          );
        option.series[hoveredIndex].pieStatus.hovered = isHovered;
        // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
        hoveredIndex = "";
      }
      // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
      if (params.seriesName !== "mouseoutSeries") {
   
   
        // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
        isSelected = option.series[params.seriesIndex].pieStatus.selected;
        // isHovered = true;
        startRatio = option.series[params.seriesIndex].pieData.startRatio;
        endRatio = option.series[params.seriesIndex].pieData.endRatio;
        k = option.series[params.seriesIndex].pieStatus.k;
        // 在这里的一项调高了
        option.series[params.seriesIndex].parametricEquation =
          getParametricEquation(
            startRatio,
            endRatio,
            isSelected,
            isHovered,
            k,
            80
          );
        option.series[params.seriesIndex].pieStatus.hovered = isHovered;
        // 记录上次高亮的扇形对应的系列号 seriesIndex
        hoveredIndex = params.seriesIndex;
      }
      // 使用更新后的 option，渲染图表
      myChart.setOption(option);
    }
  }

PS：参考的Demo,它的Echarts版本比较高，没有在低版本上测试过，不过理论上来说是可行的。

OKK，这样一个简单的3D的轮播饼图的Demo就出来了。

放一下这个Demo的代码，一些点击事件、Label没有再开发，而且代码没有整理很杂乱，见谅！

/*
 * @Author:
 * @Date: 2022-08-06 07:46:56
 * @LastEditors: atwLee
 * @LastEditTime: 2022-08-07 01:02:21
 * @FilePath: /piethreed/src/pieThreeD.tsx
 * @Description:
 */
import React, {
   
    useRef } from "react";
import type {
   
    EChartsOption } from "echarts";
import EChartsReact from "echarts-for-react";
import "echarts-gl";

function PieThreeD() {
   
   
  let selectedIndex = "";
  let hoveredIndex = "";
  let curIndex = 0;
  let data = [
    {
   
   
      name: "cc",
      value: 2,
      itemStyle: {
   
   
        color: "#f77b66",
      },
    },
    {
   
   
      name: "aa",
      value: 1,
      itemStyle: {
   
   
        color: "#3edce0",
      },
    },
    {
   
   
      name: "bb",
      value: 1,
      itemStyle: {
   
   
        color: "#f94e76",
      },
    },
    {
   
   
      name: "ee",
      value: 1,
      itemStyle: {
   
   
        color: "#018ef1",
      },
    },
    {
   
   
      name: "dd",
      value: 1,
      itemStyle: {
   
   
        color: "#9e60f9",
      },
    },
  ];
  let option = getPie3D(
    data,

最低0.47元/天解锁文章