<template>
    <div class="flex-1 w-full">
        <card title="成交客户增长趋势">
            <v-charts style="height: 350px" :option="option" :autoresize="true" />
        </card>
    </div>
</template>

<script setup lang="ts">
import vCharts from 'vue-echarts'
import card from './card.vue'

const data = [
    { label: '2025-02-24', value: 320 },
    { label: '2025-02-25', value: 132 },
    { label: '2025-02-26', value: 201 },
    { label: '2025-02-27', value: 334 },
    { label: '2025-02-28', value: 190 },
    { label: '2025-03-01', value: 130 },
    { label: '2025-03-02', value: 220 }
]
const xAxisData = data.map(item => item.label)
const seriesData = data.map(item => item.value)
const option = ref({
    color: ['#37A2FF'],
    tooltip: {
        trigger: 'axis'
    },
    legend: {},
    toolbox: {},
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: xAxisData,
            axisLabel: {
                interval: 0
            }
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '成交客户数量',
            type: 'line',
            smooth: true,
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#9E87FFb3'
                        },
                        {
                            offset: 1,
                            color: '#9E87FF03'
                        }
                    ]
                }
            },
            data: seriesData
        }
    ]
})
</script>
<style scoped></style>
