adweb3-web/src/views/adweb/data/components/DeviceStatsUV.vue

<template>
        <!-- 图表视图 -->
        <div ref="chartRef" style="height: 550px"></div>
</template>

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

const props = defineProps({
    deviceStats: {
        type: Object,
        required: true
    }
});

const chartRef = ref(null);
const loading = ref(false);
const viewMode = ref('chart');
let chart = null;


const initChart = () => {
    if (!chartRef.value) return;
    
    chart = echarts.init(chartRef.value);
    updateChart();
};

// 格式化整数
const formatNumber = (num: string | number) => {
    return Number(num).toLocaleString();
};


const updateChart = () => {
    if (!chart || !props.deviceStats) return;

    // 获取前数据并计算总数
    const data = props.deviceStats
        .sort((a, b) => Number(b.totalUsers) - Number(a.totalUsers));
    
    const total = data.reduce((sum, item) => sum + Number(item.totalUsers), 0);

    console.log(total, data)
    const option = {
        tooltip: {
            trigger: 'item',
            formatter: (params) => {
                const percent = ((params.value / total) * 100).toFixed(2);
                return `${params.name}<br/>访客数: ${formatNumber(params.value)}<br/>占比: ${percent}%`;
            }
        },
        legend: {
            orient: 'vertical',
            right: 10,
            top: 'center',
            type: 'scroll'
        },
        series: [
            {
                name: '用户数',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: true,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: true,
                    formatter: (params) => {
                        const percent = ((params.value / total) * 100).toFixed(2);
                        return `${params.name}\n${percent}%`;
                    }
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 14,
                        fontWeight: 'bold'
                    }
                },
                data: data.map(item => ({
                    name: item.device,
                    value: item.totalUsers
                }))
            }
        ]
    };

    chart.setOption(option);
};

// 监听数据变化
watch(
    () => props.deviceStats,
    () => {
        updateChart();
    },
    { deep: true }
);

// 监听视图模式变化
watch(viewMode, (newValue) => {
    if (newValue === 'chart') {
        // 在下一个 tick 后初始化图表，确保 DOM 已更新
        nextTick(() => {
            initChart();
        });
    }
});

onMounted(() => {
    if (viewMode.value === 'chart') {
        initChart();
    }
});

// 监听窗口大小变化
window.addEventListener('resize', () => {
    if (viewMode.value === 'chart') {
        chart?.resize();
    }
});

// 组件卸载时清理
onUnmounted(() => {
    chart?.dispose();
    window.removeEventListener('resize', () => {
        chart?.resize();
    });
});
</script>

<style scoped>
.ant-card {
    margin-bottom: 24px;
}

:deep(.ant-table-pagination) {
    margin: 16px 0;
}
</style>