accompany_admin_pc/src/views/home/compoents/MainDashBoardLiner.vue

<template>
    <header>
        <img src="@/assets/icons/mainproject.svg">
        <p class="title">周订单统计</p>
    </header>
    <div class="line" ref="chartRef"></div>
</template>

<script setup lang='ts'>
import * as echarts from 'echarts';

const chartRef = ref<HTMLElement>();

onMounted(() => {
    if (!chartRef.value) return;
    
    const chart = echarts.init(chartRef.value);
    
    // Mock data for the past 7 days
    const dates = [];
    const orderCounts = [];
    const orderAmounts = [];
    
    // Generate data for the last 7 days
    for (let i = 6; i >= 0; i--) {
        const date = new Date();
        date.setDate(date.getDate() - i);
        dates.push(`${date.getMonth() + 1}-${date.getDate()}`);
        
        // Random mock data
        orderCounts.push(Math.floor(Math.random() * 200) + 50);
        orderAmounts.push(Math.floor(Math.random() * 50000) + 10000);
    }
    
    const option = {
        color: ['#3D8EFF', '#FF9843'], // Blue for count, orange for amount
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['订单数量', '订单金额'],
            bottom: 0,
            itemGap: 20
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '12%',
            top: '5%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: dates,
            axisLine: {
                lineStyle: {
                    color: '#E5E5E5'
                }
            },
            axisLabel: {
                color: '#666'
            }
        },
        yAxis: [
            {
                type: 'value',
                name: '订单数量',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#E5E5E5'
                    }
                },
                axisLabel: {
                    color: '#666',
                    formatter: '{value}'
                },
                splitLine: {
                    lineStyle: {
                        color: '#F5F5F5'
                    }
                }
            },
            {
                type: 'value',
                name: '订单金额',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#E5E5E5'
                    }
                },
                axisLabel: {
                    color: '#666',
                    formatter: '¥{value}'
                },
                splitLine: {
                    show: false
                }
            }
        ],
        series: [
            {
                name: '订单数量',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 8,
                lineStyle: {
                    width: 3,
                    color: '#3D8EFF'
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(61, 142, 255, 0.3)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(61, 142, 255, 0.1)'
                        }
                    ])
                },
                data: orderCounts
            },
            {
                name: '订单金额',
                type: 'line',
                yAxisIndex: 1,
                smooth: true,
                symbol: 'circle',
                symbolSize: 8,
                lineStyle: {
                    width: 3,
                    color: '#FF9843'
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(255, 152, 67, 0.3)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(255, 152, 67, 0.1)'
                        }
                    ])
                },
                data: orderAmounts
            }
        ]
    };
    
    chart.setOption(option);
    
    // Handle window resize
    window.addEventListener('resize', function() {
        chart.resize();
    });
});
</script>

<style scoped lang='scss'>
header {
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid $dashLineColor;
    gap:4px;

    img {
        width: 16px;
        height: 16px;
    }

    .title {
        color: $titleTextColor;
        font-weight: bold;
    }
}

.line {
    height: 400px; 
    margin: 0 auto;
    padding:16px
}
</style>