<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="98500" suffix="人" />
                    <div class="statistic-footer">
                        <span>对比昨日</span>
                        <el-text type="success">
                            24%<el-icon><Top /></el-icon>
                        </el-text>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <el-statistic :value="693700" title="昨日" suffix="人" />
            </el-col>
            <el-col :span="8">
                <el-statistic :value="690" title="均值" suffix="次" />
            </el-col>
        </el-row>
        <v-chart ref="saleChartRef" style="height: 280px" :option="options" />
    </div>
</template>
<script setup>
    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 options = reactive({
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['新增用户数']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '新增用户数',
                type: 'line',
                data: [120, 132, 234, 134, 90],
                smooth: true
            }
        ]
    });
</script>
