<!-- 统计图3：近7天注册统计 -->
<template>
    <div class="echarts-div" id="user-reg-sta" ref="user-reg-sta"></div>
</template>

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

// 日期数组、值数组 
const f5UserRegSta = 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-reg-sta'));
    var myChart = echarts.init(proxy.$refs['user-reg-sta']);
				
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        toolbox: {
            show: true,
            top: 0,
            feature: {
                saveAsImage: {
                    show: true
                }
            }
        },
        grid:{x: 30, y: 40, x2: 30, 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:'line',
                data: countArray,
                smooth: true,	// 曲线形式
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [   //改变区域颜色
                        {offset: 0, color: 'rgba(127, 181, 202, 0.4)'},
                        {offset: 1, color: 'rgba(127, 181, 202, 0.02)'}
                    ])
                },
                itemStyle: {
                    color: 'rgba(85, 162, 192, 1)', //改变折线点的颜色
                },
            },
        ]
    };
    myChart.setOption(option);
    // window.myChartList.push(myChart);
    useComStore().pushResizeCallback('com-chart-t3', function (){
        myChart.resize();
    })
};

onMounted(function (){
    // 初始化日期数组 
    let startTime = new Date().getTime() - 86400000 * 6;
    let endTime = new Date().getTime() + 1000;
    let dateArray = [];
    for (let i = startTime; i < endTime; i += 86400000) {
        dateArray.push(sa.forDate(i, 'MM-dd'));
    }
    // 获取统计数据 
    sa.ajax('/StaData/getRegData', {
        startTime: sa.forDate(startTime, 'yyyy-MM-dd') + ' 00:00:00',
        endTime: sa.forDate(endTime, 'yyyy-MM-dd') + ' 23:59:59',
        f: 2
    }, function(res){

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

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

<style scoped>
	
</style>
