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

<script setup>
import * as echarts from "echarts";
const status = ref(true)

import {
  ref,
  defineProps,
  reactive,
  onMounted,
  watch,
  defineEmits,
  nextTick,
} from "vue";
import { chartAdaptation } from "@/utils/tools";
const emits = defineEmits(["clickOrgId"]);
//   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"
  },
  title: {
    type: String,
    default: "风险统计"
  }
});
watch(
  () => props.loadingshow,
  (val) => {
    if (val) {
      getBin(props.xData, props.title, props.yData);
    }

  }
)
onMounted(() => {
  // nextTick(() => {
  //   if (props.loadingshow) {
  //     getBin(props.barTitle, props.barNum);
  //   }
  // });
});
const getBin = (xData, title, yData) => {
  const chartDom = document.getElementById(props.ids);
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    title: {
      text: title
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {},
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      name: "部门",
      data: xData

    },
    yAxis: {
      type: 'value',
      name: "风险数量",
      boundaryGap: [0, 0.01]
    },
    series: yData
  };

  //点击事件
  myChart.on("click", function (params) {
    emits("clickOrgId", params);
  });
  option && myChart.setOption(option);
  //自适应
  chartAdaptation(myChart);
};
// defineExpose({ getBin });
</script>
<style scoped></style>
