<template>
  <div>
    <div class="carcTitle">促就业⼈数清单</div>
    <div ref="collageTalentsThreeRef" 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 collageTalentsThreeRef = 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: ["专业A", "专业B", "专业C", "专业D"]
  },
  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 (collageTalentsThreeRef.value) {
    const chart = echarts.init(collageTalentsThreeRef.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>
