<!-- 统计图2：近12月登录统计 -->
<template>
    <div class="echarts-div" id="user-login-sta-month" ref="user-login-sta-month"></div>
</template>

<script setup name="com-chart-t2">
import {getCurrentInstance, onMounted} from "vue";
import * as echarts from 'echarts';
import {useComStore} from "../../store/com";
const { proxy } = getCurrentInstance();

// 日期数组、值数组 
const f5UserLoginSta = function(dateArray, countArray) {
    // ===========================================  定义数据
    var x_name = '时间'; // x轴名称
    var y_name = "活跃"; // y轴名称
    var legendArray = ['登录数量'];		// 所有显示的图例 
        
    // console.log('-----', dateArray);
    // console.log('-----', countArray);
    
    // ===========================================  开始渲染
    
    // var myChart = echarts.init(document.getElementById('user-login-sta-month'));
    var myChart = echarts.init(proxy.$refs['user-login-sta-month']);
        
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        toolbox: {
            show: true,
            top: 0,
            feature: {
                saveAsImage: {
                    show: true
                }
            }
        },
        grid:{x: 40, y: 40, x2: 40, y2: 30},	//设置canvas内部表格的内距
        legend: {
            data: legendArray
        },
        xAxis: {
            name: x_name,
            type: 'category',
            // boundaryGap : false,
            // axisLabel: {
            // 	'interval': 0
            // }, //强制不缩略x轴刻度,
            data: dateArray
        },
        yAxis: {
            name: y_name,
            type: 'value'
        },
        series: [
            {
                name: '登录数量',
                type:'bar',
                data: countArray,
                smooth: true,	// 曲线形式
                areaStyle: {
                    color: 'rgba(0, 128, 0, 0.2)'  //改变区域颜色
                },
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [   //改变区域颜色
                        {offset: 0, color: 'rgba(0, 128, 0, 0.8)'},
                        {offset: 1, color: 'rgba(0, 128, 0, 0.2)'}
                    ])
                    // color: 'rgba(0, 128, 0, 0.8)', //改变折线点的颜色
                },
            },
        ]
    };
    myChart.setOption(option);
    // window.myChartList.push(myChart);
    useComStore().pushResizeCallback('com-chart-t2', function (){
        myChart.resize();
    })
}
        
onMounted(function(){
    // 初始化日期数组 
    var year = new Date().getFullYear() - 1;
    var month = new Date().getMonth() + 1;
    var dateArray = [];
    for (var i = 1; i <= 13; i++) {
        let y = year;
        let m = month + i;
        if(m > 12) {
            m = m - 12;
            y = y + 1;
        }
        if(m < 10) {
            m = '0' + m;
        }
        dateArray.push(y + '-' + m);
    }
    var startTime = dateArray[0] + '-1';
    var endTime = dateArray.pop() + '-1';;

    // // 获取统计数据 
    sa.ajax('/StaData/getLoginData', {
        startTime: startTime + ' 00:00:00',
        endTime: endTime + ' 00:00:00',
        f: 1
    }, function(res){

        var countArray = [];
        for (let key of dateArray) {
            countArray.push(res.data[key] || 0);
        }

        f5UserLoginSta(dateArray, countArray);
    }, {msg: null});
})
        
</script>

<style scoped>
	
</style>
