<script setup>
import * as echarts from 'echarts';
import Api from '@/api/index';

import { onMounted, reactive } from 'vue'
var charts = {
    unit: '消费金额/订单数',
    names: ['消费金额', '订单数'],
    lineX: ['1月', '2月', '3月', '4月', '5月', '6月'],
    value: []

}
var color = ['rgba(23, 255, 243', 'rgba(255,100,97']
var lineY = []

var initList = () => {
    lineY = []
    for (var i = 0; i < charts.names.length; i++) {
        var x = i
        if (x > color.length - 1) {
            x = color.length - 1
        }
        var data = {
            name: charts.names[i],
            type: 'line',
            symbol: "none",
            color: color[x] + ')',
            smooth: true,
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: color[x] + ', 0.3)'
                    }, {
                        offset: 0.8,
                        color: color[x] + ', 0)'
                    }], false),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                }
            },
            data: charts.value[i],
        }
        lineY.push(data)
    }
}


var option = () => {
    return {
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            width: "90%"
        },
        xAxis: {
            type: 'category',
            data: charts.lineX,
            nameTextStyle: {
                color: '#fff'
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff',  //更改坐标轴文字颜色
                    fontSize: 14    //更改坐标轴文字大小
                }
            }
        },
        yAxis: {
            name: charts.unit,
            type: 'value',
            nameTextStyle: {
                padding: [0, 0, 0, 30] // 上右下左与原位置距离
            },
            axisLabel: {
                formatter: '{value}',
                textStyle: {
                    color: 'rgb(0,253,255,0.6)'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgb(23,255,243,0.3)'
                }
            },
            axisLine: {
                lineStyle: {
                    color: 'rgb(0,253,255,0.6)'
                }
            }
        },
        series: lineY
    }
}

onMounted(() => {
    init()
    setInterval(() => {
        init()
    }, 10000)
})
function init() {
    Api.get('/orderStats/month').then((res) => {
        res.pop()



        charts.lineX = res.map((val) => val.month)
        charts.value[0] = res.map((val) => val.amount)
        charts.value[1] = res.map((val) => val.count)
        initList()
        var chart = echarts.init(document.getElementById('chart-line'));
        chart.setOption(option());
    })
}


</script>

<template>
    <div id="chart-line" style="width: 100%;height: 100%;">

    </div>
</template>

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