百度echart3D的写法效果

1.球状

<template>
  <div class="gw-echart">
    <div class="echart-main">
      <div class="eachert-box">
        <div class="eachart-zz" id="eachart-zz"></div>
        <div class="eachert-title">
          <div>预备</div>
          <div>{{ zzkqObj.zz }}</div>
        </div>
      </div>
      <div class="eachert-box">
        <div class="eachart-kq" id="eachart-kq"></div>
        <div class="eachert-title">
          <div>正式</div>
          <div>{{ zzkqObj.kq }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getybdyNum } from "@/api/module/lqdjScreen";
import * as echarts from "echarts";
import "echarts-liquidfill";
export default {
  name: "gwEchart",
  data() {
    return {
      zzkqObj: {},
    };
  },
  props: {
    unid: String,
  },
  mounted() {
    this.getDate();
  },
  methods: {
    toCommunityBig(){
      this.$router.push({
          path: "/djBigScreen/communityBig",
          query: {
            communityName: '',
            isFull:this.isFull
          },
        });
    }, 
    getDate() {
      getybdyNum({
        ftype: 0,
        unid: this.unid,
      })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
            let tampArr = res.result;
            this.zzkqObj = {
              zz: 0,
              kq: 0,
            };
            tampArr.forEach((item) => {
              if (item.title == "正式党员") {
                this.zzkqObj.zz = item.value.number;
              } else if (item.title == "空缺岗位") {
                this.zzkqObj.kq = item.value.number;
              }
            });
            let tampObj = {};
            let sum = this.zzkqObj.zz + this.zzkqObj.kq;
            tampObj.zz = Math.ceil((this.zzkqObj.zz / sum) * 100) / 100;
            tampObj.kq = 1 - tampObj.zz;
            this.init(tampObj);
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    init(data) {
      let chartDom = echarts.init(document.getElementById("eachart-zz"));
      const option = {
        series: [
          {
            color: [
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "#e02500", //下
                  },
                  {
                    offset: 0,
                    color: "#faa200",
                  },
                ],
                globalCoord: false,
              },
            ], 波浪颜色
            type: "liquidFill",
            radius:"40%",
            data: [data.zz, data.zz],
            backgroundStyle: {
              borderWidth: 0, //内边框宽度
              borderColor: "#b44b48 ", //背景内边框
              color: "#b64e45", //背景颜色
            },
            outline: {
              borderDistance: 2, //边框距离
              itemStyle: {
                borderWidth: 3,
                borderColor: "#f77900",
              },
            },
            label: {
              normal: {
                textStyle: {
                  fontSize: 16,
                  fontWeight: 400,
                  color: "#fff",
                },
              },
            },
          },
        ],
      };
      chartDom.setOption(option);

      let chartDom2 = echarts.init(document.getElementById("eachart-kq"));
      const option2 = {
        series: [
          {
            color: [
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "#eeb30d", //下
                  },
                  {
                    offset: 0,
                    color: "#fee28f",
                  },
                ],
                globalCoord: false,
              },
            ], 波浪颜色
            type: "liquidFill",
            radius:"40%",
            center: ["50%", "50%"],
            data: [data.kq, data.kq],
            backgroundStyle: {
              borderWidth: 0, //内边框宽度
              borderColor: "#f3aa37 ", //背景内边框
              color: "#b54d44", //背景颜色
            },
            outline: {
              borderDistance: 2, //边框距离
              itemStyle: {
                borderWidth: 3,
                borderColor: "#f3aa37",
              },
            },
            label: {
              normal: {
                textStyle: {
                  fontSize: 16,
                  fontWeight: 400,
                  color: "#fff",
                },
              },
            },
          },
        ],
      };
      chartDom2.setOption(option2);
      window.addEventListener("resize", () => {
        chartDom2.resize();
        chartDom.resize();
      });
    },
  },
};
</script>

<style lang="less" scoped>
.gw-echart {
  width: 100%;
  height: 100%;
  position: relative;
  .echart-main {
    position: absolute;
    width: 100%;
    height: 110%;
    left: 0;
    top: -10%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .eachart-zz {
    width: 100%;
    height: 100%;
  }
  .eachart-kq {
    width: 100%;
    height: 100%;
  }
  .eachert-box {
    position: relative;
    height: 100%;
    width: 100%;
  }
  .eachert-title {
    position: absolute;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    top: 75%;
    font-size: 18px;
    font-weight: 700;
    font-family: Microsoft YaHei, Microsoft YaHei-Bold;
    background: -webkit-linear-gradient(90deg, #ffc6b4 0%, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
  }
}
</style>

2.筒状3D

<template>
  <div class="edgw-echart">
    <div class="eachert-box" id="edgw-echart"></div>
    <div class="pedestal"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getPie3D } from "../js/chart";
import { getFzdyStatus } from "@/api/module/lqdjScreen";
import "echarts-gl";
export default {
  name: "gwEchart",
  data() {
    return {
      myChart: null,
      option: null,
      colorList: [
        "#867CFF",
        "#0D00BB",
        "#F77900",
        "#BEE5FB",
        "#564AF1",
        "#2B8EF3",
        "#48E5E5",
        "#0066FF",
      ],
      optionData: [],
    };
  },
  props: {
    unid: String,
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      getFzdyStatus(this.unid).then((res) => {
        if (res.code == 200) {
          let tampArr = res.result || [];
          this.optionData = [];
          tampArr.forEach((item, index) => {
            this.optionData.push({
              name: item.title,
              value: item.value.number,
              itemStyle: {
                opacity: 1,
                color: this.colorList[index],
              },
            });
          });
          this.init();
        }
      });
    },
    init() {
      // 图表初始化
      this.myChart = echarts.init(document.getElementById("edgw-echart"));
      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
      this.option = getPie3D(this.optionData, 0.8, 220, 22, 13);
      console.log(this.option);
      this.myChart.setOption(this.option);
      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
      // this.option.series.push({
      //   name: "电梯状态", //自己根据场景修改
      //   backgroundColor: "transparent",
      //   type: "pie",
      //   label: {
      //     opacity: 1,
      //     fontSize: 13,
      //     lineHeight: 20,
      //   },
      //   startAngle: -40, // 起始角度，支持范围[0, 360]。
      //   clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
      //   radius: ["20%", "50%"],
      //   center: ["50%", "50%"],
      //   data: this.optionData,
      //   itemStyle: {
      //     opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
      //   },
      // });
      this.myChart.setOption(this.option);
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
      // this.bindListen(this.statusChart)
    },
  },
};
</script>

<style lang="less" scoped>
.edgw-echart {
  width:calc(100% - 10px);
  height:calc(100% - 20px);
  padding:10px 5px;
  position: relative;
  .eachert-box {
    width: 100%;
    height: 100%;
    z-index: 2;
    position: relative;
  }
  .pedestal {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 8%;
    // background: url("~@/assets/project/dj/pedestal.png") center center;
    background-size: 100% 100%;
    width: 341px;
    height: 147px;
  }
}
</style>