兴蜀人力数据概览大屏

2025-09-23 09:02:40 +08:00
parent dd19b3ee22
commit 2ed80d527d
18 changed files with 1082 additions and 234 deletions
--- a/src/views/recruitment/card/LaborSystemFour.vue
+++ b/src/views/recruitment/card/LaborSystemFour.vue
@ -0,0 +1,117 @@
+<template>
+  <div>
+    <div class="carcTitle">服务求职者变化趋势</div>
+    <div ref="laborSystemFourRef" style="width: 17vw; height: 14.5vw"></div>
+  </div>
+</template>
+
+<script setup>
+// Vue 3 Composition API 的 setup 语法糖
+// 在这里直接编写响应式数据和方法，无需返回
+import { ref, reactive, computed, onMounted } from "vue";
+import * as echarts from "echarts";
+const laborSystemFourRef = ref(null);
+const option = {
+  // 设置图形位置
+  grid: {
+    top: "17%",
+    left: "15%",
+    right: "5%",
+    bottom: "10%"
+  },
+  tooltip: {
+    trigger: "axis"
+  },
+  xAxis: {
+    axisLine: {
+      lineStyle: {
+        color: "#CBF2FA" // 文字颜色
+      }
+    },
+
+    type: "category",
+    data: [
+      "1月",
+      "2月",
+      "3月",
+      "4月",
+      "5月",
+      "6月",
+      "7月",
+      "8月",
+      "9月",
+      "10月",
+      "11月",
+      "12月"
+    ]
+  },
+  yAxis: {
+    //网格线
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ["#A1C7CD"], // 线颜色
+        opacity: 0.2 // 透明度
+      }
+    },
+    axisLine: {
+      lineStyle: {
+        color: "#CBF2FA" // 文字颜色
+      }
+    },
+    type: "value"
+  },
+  series: [
+    {
+      name: "求职者",
+      type: "line",
+      showBackground: true,
+      barWidth: 8,
+      data: [38, 62, 52, 41, 37, 62, 52, 41, 67, 62, 52, 41],
+      // 设置柱状图的数值
+      label: {
+        show: true,
+        position: "top",
+        color: "#30DCFF"
+      },
+      itemStyle: {
+        //渐变色
+        color: {
+          type: "linear",
+          x: 1,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: "rgba(48, 220, 255, 1)" }
+            // { offset: 1, color: "rgba(48, 220, 255, 0.06)" }
+          ]
+        }
+      }
+    }
+  ]
+};
+
+// 生命周期钩子
+onMounted(() => {
+  if (laborSystemFourRef.value) {
+    const chart = echarts.init(laborSystemFourRef.value);
+    // 设置option
+    chart.setOption(option);
+  }
+});
+</script>
+
+<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>