饼图3d效果

一、传参及使用

 const list = [
              { name: "类别1", param: "ls" },
              { name: "类别2", param: "gw" },
              { name: "类别3", param: "lw" },
            ];
const data = list.map((i: any, index: number) => {
              {
                return {
                  code: index,
                  name: i.name,
                  value: res.data[i.param] || 0,
                  startRatio: 0,
                  endRatio: res.data[i.param]/50,
                };
              }
            });
            const options = get3DPieObj.get3DPie(data, 0.8);

二、代码详情

export const get3DPieObj = {
  get3DPie:(data, internalDiameterRatio, legendShow=true,tooltipShow=true,formatter?,) =>{
    let color = ["#f4a619", "#0BE19E", "#7395be"];//前三个面会根据这个颜色，如果有多个面的类会系统自动生成
    let series = [];
    let sumValue = 0;
    let startValue = 0;
    let endValue = 0;
    let legendData = [];
    let legendBfb = [];
    let k = 1 - internalDiameterRatio;
    let pieData = [];
    data.forEach((m, mIndex) => {
      pieData.push({
        name: m.name,
        value: m.value,
        itemStyle: {
          opacity: 1,
          color: color[mIndex],
        },
      });
    });
    // 为每一个饼图数据，生成一个 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,
        },
        rich: {
          red: {
            fontSize: 16,
            color: "#00BCEE",
          },
          blue: {
            fontSize: 16,
            color: "#0BE19E",
          },
          green: {
            fontSize: 16,
            color: "#EAA031",
          },
          name: {
            fontSize: 14,
            color: "#fff",
            align: "center",
          },
        },
        label:{
          show:true,
        },
        labelLine: {
          length: "10%",
          length2: 0,
          position: 'outer', // 指引线起点位置，inner、outer、start、middle、end
        },
        labelLayout: function (params) {
          const isLeft = params.labelRect.x < 110;
          const points = params.labelLinePoints;
          // Update the end point.
          points[2][0] = isLeft
            ? params.labelRect.x
            : params.labelRect.x + params.labelRect.width;
          return {
            labelLinePoints: points,
            verticalAlign: "bottom",
          };
        },
        itemStyle:{}
      };
      //曲面的颜色、不透明度等样式。
      if (typeof pieData[i].itemStyle != "undefined") {
        let itemStyle = <IBaseObject>{};
        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);
    }
    // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
    // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
    legendData = [];
    legendBfb = [];
    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 = get3DPieObj.getParametricEquation(
        series[i].pieData.startRatio,
        series[i].pieData.endRatio,
        false,
        false,
        k,
        // 调整扇形高度
        series[i].pieData.value
      );
      startValue = endValue;
      let bfb = get3DPieObj.fomatFloat(series[i].pieData.value / sumValue, 4);
      legendData.push({
        name: series[i].name,
        value: bfb,
      });
      legendBfb.push({
        name: series[i].name,
        value: bfb,
      });
    }
    //(第二个参数可以设置你这个环形的高低程度)
    let boxHeight = get3DPieObj.getHeight3D(series, 10); //通过传参设定3d饼/环的高度
    // 准备待返回的配置项，把准备好的 legendData、series 传入。
    let option = {
      //图例组件
      legend: {
        show:legendShow,
        data: legendData,
        //图例列表的布局朝向。
        orient: "vertical",
        top: "bottom", //垂直方向位置
        //图例文字每项之间的间隔
        // itemGap: 50,
        textStyle: {
          rich: {
            val: {
              color: "#cae2ee",
              fontSize: "12px",
              width: 50,
            },
            names: {
              color: "#99adba",
              fontSize: "12px",
              width: 100,
            },
            line: {
              fontSize: "12",
              color: "#a9b9c4",
            },
          },
        },
        icon: "roundRect",
        itemHeight: 12,
        itemWidth: 12,
        //格式化图例文本（我是数值什么显示什么）
        formatter:
          formatter ||
          function (name) {
            var target;
            for (var i = 0, l = pieData.length; i < l; i++) {
              if (pieData[i].name == name) {
                target = pieData[i].value;
              }
            }
            /*let item = legendBfb.filter((item) => item.name == name)[0];
            return `{names|${name}}{val|${target}人}`;*/
            let item = legendBfb.filter((item) => item.name == name)[0];
            let bfs = get3DPieObj.fomatFloat(item.value * 100, 1)+"%";
            return `{names|${name}}{val|${target}人}{val|${bfs}}`;
          },
        // 这个可以显示百分比那种（可以根据你想要的来配置）
        // formatter: function (param) {
        //   let item = legendBfb.filter((item) => item.name == param)[0];
        //   let bfs = fomatFloat(item.value * 100, 2) + "%";
        //   console.log(item);
        //   return `${item.name} ${item.value}人 占比：${bfs}`;
        // },
      },
      //移动上去提示的文本内容
      tooltip: {
        show: tooltipShow,
        formatter: (params) => {
          if (
            params.seriesName !== "mouseoutSeries" &&
            params.seriesName !== "pie2d"
          ) {
            let bfb = (
              (option.series[params.seriesIndex].pieData.endRatio -
                option.series[params.seriesIndex].pieData.startRatio) *
              100
            ).toFixed(2);
            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: boxHeight>30?30:boxHeight, //圆环的高度
        //这是饼图的位置
        left: "0%",
        // left: "right",
        top: "-25%",
        viewControl: {
          //3d效果可以放大、旋转等，请自己去查看官方配置
          alpha: 24, //角度(这个很重要 调节角度的)
          distance: 216, //调整视角到主体的距离，类似调整zoom(这是整体大小)
          rotateSensitivity: 10, //设置为0无法旋转
          zoomSensitivity: 0, //设置为0无法缩放
          panSensitivity: 0, //设置为0无法平移
          autoRotate: false, //自动旋转
          beta: -45,
        },
      },
      series: series,
    };
    return option;
  },
  getHeight3D:(series, height) =>{
    series.sort((a, b) => {
      return b.pieData.value - a.pieData.value;
    });
    return (height * 25) / series[0].pieData.value;
  },
  getParametricEquation:(startRatio,endRatio,isSelected,isHovered,k,h)=> {
  // 计算
  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) * h * 0.1;
      }
      return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
    },
  };
},
  fomatFloat:(num, n)=> {
  var f = parseFloat(num);
  if (isNaN(f)) {
    return false;
  }
  f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂
  var s = f.toString();
  var rs = s.indexOf(".");
  //判定如果是整数，增加小数点再补0
  if (rs < 0) {
    rs = s.length;
    s += ".";
  }
  while (s.length <= rs + n) {
    s += "0";
  }
  return s;
}
}