<!--
 * @Author: Kane
 * @Date: 2023-03-04 16:09:31
 * @LastEditors: Kane
 * @FilePath: /task_schedule/src/components/ArchievementChartComponent.vue
 * @Description: 业绩图表组件
 *
 * Copyright (c) ${2022} by Kane, All Rights Reserved.
-->
<template>
    <div class="archievement-wrapper">
        <div id="chartWrapper" />
    </div>
</template>

<script lang="ts">
import { reactive, onMounted } from "vue";
import * as echarts from "echarts";

export default {
  name: "ArchievementChartComponent",
  props: {
    chartData: {
      type: Array,
      require: true,
      default: () => [],
    },
  },
  setup (props)
  {
    const ui = reactive({
      chart_data: props.chartData,
    });

    // 设置图表
    const initCharts = () =>
    {
      const chartDom = document.getElementById("chartWrapper");
      const myChart = echarts.init(chartDom as HTMLDivElement);
      const option = {
        xAxis: {
          type: "category",
          data: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二",],
        },
        yAxis: {
          type: "value",
          data: [200, 400, 600, 800, 1000,],
        },
        series: [
          {
            data: props.chartData,
            type: "line",
          },
        ],
      };

      option && myChart.setOption(option);

      window.onresize = function ()
      {
        // 自适应大小
        myChart.resize();
      };
    };

    onMounted(() =>
    {
      initCharts();
    });

    return { ui, initCharts, };
  },
};
</script>

<style lang="scss">
.archievement-wrapper {
    height: 100%;
    width: 100%;
    // display: flex;
    // flex-direction: column;
    // justify-content: center;
    // align-items: stretch;

    // span {
    //     display: block;
    //     width: 100%;
    //     color: #25e6e6;
    //     text-align: center;

    //     font: {
    //         size: 35px;
    //         family: "FZ-ZHUOHEI";
    //     }

    //     flex-grow: 0;
    // }

    #chartWrapper {
        min-height: 200px;
        width: 100%;
        background-color: $color-charts-bg;
        backdrop-filter: blur(10px);
        flex-grow: 1;
        border-radius: 5px;
    }
}
</style>
