<template>
    <div id="sale-amount" style="width: 100%;height: 260px"></div>
</template>

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


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('sale-amount') as HTMLElement)
    }
    const option = {
        xAxis: {
            name:'月份',
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
            type: 'value',
            name:'营业额',
            axisLine:{
                show:true
            },
            splitLine: {
                show: false
            }
        },
        grid: {
            top: 30 ,
            right: 40,
            bottom: 20,
            left: 30,
        },
        series: [
            {
                type: 'line',
                stack: 'Total',
                data:function () {
                    let res = []
                    for (let i in props.data) {
                        res.push([props.data[i].monthly,props.data[i].saleAmount])
                    }
                    return res
                }(),
                label:{
                    show:true
                }
            },
        ]
    }
    myEcharts.setOption(option)

}


</script>

<style scoped>

</style>
