兴蜀大屏轮播组件部分提交

2025-09-18 15:58:57 +08:00
parent e79759e000
commit dd19b3ee22
19 changed files with 1119 additions and 330 deletions
--- a/src/views/recruitment/card/EnterpriseEmploymentTwo.vue
+++ b/src/views/recruitment/card/EnterpriseEmploymentTwo.vue
@ -0,0 +1,124 @@
+<template>
+  <div ref="enterpriseTwoRef" style="width: 17vw; height: 17vw"></div>
+</template>
+
+<script setup>
+// Vue 3 Composition API 的 setup 语法糖
+// 在这里直接编写响应式数据和方法，无需返回
+import { ref, reactive, computed, onMounted } from "vue";
+import * as echarts from "echarts";
+const enterpriseTwoRef = ref(null);
+const option = {
+  // 设置图形位置
+  grid: {
+    top: "15%",
+    left: "15%",
+    right: "5%",
+    bottom: "10%"
+  },
+  // 设置图例
+  legend: {
+    itemWidth: 10, // 方块宽度
+    itemHeight: 10, // 方块高度
+    textStyle: {
+      color: "#B2D9DF" // 文字颜色
+    },
+    x: "center", // 图例在左（left）、右（right）、居中（center）、100px
+    y: "top", // 图例在上（top）、下（bottom）、居中（center、100px）、100px
+    padding: [15, 50, 0, 0] // 图例[距上右下左方距离
+  },
+  xAxis: {
+    axisLine: {
+      lineStyle: {
+        color: "#CBF2FA" // 文字颜色
+      }
+    },
+
+    type: "category",
+    data: ["微型企业", "小型企业", "中型企业", "大型企业"]
+  },
+  yAxis: {
+    //网格线
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ["#A1C7CD"], // 线颜色
+        opacity: 0.2 // 透明度
+      }
+    },
+    axisLine: {
+      lineStyle: {
+        color: "#CBF2FA" // 文字颜色
+      }
+    },
+    type: "value"
+  },
+  series: [
+    {
+      name: "岗位种类数",
+      type: "bar",
+      showBackground: true,
+      barWidth: 8,
+      data: [76, 32, 87, 65],
+      // 设置柱状图的数值
+      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)" }
+          ]
+        }
+      }
+    },
+    {
+      name: "岗位人员数",
+      type: "bar",
+      showBackground: true,
+      barWidth: 8,
+      data: [34, 15, 45, 24],
+      // 设置柱状图的数值
+      label: {
+        show: true,
+        position: "top",
+        color: "#CBF2FA"
+      },
+      itemStyle: {
+        //渐变色
+        color: {
+          type: "linear",
+          x: 1,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: "rgba(203, 242, 250, 1)" },
+            { offset: 1, color: "rgba(203, 242, 250, 0.08)" }
+          ]
+        }
+      }
+    }
+  ]
+};
+
+// 生命周期钩子
+onMounted(() => {
+  if (enterpriseTwoRef.value) {
+    const chart = echarts.init(enterpriseTwoRef.value);
+    // 设置option
+    chart.setOption(option);
+  }
+});
+</script>
+
+<style lang="scss" scoped></style>