<template>
  <div :id="props.ids" style="width: 100%; height: 100%">
  </div>
</template>

<script setup>

import * as echarts from "echarts";
import { ref, defineProps, watch, onMounted, nextTick, watchEffect } from "vue";
import { chartAdaptation } from "@/utils/tools";
import emitter from "@/utils/eventBus.js";
import { getApi, postApi } from "@/api/tobAcco_api.js";
//   import { deepClone } from "@/utils/tools";


const props = defineProps({
  xData: {
    type: Array,
    default: []
  },
  yData: {
    type: Array,
    default: []
  },
  loadingshow: {
    type: Boolean,
    default: false
  },
  ids: {
    type: String,
    default: "binbar"
  },
  key: {
    type: Number,
    default: 0
  }
});

watch(
  () => props.loadingshow,
  (val) => {
    if (val) {
      getBin(props.xData, props.yData);
    }

  }
)
onMounted(() => {



})
const getBin = (xData, yData) => {
  const chartDom = document.getElementById(props.ids);
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    title: {
      text: '各单位人员情况',

    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['分配人数', '上报人数', '签到人数']
    },
    toolbox: {
      show: true,
      feature: {
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        // prettier-ignore
        data: xData
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: yData
  };

  option && myChart.setOption(option);
  //自适应
  chartAdaptation(myChart);
  window.addEventListener('resize', () => {
    myChart.resize()
  })
};

</script>
<style scoped></style>