<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>
