兴蜀人力数据概览大屏

src/views/recruitment/card/CollegeTalentsThree.vue

@@ -1,5 +1,8 @@
 <template>
-  <div ref="enterpriseThreeRef" style="width: 17vw; height: 17vw"></div>
+  <div>
+    <div class="carcTitle">促就业⼈数清单</div>
+    <div ref="collageTalentsThreeRef" style="width: 17vw; height: 14.5vw"></div>
+  </div>
 </template>
 
 <script setup>
@@ -7,11 +10,11 @@
 // 在这里直接编写响应式数据和方法，无需返回
 import { ref, reactive, computed, onMounted } from "vue";
 import * as echarts from "echarts";
-const enterpriseThreeRef = ref(null);
+const collageTalentsThreeRef = ref(null);
 const option = {
   // 设置图形位置
   grid: {
-    top: "17%",
+    top: "15%",
     left: "15%",
     right: "5%",
     bottom: "10%"
@@ -35,7 +38,7 @@ const option = {
     },
 
     type: "category",
-    data: ["制造业", "服务业", "建筑业", "批发和零售业"]
+    data: ["专业A", "专业B", "专业C", "专业D"]
   },
   yAxis: {
     //网格线
@@ -55,11 +58,11 @@ const option = {
   },
   series: [
     {
-      name: "岗位种类数",
-      type: "line",
+      name: "高校数",
+      type: "bar",
       showBackground: true,
       barWidth: 8,
-      data: [70, 62, 52, 41],
+      data: [76, 32, 87, 65],
       // 设置柱状图的数值
       label: {
         show: true,
@@ -75,18 +78,18 @@ const option = {
           x2: 0,
           y2: 1,
           colorStops: [
-            { offset: 0, color: "rgba(48, 220, 255, 1)" }
-            // { offset: 1, color: "rgba(48, 220, 255, 0.06)" }
+            { offset: 0, color: "rgba(48, 220, 255, 1)" },
+            { offset: 1, color: "rgba(48, 220, 255, 0.06)" }
           ]
         }
       }
     },
     {
-      name: "岗位人员数",
-      type: "line",
+      name: "促就业人数",
+      type: "bar",
       showBackground: true,
       barWidth: 8,
-      data: [54, 32, 45, 18],
+      data: [34, 15, 45, 24],
       // 设置柱状图的数值
       label: {
         show: true,
@@ -102,8 +105,8 @@ const option = {
           x2: 0,
           y2: 1,
           colorStops: [
-            { offset: 0, color: "rgba(178, 217, 223, 1)" }
-            // { offset: 1, color: "rgba(203, 242, 250, 0.08)" }
+            { offset: 0, color: "rgba(203, 242, 250, 1)" },
+            { offset: 1, color: "rgba(203, 242, 250, 0.08)" }
           ]
         }
       }
@@ -113,12 +116,24 @@ const option = {
 
 // 生命周期钩子
 onMounted(() => {
-  if (enterpriseThreeRef.value) {
-    const chart = echarts.init(enterpriseThreeRef.value);
+  if (collageTalentsThreeRef.value) {
+    const chart = echarts.init(collageTalentsThreeRef.value);
     // 设置option
     chart.setOption(option);
   }
 });
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.carcTitle {
+  height: 1.4vw;
+  line-height: 1.4vw;
+  font-size: 0.8vw;
+  text-align: center;
+  color: #c4f3fe;
+  background: url("~@/assets/images/recruitment/card-title@2x.png") no-repeat
+    center;
+  background-size: auto 100%;
+  margin-top: 0.7vw;
+}
+</style>