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