<template>
    <v-chart ref="saleChartRef" style="height: 350px" :option="options" />
</template>
<script setup>
    import { ref, reactive, watch, 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';

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

    const props = defineProps({
        chartData: {
            type: Object,
            default: () => ({
                chatAxis: [],
                regNumCharts: [],
                activeNumCharts: [],
                totalNumCharts: []
            })
        }
    });

    const options = computed(() => ({
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['新增用户数', '活跃用户数', '累计用户数']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: props.chartData.chatAxis || []
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '新增用户数',
                type: 'line',
                data: props.chartData.regNumCharts || [],
                smooth: true
            },
            {
                name: '活跃用户数',
                type: 'line',
                data: props.chartData.activeNumCharts || [],
                smooth: true
            },
            {
                name: '累计用户数',
                type: 'line',
                data: props.chartData.totalNumCharts || [],
                smooth: true
            }
        ]
    }));
</script>
