rsxm-master/src/views/threeLaborService/components/solveEmployment-gwxqdb.vue

<template>
  <!-- 页面的 HTML 模板部分 -->
  <div>
    <div class="pieMain">
      <div class="pieBox" ref="pieRef"></div>
      <div class="pieTitle">
        <span style="font-size: 24px">79000</span><br />需求总数
      </div>
    </div>
    <ul class="pieLsit">
      <li>
        <div><span class="blockOne"></span><span>已满足需求岗位</span></div>
        <div>
          <span class="numb">58000</span><span class="proportion">73.4%</span>
        </div>
      </li>
      <li>
        <div><span class="blockTwo"></span><span>未满足需求岗位</span></div>
        <div>
          <span class="numb">21000</span><span class="proportion">26.6%</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from "vue";
import * as echarts from "echarts";
const pieRef = ref(null);
const option = {
  // 设置图形位置
  tooltip: {
    trigger: "item"
  },

  series: [
    {
      name: "需求占比",
      type: "pie",
      radius: ["65%", "80%"],
      avoidLabelOverlap: false,
      padAngle: 5,
      itemStyle: {
        borderRadius: 1
      },
      label: {
        show: false,
        position: "center"
      },

      labelLine: {
        show: false
      },
      data: [
        {
          value: 58000,
          name: "已满足需求岗位",
          itemStyle: { color: "#58A8FF" }
        },
        {
          value: 21000,
          name: "未满足需求岗位",
          itemStyle: { color: "#30DCFF" }
        }
      ]
    }
  ]
};

// 生命周期钩子
onMounted(() => {
  if (pieRef.value) {
    const chart = echarts.init(pieRef.value);
    // 设置option
    chart.setOption(option);
  }
});
</script>

<style lang="scss" scoped>
.pieMain {
  position: relative;
  border: 1px solid transparent;
  .pieBox {
    margin: 0 auto;
    margin-top: 20px;
    width: 230px;
    height: 230px;
    background: url("~@/assets/images/recruitment/pie-bg@2x.png") no-repeat
      center;
    background-size: 100%;
  }
  .pieTitle {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    z-index: 10;
    margin-top: -10px;
    font-size: 20px;
  }
}
ul.pieLsit {
  margin: 0 20px;
  border: 1px solid transparent;
  padding: 10px 0 0 0;
  li {
    // font-size: 16px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 40px;
    padding: 0 10px;
    background: rgba(203, 242, 250, 0.2);
    border-radius: 4px 4px 4px 4px;
    border: 1px solid rgba(203, 242, 250, 0.2);
    margin-top: 12px;
    font-size: 18px;
    > div {
      height: 100%;
      line-height: 40px;
    }
    .blockOne,
    .blockTwo,
    .blockThree {
      display: inline-block;
      width: 12px;
      height: 12px;
      margin-right: 8px;
    }
    .blockOne {
      background-color: #58a8ff;
    }
    .blockTwo {
      background-color: #30dcff;
    }
    .blockThree {
      background-color: #ffffff;
    }
    .proportion {
      display: inline-block;
      width: 80px;
      text-align: right;
    }
  }
}
</style>