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

<script setup lang="ts">
import {nextTick, onActivated, onMounted, watch} from "vue";
import * as echarts from "echarts";

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


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

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

onActivated(() => {
    nextTick(() => {
        myEcharts.resize()
    })
})

//
let myEcharts: any = null

const initUserGrowthChart = () => {
    if (myEcharts == null) {
        myEcharts = echarts.init(window.document.getElementById('user-mouth-chart') as HTMLElement)
    }

    const option = {
        xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
            type: 'value'
        },
        grid: {
            top: 30 ,
            right: 30,
            bottom: 20,
            left: 30,
        },
        series: [
            {
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                },
                data: function () {
                    let res = []
                    for (let i in props.data) {
                        res.push([props.data[i]!.monthly, props.data[i]!.memberCount])
                    }
                    return res
                }(),
                itemStyle: {

                },
                barMaxWidth: '50',
                label:{
                    show:true,
                    color:'#ffffff'
                }
            }
        ]
    }
    myEcharts.setOption(option)

}


</script>

<style scoped>
a{
    color: #67c23a;
}
</style>
