<template>
  <div id="position"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";

const init = () => {
  let myChart = echarts.init(document.getElementById("position") as any);
  console.log(myChart, "myChart");

  let option;
  option = {
    title: {
      text: "职位offer排行榜",
      left: "center", // 水平居中
      top: "top", // 垂直靠上
      textStyle: {
        color: "#ffffff",
      },
    },
    // legend: {},
    color: ["#7cd7af"],
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
      backgroundColor: "#fff",
    },
    textStyle: {
      color: "#ffffff",
    }, //x,y轴字体颜色
    xAxis: {
      type: "value",
      boundaryGap: [0, 0.01],
    },
    yAxis: {
      type: "category",
      data: [
        "运营专员",
        "企管部人事",
        "呜呜呜呜",
        "产品高级经理",
        "学管师",
        "人力资源部部长",
        "火箭发动机研发",
        "大客户销售经理",
        "产品VP招聘",
      ],
    },
    //
    series: [
      {
        name: "排行",
        type: "bar",
        label: {
          show: true,
          position: "right",
          color: "#ffffff",
          formatter: ({ value }: any) => {
            return value + "人";
          },
        },
        data: [3, 3, 2, 2, 1, 1, 1, 1, 1],
      },
    ],
  };
  option && myChart.setOption(option);
};

defineExpose({
  init,
});
</script>

<style lang="scss" scoped>
#position {
  width: 394px;
  height: 360px;
  margin-top: 20px;
  // background-color: #fff;
  padding-right: 10px;
  box-sizing: border-box;
}
</style>
