兴蜀来了平台业务数据大屏页面、三级劳务体系⼈员数据大屏页面、“产教评”融合培训平台大屏页面

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

@@ -0,0 +1,138 @@
+<template>
+  <!-- 页面的 HTML 模板部分 -->
+  <div>
+    <div class="pieMain">
+      <div class="pieBox" ref="pieRef"></div>
+      <div class="pieTitle">
+        <span style="font-size: 24px">288</span><br />需求总数
+      </div>
+    </div>
+    <ul class="pieLsit">
+      <li>
+        <div><span class="blockOne"></span><span>已满足需求岗位</span></div>
+        <div>
+          <span class="numb">230</span><span class="proportion">79.86%</span>
+        </div>
+      </li>
+      <li>
+        <div><span class="blockTwo"></span><span>未满足需求岗位</span></div>
+        <div>
+          <span class="numb">58</span><span class="proportion">20.14%</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: 230, name: "已满足需求岗位", itemStyle: { color: "#58A8FF" } },
+        { value: 58, 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;
+  }
+}
+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;
+    > 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>