shuhi-ui/src/views/customer/stat/components/user-add-compare.vue

<template>
    <div class="flex flex-col">
        <el-row :gutter="16" class="mt-4">
            <el-col :span="8">
                <div class="statistic-card">
                    <el-statistic title="今日" :value="todayRegNum" suffix="人" />
                    <div class="statistic-footer">
                        <span>对比昨日</span>
                        <el-text :type="comparisonType">
                            {{ comparisonValue }}%<el-icon><component :is="comparisonIcon" /></el-icon>
                        </el-text>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <el-statistic :value="yesterdayRegNum" title="昨日" suffix="人" />
            </el-col>
            <el-col :span="8">
                <el-statistic :value="averageRegNum" title="均值" suffix="人" />
            </el-col>
        </el-row>
        <v-chart ref="saleChartRef" style="height: 280px" :option="options" />
    </div>
</template>
<script setup>
    import { ref, reactive, computed } from 'vue';
    import VChart from 'vue-echarts';
    import { use } from 'echarts/core';
    import { CanvasRenderer } from 'echarts/renderers';
    import { LineChart } from 'echarts/charts';
    import {
        GridComponent,
        TooltipComponent,
        LegendComponent,
        ToolboxComponent
    } from 'echarts/components';
    import { Top, Bottom } from '@element-plus/icons-vue';

    // 按需加载echarts
    use([
        CanvasRenderer,
        LineChart,
        GridComponent,
        TooltipComponent,
        LegendComponent
    ]);

    const props = defineProps({
        todayRegNum: {
            type: Number,
            default: 0
        },
        yesterdayRegNum: {
            type: Number,
            default: 0
        },
        todayRegNumComparison: {
            type: Number,
            default: 0
        },
        chatAxis: {
            type: Array,
            default: () => []
        },
        todayRegNumCharts: {
            type: Array,
            default: () => []
        },
        yesterdayRegNumCharts: {
            type: Array,
            default: () => []
        }
    });

    // 计算均值
    const averageRegNum = computed(() => {
        if (props.todayRegNumCharts.length === 0) return 0;
        const sum = props.todayRegNumCharts.reduce((acc, val) => acc + val, 0);
        return Math.round(sum / props.todayRegNumCharts.length);
    });

    // 计算环比显示
    const comparisonType = computed(() => {
        return props.todayRegNumComparison > 0 ? 'success' : 'danger';
    });

    const comparisonValue = computed(() => {
        return Math.abs(props.todayRegNumComparison);
    });

    const comparisonIcon = computed(() => {
        return props.todayRegNumComparison > 0 ? Top : Bottom;
    });

    const options = computed(() => ({
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['今日新增用户', '昨日新增用户']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: props.chatAxis || []
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '今日新增用户',
                type: 'line',
                data: props.todayRegNumCharts || [],
                smooth: true
            },
            {
                name: '昨日新增用户',
                type: 'line',
                data: props.yesterdayRegNumCharts || [],
                smooth: true
            }
        ]
    }));
</script>