【Vue3+vite+Echarts】完美解决3D图表旋转卡顿问题，警告： ‘requestAnimationFrame‘ handler 用时 ＜N＞ 毫秒

hi brother！你是否还在为3D图表旋转卡顿而烦恼？不用担心，跟着本文步骤走，让咱们的图表丝滑旋转上天！

【警告内容 】

‘requestAnimationFrame’ handler 用时 <N> 毫秒
顺嘴说一句，有些朋友开发阶段还出现geo3D exists的警告。不用担心！打包后就不会出现了！！！

【解决方案】

1、下载 worker-loader
（自行了解worker-loader是什么，这哥们总结的挺好：http://t.csdnimg.cn/tMQM1）

npm i worker-loader

2、写一个worker.js文件

// worker.js
// 此文件的作用类似于咱们封装aixos的interceptors，过滤器效果
// 可以做其他处理
addEventListener("message", (e) => {
  const { data } = e;
  // console.log(data)
  return postMessage(data);
});

3、使用worker

• 开线程

  let myChart = null 
  let myWorker = null
  onMounted(() => {
    myChart = $echarts.init(pie3d.value); 
    myWorker = new Worker(new URL('../../../utils/worker.js',
      import.meta.url)) //这里的url写自己的worker.js的地址
	myWorker.postMessage(option); // 开线程，传递Echarts的option数据
    myWorker.onmessage = function (event) {
      // 这里的数据已经在worker.js处理过一遍
      // 在这里更新Echarts
      myChart.setOption(event.data);
      
    };
  })

• 关线程
  开了要记得关！

onBeforeUnmount(() => {
    // console.log("摧毁之前")
    myWorker.terminate() //关闭线程
  })

【案例】

话不多说，上案例！
自己封装的组件，

<template>
  <div>
	<pie :dataList="dataList"></pie>
  </div>
</template>
<script setup>
import Pie from './pie.vue'
const dataList=[1,2,3,4]

</script>

pie.vue组件

<!-- pie.vue -->
<template>
  <div class="pie">
    <div ref="pie3d" style="width:200px;height:160px;"></div>
  </div>
</template>
<script setup>
  import {
    onMounted,
    onBeforeUnmount,
    watch,
    nextTick,
    ref,
    reactive,
    getCurrentInstance
  } from 'vue';
  
  const props = defineProps({
    dataList: {
      type: Object,
      default: () => {
        return {}
      }
    }
  })
  const {
    $echarts
  } = getCurrentInstance().appContext.config.globalProperties

  const optionsData = reactive({
    list: []
  })
  const pie3d = ref()
  let myChart = null
  let myWorker = null
  const opacity = 0.8;
  onMounted(() => {
    myChart = $echarts.init(pie3d.value);
    myWorker = new Worker(new URL('../../../utils/worker.js',
      import.meta.url))
    setWorker()
  })

  const setWorker = () => {
    myWorker.onmessage = function (event) {
      // 这里的数据已经在worker.js处理过一遍
      // 在这里更新Echarts
      if (event.data) {
        // 开启线程
        init()
      } else {
        // 线程结束
        myWorker.terminate() // 关闭线程
      }
    };
  }
  //格式化数据
  const formatingData = () => {
    optionsData.list = [{
        name: "数据1",
        value: props.dataList[0] || 0,
        itemStyle: {
          opacity: opacity,
          color: "rgba(219,112,147,1)",
        },
      },
      {
        name: "数据2",
        value: props.dataList[1] || 0,
        itemStyle: {
          opacity: opacity,
          color: "rgba(240,230,140, 1)",
        },
      },
      {
        name: "数据3",
        value: props.dataList[2] || 0,
        itemStyle: {
          opacity: opacity,
          color: "rgba(0, 184, 246, 1)",
        },
      },
      {
        name: "数据4",
        value: props.dataList[3] || 0,
        itemStyle: {
          opacity: opacity,
          color: "rgba(144,238,144, 1)",
        },
      },
    ]
  }
  //初始化构建
  const init = () => {
    let series = getPie3D(optionsData.list, 0.85);
    let option = {
      animation: true,
      backgroundColor: "transparent",
      label: {
        show: true,
        position: "outside",
        formatter: function (optionsData) {
          return (
            "{name|" +
            optionsData.name +
            "}" +
            " {value|" +
            optionsData.percent.toFixed(0) +
            "%}"
          );
        },
        rich: {
          name: {
            fontSize: 14,
            color: "#ffffff",
          },
          value: {
            fontSize: 14,
            color: "#ffffff",
          },
        },
        textStyle: {
          color: "#fff",
          fontSize: "14px",
        },
      },
      xAxis3D: {
        min: -1,
        max: 1,
      },
      yAxis3D: {
        min: -1,
        max: 1,
      },
      zAxis3D: {
        min: -1,
        max: 1,
      },
      grid3D: {
        show: false,
        boxHeight: 2,
        boxDepth: "160",
        boxWidth: '160',
        top: '0%',
        left: "0%",
        viewControl: {
          distance: 250,
          alpha: 22,
          beta: 15,
          autoRotate: true, // 自动旋转
        },
      },
      series: series,
    };

    //将配置项设置进去
    myChart.setOption(option);
  }
  // 设置3DPie
  const 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);
    }
    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 = getParametricEquation(
        series[i].pieData.startRatio,
        series[i].pieData.endRatio,
        false,
        false,
        k,
        // 调整扇形高度
        i === 0 ? 10 : 10,
        i,
        series[i].pieData.value
      );

      startValue = endValue;

      legendData.push(series[i].name);
    }
    return series;
  }
  const getParametricEquation = (startRatio, endRatio, isSelected, isHovered, k, height, i) => {
    // 计算
    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;
    let offsetZ = i == 1 ? 2 : 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;
      },
    };
  }
  watch(() => props.dataList, (val) => {
    formatingData()
    nextTick(() => {
      myWorker.postMessage(1); // 1开启 0关闭
    })
  }, {
    deep: true,
    immediate: true
  })
  onBeforeUnmount(() => {
    // console.log("摧毁之前")
    myWorker.postMessage(0); // 1开启 0关闭
  })
</script>

<style scoped>
  .pie {
    position: relative;
  }
</style>

worker.js

addEventListener("message", (e) => {
  const { data } = e;
  // console.log(data)
  return postMessage(data);
});

【成果】

来试试看吧！