<template>
    <div class='app-container'>
        <div ref="echartsRef" id="main" style="width: 100%;height:400px;"></div>
    </div>
</template>

<script setup lang='ts'>
import { onMounted } from 'vue'
import { statOrder } from '@/services/api/statistics/index'
import * as echarts from 'echarts';

onMounted(() => {
    let myChart = echarts.init(document.getElementById('main') as any);
    var option: any;
    var xData: any = []
    var yData: any = []
    var yData1: any = []
    var yData2: any = []
    var yData3: any = []
    statOrder().then((res: any) => {
        if (res.code === 200) {
            res.data.rows.forEach((item: any) => {
                xData.push(item.day)
                yData.push(item.amount)
                yData1.push(item.orders)
                yData2.push(item.pcr)
                yData3.push(item.customers)
            })
        }
    })
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        xAxis: {
            type: 'category',
            data: xData
        },
        yAxis: {},
        series: [
            {
                data: yData,
                type: 'line',
                name: '订单总额',
                label: {
                    show: true,
                    position: 'inside'
                },
            },
            {
                data: yData1,
                type: 'line',
                name: '订单量',
                label: {
                    show: false,
                    position: 'inside'
                },
            },
            {
                data: yData2,
                type: 'line',
                name: '客单价',
                label: {
                    show: false,
                    position: 'inside'
                },
            },
            {
                data: yData3,
                type: 'line',
                name: '下单用户',
                label: {
                    show: false,
                    position: 'inside'
                },
            }
        ],
        legend: {
            show: true
        }
    };

    setTimeout(() => {
        option && myChart.setOption(option);
    }, 50)
})

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