echarts 3D饼图组件

效果图：

效果图.png

组件使用：

distance:缩放大小控制
25：倾斜角度控制
autoRotate：旋转控制
（注：组件中的配置项k用以控制内圆半径，k=0为饼图，否则为饼环图）

       <ThePie3D
              v-if="pie3dVisible"
              :toption="pie3dOption"
              :distance="150"
              :alpha="25"
              :autoRotate="false"
            />


    const pie3dOption = ref([
      {
        name: '村干部',
        value: 38,
        itemStyle: {
          color: '#004BBB',
        },
      },
      {
        name: '科技园',
        value: 30,
        itemStyle: {
          color: '#EE916F',
        },
      },
      {
        name: '贫困户',
        value: 32,
        itemStyle: {
          color: '#00D7E9',
        },
      },
      {
        name: '普通人员',
        value: 58,
        itemStyle: {
          color: '#4366F3',
        },
      },
    ]);

组件.vue：

<!-- eslint-disable no-dupe-keys -->
<template>
  <div class="chart-wrapper">
    <div id="myChart" ref="pieChart" />
  </div>
</template>
<script>
import { ref, onMounted, watch } from 'vue';
import * as echarts from 'echarts';
import 'echarts-gl';
// import { fontSize } from '@/utils/font';
export default defineComponent({
  name: 'Pie3D',
  props: {
    toption: {
      type: Array,
      default: () => [],
    },
    tdata: {
      type: String,
      default: '',
    },
    tname: {
      type: String,
      default: '',
    },
    isShow: {
      type: Boolean,
      default: true,
    },
    distance: {
      type: Number,
      default: 100,
    },
    alpha: {
      type: Number,
      default: 15,
    },
    autoRotate: {
      type: Boolean,
      default: true,
    },
  },
  setup(props) {
    const pieChart = ref(null);
    // 生成扇形的曲面参数方程，
    // eslint-disable-next-line no-shadow
    function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
      // 计算
      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, 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(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(u, v) {
          if (u < -Math.PI * 0.5) {
            return Math.sin(u);
          }
          if (u > Math.PI * 2.5) {
            return Math.sin(u) * h * 0.1;
          }
          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
        },
      };
    }
    // 生成模拟3d饼图的配置项
    function getPie3D(pieData, internalDiameterRatio) {
      let series = [];
      let sumValue = 0;
      let startValue = 0;
      let endValue = 0;
      const legendData = [];
      const scale = 1;
      const rich = {
        yellow: {
          color: '#ffc72b',
          fontSize: 30 * scale,
          padding: [0, 0],
          align: 'center',
        },
        total: {
          color: '#ffc72b',
          fontSize: 40 * scale,
          align: 'center',
        },
        white: {
          color: '#fff',
          align: 'center',
          fontSize: 14 * scale,
          padding: [21, 0],
        },
        blue: {
          color: '#49dff0',
          fontSize: 16 * scale,
          align: 'center',
        },
        hr: {
          borderColor: '#0b5263',
          width: '100%',
          borderWidth: 1,
          height: 0,
        },
      };
      const k =
        typeof internalDiameterRatio !== 'undefined'
          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
          : 1 / 3;

      // 为每一个饼图数据，生成一个 series-surface 配置
      for (let i = 0; i < pieData.length; i += 1) {
        sumValue += pieData[i].value;
        const seriesItem = {
          name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
          type: 'surface',
          radius: ['25%', '40%'],
          startAngle: 12,
          parametric: true,
          wireframe: {
            show: false,
          },
          pieData: pieData[i],
          pieStatus: {
            selected: false,
            hovered: false,
            k,
          },
        };

        if (typeof pieData[i].itemStyle !== 'undefined') {
          const itemStyle = {};

          // eslint-disable-next-line no-unused-expressions
          typeof pieData[i].itemStyle.color !== 'undefined'
            ? (itemStyle.color = pieData[i].itemStyle.color)
            : null;
          // eslint-disable-next-line no-unused-expressions
          typeof pieData[i].itemStyle.opacity !== 'undefined'
            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
            : null;

          seriesItem.itemStyle = itemStyle;
        }
        // console.log(seriesItem);
        series.push(seriesItem);
      }

      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
      const linesSeries = [];
      for (let i = 0; i < series.length; i += 1) {
        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,
          series[i].pieData.value,
        );

        startValue = endValue;
        const midRadian = (series[i].pieData.endRatio + series[i].pieData.startRatio) * Math.PI;
        const posX = Math.cos(midRadian) * (1 + Math.cos(Math.PI / 2));
        const posY = Math.sin(midRadian) * (1 + Math.cos(Math.PI / 2));
        const posZ = Math.log(Math.abs(series[i].pieData.value + 1)) * 0.1;
        const flag =
          (midRadian >= 0 && midRadian <= Math.PI / 2) ||
          (midRadian >= (3 * Math.PI) / 2 && midRadian <= Math.PI * 2)
            ? 1
            : -1;
        const { color } = pieData[i].itemStyle.color;
        // const endPosArr = [posX * (1.5), posY * (2.1), posZ * (12)];
        // const endPosArr = [posX * (1.5) + (i * (0.07) * flag) + (flag < 0 ? -1 : 0), posY * (2) + (i * (-0.05) * flag) + (flag < 0 ? 0.1 : 0), posZ * (13)];
        // const endPosArr = [posX * (1.5) + (i * (0.2) * flag) + (flag < 0 ? -0.9 : 0), posY * (2) + (i * (-0.03) * flag) + (flag < 0 ? 0.5 : 0), posZ * (15)];
        const endPosArr = [
          posX * 1.1 + i * 0.1 * flag + (flag < 0 ? 0.1 : 0.45),
          posY * 1.1 + i * 0 * flag + (flag < 0 ? -0.2 : 0),
          posZ * 1.1 + i * 0 * flag + (flag < 0 ? 0 : 0),
        ];
        linesSeries.push(
          {
            type: 'line3D',
            lineStyle: {
              color,
            },
            data: [[posX, posY, posZ]],
          },
          {
            type: 'scatter3D',
            /* label: {
            show: props.isShow,
            // normal: {
            //   position: 'outside',
            // },
              color: '#FFFFFF',
              fontSize: fontSize(18),
              // fontWeight: 200,
              backgroundColor: 'transparent',
            formatter: '{b}',

          }, */
          // 文字设置
            label: {
              show: true,
              position: 'top',
              distance: 20,
              zIndex: 99,
              color: '#fff',
              formatter(params) {
                let percent = 0;
                let total = 0;
                for (let idx = 0; idx < props.toption.length; idx += 1) {
                  total += props.toption[idx].value;
                }
                percent = ((params.value / total) * 100).toFixed(2);
                if (params.name !== '') {
                  return `\n${params.name}`;
                }
                return '';
              },
              fontWeight: 800,
              fontSize: 16, // 调整字体大小
              lineHight: 18,
              backgroundColor: 'transparent',
            },
            symbolSize: 0,
            data: [{ name: `${series[i].name}\n${series[i].pieData.value}%`, value: endPosArr }],
          },
        );
        legendData.push(series[i].name);
      }
      series = series.concat(linesSeries);

      // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
      series.push({
        name: 'mouseoutSeries',
        type: 'surface',
        parametric: true,
        wireframe: {
          show: false,
        },
        itemStyle: {
          opacity: 0,
        },
        parametricEquation: {
          u: {
            min: 0,
            max: Math.PI * 2,
            step: Math.PI / 20,
          },
          v: {
            min: 0,
            max: Math.PI,
            step: Math.PI / 20,
          },
          x(u, v) {
            return Math.sin(v) * Math.sin(u) + Math.sin(u);
          },
          y(u, v) {
            return Math.sin(v) * Math.cos(u) + Math.cos(u);
          },
          z(u, v) {
            return Math.cos(v) > 0 ? 0.1 : -0.1;
          },
        },
      });

      const option = {
        tooltip: {
          // eslint-disable-next-line consistent-return
          formatter: params => {
            if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
              const bfb = (
                (option.series[params.seriesIndex].pieData.endRatio -
                  option.series[params.seriesIndex].pieData.startRatio) *
                100
              ).toFixed(0);
              return (
                `${params.seriesName}<br/>` +
                `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>${bfb}%`
              );
            }
          },
        },
        xAxis3D: {
          min: -1,
          max: 1,
        },
        yAxis3D: {
          min: -1,
          max: 1,
        },
        zAxis3D: {
          min: -1,
          max: 1,
        },
        grid3D: {
          show: false,
          boxHeight: 5,
          viewControl: {
            // 3d效果可以放大、旋转等
            alpha: props.alpha,
            rotateSensitivity: 0, // 设置为0无法旋转
            zoomSensitivity: 0, // 设置为0无法缩放
            panSensitivity: 0, // 设置为0无法平移
            autoRotate: props.autoRotate, // 自动旋转
            distance: props.distance,
          },
          // 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
          postEffect: {
            // 配置这项会出现锯齿，请自己去查看官方配置有办法解决
            enable: false,
            bloom: {
              enable: true,
              bloomIntensity: 0.1,
            },
            SSAO: {
              enable: true,
              quality: 'medium',
              radius: 2,
            },
            // temporalSuperSampling: {
            //   enable: true,
            // },
          },
        },
        series,
      };
      return option;
    }
    // 渲染echarts图
    const initEcharts = () => {
      const myChart = echarts.init(pieChart.value);
      // 传入数据生成option
      // 传入数据生成 option
      const option = getPie3D(props.toption, 0.65);
      myChart.setOption(option);
    };
    watch(
      () => props.toption,
      newVal => {
        initEcharts();
      },
    );

    onMounted(() => {
      // initEcharts(props.tdata, props.tname);
      initEcharts();
    });

    return {
      pieChart,
      getPie3D,
      getParametricEquation,
    };
  },
});
</script>
<style scoped>
.chart-wrapper {
  width: 100%;
  height: 100%;
  /* border: 2px solid red; */
}
#myChart {
  width: 100%;
  height: 100%;
}
</style>