ShutongInterconnectedChemicalCloudPlatform/src/views/hr/displayboards/dimissionrate.vue

<!--
@ 作者: 秦东
@ 时间: 2023-06-30 16:03:33
@ 备注: 行政组织离职率
-->
<script lang="ts" setup>
import * as echarts from "echarts";
import { zexianStrcut } from "@/api/displayboardapi/types";
import { getDimissionRate } from "@/api/displayboardapi/indexapi";

const legendList = new Array();
const seriesData = new Array();

const props = defineProps({
  id: {
    type: String,
    default: "barChart",
  },
  className: {
    type: String,
    default: "",
  },
  width: {
    type: String,
    default: "100%",
    required: true,
  },
  height: {
    type: String,
    default: "650px",
    required: true,
  },
  title: {
    type: String,
    default: "",
  },
});
const option = {
  title: {
    show: false,
    text: "离职率（%）",
  },
  tooltip: {
    trigger: "axis",
  },
  legend: {
    right: "10",
    data: legendList,
    orient: "vertical",
    top: "50",
    type: "scroll",
    icon: "circle",
    itemWidth: 10,
    itemHeight: 10,
  },
  grid: {
    left: "20px",
    right: "290px",
    bottom: "1%",
    containLabel: true,
  },
  toolbox: {
    right: "20px",
    top: "0",
    feature: {
      saveAsImage: {
        title: "导出图片",
        iconStyle: {
          borderWidth: 1,
          borderType: "solid",
        },
      },
    },
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: [
      "1月",
      "2月",
      "3月",
      "4月",
      "5月",
      "6月",
      "7月",
      "8月",
      "9月",
      "10月",
      "11月",
      "12月",
    ],
  },
  yAxis: {
    type: "value",
    splitLine: {
      show: true,
      lineStyle: {
        type: "dotted",
      },
    },
  },
  series: seriesData,
};

onMounted(() => {
  getDimissionRate()
    .then((data: any) => {
      // console.log(data,data.data.list);
      if (data.code == 0) {
        data.data.list.forEach((item: { orgname: any; odds: any }) => {
          legendList.push(item.orgname);
          seriesData.push({
            name: item.orgname,
            type: "line",
            smooth: true,
            data: item.odds,
            label: {
              show: true,
            },
          });
        });
      }
    })
    .finally(() => {
      // console.log("legendList--->",legendList)
      // 图表初始化
      const chart = echarts.init(document.getElementById(props.id) as HTMLDivElement);
      chart.setOption(option);

      // 大小自适应
      window.addEventListener("resize", () => {
        chart.resize();
      });
    });
});
</script>
<template>
  <el-card shadow="never" class="w-full">
    <div class="glm-title" v-if="!!title">
      <span class="bt">{{ title }}</span>
    </div>
    <div :id="id" :class="className" :style="{ height, width }" />
  </el-card>
</template>
<style lang="scss" scoped></style>