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

<template>
    <header>
        <img src="@/assets/icons/mainproject.svg">
        <p class="title">近三月陪玩团情况</p>
    </header>
    <div class="bar" ref="chartRef"></div>
</template>

<script setup lang='ts'>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';

const chartRef = ref<HTMLElement>();

onMounted(() => {
    if (!chartRef.value) return;
    const chart = echarts.init(chartRef.value);
    const weeks = [ '五月','六月', '七月'];
    
    // Mock data
    const orderCount = [125, 210, 180];       // 销售订单数
    const playerCount = [80, 120, 95];        // 陪玩人数
    const orderAmount = [3560, 4820, 4150]; // 订单金额
    const agentCount = [15, 22, 18];           // 代理人数
    
    const option = {
        color: ['#3D8EFF', '#00C4DF', '#FF9843', '#897DD7'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter: function(params: any[]) {
                let result = params[0].axisValue + '<br/>';
                params.forEach((item: any) => {
                    const value = item.seriesIndex === 2 ? 
                        '¥' + item.value.toLocaleString() : 
                        item.value + '个';
                    result += `${item.marker} ${item.seriesName}: <strong>${value}</strong><br/>`;
                });
                return result;
            }
        },
        legend: {
            data: ['销售订单数', '陪玩人数', '订单金额', '代理人数'],
            bottom: 10,
            itemGap: 20,
            textStyle: {
                color: '#666'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '15%',
            top: '10%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: weeks,
            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: 'bar',
                barWidth: 16,
                barGap: '10%',
                barCategoryGap: '30%',
                itemStyle: {
                    borderRadius: [4, 4, 0, 0],
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#3D8EFF' },
                        { offset: 1, color: '#8BB8FF' }
                    ])
                },
                label: {
                    show: true,
                    position: 'top',
                    formatter: '{c}个'
                },
                data: orderCount
            },
            {
                name: '陪玩人数',
                type: 'bar',
                barWidth: 16,
                itemStyle: {
                    borderRadius: [4, 4, 0, 0],
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#00C4DF' },
                        { offset: 1, color: '#5BD9E9' }
                    ])
                },
                label: {
                    show: true,
                    position: 'top',
                    formatter: '{c}个'
                },
                data: playerCount
            },
            {
                name: '订单金额',
                type: 'bar',
                yAxisIndex: 1,
                barWidth: 16,
                itemStyle: {
                    borderRadius: [4, 4, 0, 0],
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#FF9843' },
                        { offset: 1, color: '#FFBB78' }
                    ])
                },
                label: {
                    show: true,
                    position: 'top',
                    formatter: '¥{c}'
                },
                data: orderAmount
            },
            {
                name: '代理人数',
                type: 'bar',
                barWidth: 16,
                itemStyle: {
                    borderRadius: [4, 4, 0, 0],
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#897DD7' },
                        { offset: 1, color: '#B4ACEA' }
                    ])
                },
                label: {
                    show: true,
                    position: 'top',
                    formatter: '{c}个'
                },
                data: agentCount
            }
        ]
    };
    
    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;
    }
}

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