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

<script>
import { getPieXl } from "@/api/largeSize";
import * as echarts from "echarts";
export default {
  data() {
    return {
      queryData: null,
      //内部人员
      arr1: [],
      //外部人员
      arr2: [],
      list: [
        {
          id: 1,
        },
        {
          id: 2,
        },

        {
          id: 3,
        },
        {
          id: 4,
        },
        {
          id: 5,
        },
      ],
      interior: [],
      exterior: [],
    };
  },
  created() {},
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      getPieXl().then((res) => {
        res.result.forEach((item) => {
          if (item.source == 1) {
            //内部人员加进数组
            this.arr1.push(item);
          } else {
            //外部人员加进数组
            this.arr2.push(item);
          }
        });
        this.list.forEach((value) => {
          this.arr1.forEach((v) => {
            if (value.id == v.education) {
              this.interior.push(v.count);
            } else {
              this.interior.push(0);
            }
          });
          this.arr2.forEach((v) => {
            if (value.id == v.education) {
              this.exterior.push(v.count);
            } else {
              this.exterior.push(0);
            }
          });
        });
        this.initEchatrs();
      });
    },
    initEchatrs() {
      let _this = this;
      var myChart = echarts.init(document.getElementById("xuexi"));
      let option = {
        tooltip: {},
        grid: {
          top: "10%",
          bottom: "13%",
          left: "3%",
          right: "0",
          containLabel: true,
        },
        legend: {
          data: ["内部", "外部"],
          icon: "circle",
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 36,
          bottom: "2%",
          textStyle: {
            color: "#9DA2AB",
            fontSize: _this.getFontSize(140),
          },
        },
        xAxis: {
          data: ["本科", "硕士", "博士", "博士后", "其他"],
          grid: {
            borderColor: "rgba(210, 210, 210, 0.2)",
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#D2D2D2",
            },
          },
          axisLabel: {
            color: "#616367",
            fontSize: _this.getFontSize(140),
          },
        },
        yAxis: {
          minInterval: 20,
          axisLine: {
            show: true,
            lineStyle: {
              color: "#D2D2D2",
            },
          },
          axisLabel: {
            color: "#616367",
            fontSize: _this.getFontSize(140),
          },
        },
        series: [
          {
            name: "内部",
            type: "bar",
            barWidth: "15%",
            data: this.interior,
            itemStyle: {
              color: "#0E7CF4",
              borderRadius: 3, // 柱子圆角半径
            },
            barGap: "30%",
          },
          {
            name: "外部",
            type: "bar",
            barWidth: "15%",
            data: this.exterior,
            itemStyle: {
              color: "#FAC858",
              borderRadius: 3, // 柱子圆角半径
            },
            barGap: "30%",
          },
        ],
      };
      myChart.setOption(option, true);
    },
  },
};
</script>

<style lang="scss" scoped>
#xuexi {
  height: 100%;
  width: 100%;
}
</style>
