<template>
    <div id="user-week-chart" style="width: 100%;height: 260px"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import {nextTick, onActivated, onMounted, watch} from "vue";
import request from "/@/api/request";
import {statistics} from "/@/api/controllerUrls";

onMounted(() => {
    initUserGrowthChart()
    window.addEventListener('resize', function () {
        myEcharts.resize()
    });
})

watch(() => props.data, () => {
    initUserGrowthChart()
})


const props = defineProps({
    data: {
        type: Array,
        default: []
    }
})

//
let myEcharts: any = null

const initUserGrowthChart = () => {
    if (myEcharts == null) {
        myEcharts = echarts.init(window.document.getElementById('user-week-chart') as HTMLElement)
    }
    const option = {
        grid: {
            top: 20 ,
            right: 30,
            bottom: 20,
            left: 30,
        },
        xAxis: {
            data: function () {
                let res = []
                for (let i in props.data) {
                    res.push(props.data[i].daily)
                }
                return res
            }(),
        },
        yAxis: {},
        series: [
            {
                data:function () {
                    let res = []
                    for (let i in props.data) {
                        res.push(props.data[i].requestCount)
                    }
                    return res
                }(),
                type: 'line',
                smooth: true,
                areaStyle: {
                    color: '#8595F4',
                },
                label:{
                    show:true
                }
            },
        ],
    }
    myEcharts.setOption(option)

}


</script>

<style scoped>

</style>
