<!--
 * @Author: 张宁 18339727226@163.com
 * @Date: 2024-05-23 19:38:24
 * @LastEditors: 张宁 18339727226@163.com
 * @LastEditTime: 2024-05-31 18:55:10
 * @FilePath: \welcome-system-screen\src\views\index\right-bottom-two.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { ElMessage } from "element-plus";
const xData:Ref<any> = ref([])
const yData:Ref<any> = ref([])
const option = reactive({
  xAxis: {
      type: "category",
      data: xData,
      boundaryGap: true, // 是否留白，从原点开始
      axisLabel: {
        color: "#fff",
        fontWeight: "500",
      },
    },
    yAxis: {
      show: false,
    },
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,0,0,.6)",
      borderColor: "rgba(147, 235, 248, .8)",
      textStyle: {
        color: "#FFF",
      },
    },
    grid: {
      //布局
      show: false,
      left: "10px",
      right: "30px",
      bottom: "0px",
      top: "20px",
      containLabel: true,
      // borderColor: "#1F63A3",
    },
    series: [
      {
        data: yData,
        type: "bar",
        smooth: false,
        name: "当日缴费人数",
        color: "#2265ff",
        label: {
          show: true, // 开启显示  
          position: 'top', // 在上方显示  
          color: '#999',
          fontSize: 12,

        }
      }
    ],
});
const getData = (params: any) => {
  let dateList = params.map((el: any) => el.professionalName)
  let numList = params.map((el: any) => el.reportNumber)
  setOption(dateList, numList)
};
const setOption = async (x: any[], y: any[]) => {
  console.log(x, y);
  xData.value = x
  yData.value = y
};

defineExpose({ getData })
</script>

<template>
  <!-- v-if="JSON.stringify(option) != '{}'" -->
  <v-chart class="chart" :option="option" />
</template>

<style scoped lang="scss"></style>
