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>