real3d-portalsite/src/components/echartsTemplate/3dPie.vue

<template>
  <div id="pie_echart" ref="echart"></div>
</template>

<script>
let colors = [
  "RGBA(235, 184, 86, 1)",
  "RGBA(100, 184, 255, 1)",
  "RGBA(71, 203, 129, 1)",
];
let option = {
  legend: {
    tooltip: {
      show: true,
    },
    orient: "vertical",

    itemWidth: 12, // 设置宽度
    itemHeight: 12, // 设置高度
    data: [],
    bottom: "20%",
    right: "-3%",
    left: "50%",
    itemGap: 10,
    textStyle: {
      color: "#fff",
      fontSize: 12,
    },
    textStyle: {
      rich: {
        name: {
          color: "#BCD3E5",
          fontSize: 14,
        },
        value: {
          color: "#64DAFF",
          fontSize: 14,
        },
        unit: {
          color: "#BCD3E5",
          fontSize: 14,
        },
      },
    },
  },
  animation: true,

  backgroundColor: "rgba(0,0,0,0)",
  labelLine: {
    show: false,
    lineStyle: {
      color: "#7BC0CB",
    },
  },
  label: {
    show: false,
    position: "outside",
    formatter: "{d}%",
    color: "inherit",
  },
  xAxis3D: {
    min: -1,
    max: 1,
  },
  yAxis3D: {
    min: -1,
    max: 1,
  },
  zAxis3D: {
    min: -1,
    max: 1,
  },
  grid3D: {
    show: false,
    boxHeight: 1,
    top: "10%",
    left: "-25%",
    // bottom: '-80%',
    //					environment: '#021041',
    viewControl: {
      distance: 180,
      alpha: 25,
      beta: 20,
      // autoRotate: true, // 自动旋转
    },
  },
  series: [],
};
export default {
  name: "pie_echart",
  components: {},
  props: {
    unit: {
      type: String,
    },
    legendFlag: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      myChart: null,
    };
  },
  methods: {
    setOptions(data, boxHeight) {
      if (!this.myChart) {
        // var dom = document.getElementById("pie_echart");
        this.myChart = echarts.init(this.$refs.echart);
      }
      this.initEchartXzqh(data, boxHeight);
    },
    initEchartXzqh(optionsData, boxHeight) {
      let _this = this;
      option.legend.show = _this.$props.legendFlag
      option.legend.formatter = function (name) {
        const sItem = optionsData.find((item) =>
          `${item.name}`.includes(`${name}`)
        );
        if (sItem) {
          // return `{name|${name}}  {unit|${_this.$props.unit}} `;

          return `{name|${name}}  {value|${sItem.value}}  {unit|${_this.$props.unit}} `;
          // return name + 'sItem.value';
        } else {
          return name;
        }
      };
      option.grid3D.boxHeight = boxHeight || 1;
      const series = this.getPie3D(optionsData, 0.6);
      option.series = series;

      // series.push({
      //   name: "pie2d",
      //   type: "pie",

      //   label: {
      //     normal: {
      //       show: false, //设为false
      //       position: "center", //center表示文本显示位置为内部
      //     },
      //     opacity: 1,
      //     fontSize: 13,
      //     lineHeight: 20,
      //     textStyle: {
      //       fontSize: 22,
      //     },
      //   },
      //   labelLine: {
      //     length: 20,
      //     length2: 40,
      //   },
      //   startAngle: -30, //起始角度，支持范围[0, 360]。
      //   clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
      //   radius: ["30%", "55%"],
      //   center: ["52%", "38%"],
      //   // 没啥用
      //   data: [
      //     {
      //       name: "征收",
      //       value: 20,
      //       itemStyle: {
      //         //						 opacity: 0.8,
      //         color: "#3b8584",
      //       },
      //     },

      //     {
      //       name: "收购",
      //       value: 50,
      //       itemStyle: {
      //         //						 opacity: 0.8,
      //         color: "#64d9e0",
      //       },
      //     },
      //     {
      //       name: "回收",
      //       value: 30,
      //       itemStyle: {
      //         //						 opacity: 0.8,
      //         color: "#dac254",
      //       },
      //     },
      //   ],
      //   itemStyle: {
      //     opacity: 0,
      //   },
      // });
      // // 准备待返回的配置项，把准备好的 legendData、series 传入。

      let total = optionsData.reduce(function (prev, cur, index, arr) {
        return prev + cur.value;
      }, 0); //数据总和

      this.myChart.setOption(option);
    },
    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
    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 饼图的配置项
    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,
          },
        };

        seriesItem.itemStyle = { color: colors[i], opacity: 0.8 };

        series.push(seriesItem);
      }

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

        startValue = endValue;

        legendData.push(series[i].name);
      }
      option.legend.data = legendData;
      return series;
    },
  },
  mounted() { },
};
</script>
<style lang="scss" scoped>
.pie_echart {
  width: 100%;
  height: 100%;
}
</style>