兴蜀大屏调整

src/views/recruitment/components/jyknryzjy/zhuanye.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="barBox" ref="enterpriseTwoRef"></div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from "vue";
+import * as echarts from "echarts";
+const enterpriseTwoRef = ref(null);
+const option = {
+  // 设置图形位置
+  grid: {
+    top: "10%",
+    left: "8%",
+    right: "5%",
+    bottom: "11%"
+  },
+  // 设置图例
+  // 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" // 文字颜色
+      }
+    },
+    axisLabel: {
+      fontSize: 22, // 设置 x 轴文字大小
+      color: "#CBF2FA" // 可以同时设置文字颜色
+    },
+    type: "category",
+    data: [
+      "护理专业",
+      "语言及法学类专业",
+      "工程类专业",
+      "管理及新媒体类专业",
+      "其他"
+    ]
+  },
+  yAxis: {
+    //网格线
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ["#A1C7CD"], // 线颜色
+        opacity: 0.2 // 透明度
+      }
+    },
+    axisLine: {
+      lineStyle: {
+        color: "#CBF2FA" // 文字颜色
+      }
+    },
+    axisLabel: {
+      fontSize: 20, // 设置 x 轴文字大小
+      color: "#CBF2FA" // 可以同时设置文字颜色
+    },
+    type: "value"
+  },
+  series: [
+    {
+      name: "专业人数",
+      type: "bar",
+      showBackground: true,
+      barWidth: 20,
+      data: [56, 41, 39, 25, 494],
+      // 设置柱状图的数值
+      label: {
+        show: true,
+        position: "top",
+        color: "#30DCFF",
+
+        fontSize: 22
+      },
+      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 (enterpriseTwoRef.value) {
+    const chart = echarts.init(enterpriseTwoRef.value);
+    // 设置option
+    chart.setOption(option);
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.barBox {
+  width: 40vw;
+  height: 20vw;
+  margin: 0 auto;
+}
+</style>