<script setup>
import Api from '@/api/index';
import * as echarts from 'echarts';
import { onMounted, reactive } from 'vue'
var charts = {
    unit: '时间/人',
    names: ['人数'],
    lineX: [],
    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('/userStats/total').then((res) => {
        // res.month.pop()
        charts.lineX = res.month.map((val) => val.dateStr)
        charts.value[0] = res.month.map((val) => val.count)
        initList()
        var chart = echarts.init(document.getElementById('chart-member'));
        chart.setOption(option());
    })
}
</script>

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

    </div>
</template>

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